css3特效文字跟随鼠标移动
0
所有回答(3)
0
现在浏览器都可以查看效果的，比如google浏览器，看看是样式设置的还是脚本设置的。
脚本 在http://www.miaov.com/2013/js/indexIn.js
这个标题是一个字符都用一组<p></p>包含，在mouseover事件设置top等css属性
0
function fnINews()
{
var aA=$("#iNewsList a");
var aLi=$("#iNewsList li");
var iMtNow=0;
aLi.mouseover(function(){
aLi.removeClass("active");
$(this).addClass("active");
return false;
});
for(var i=0;i<aA.length;i++)
{
var aHtml=aA.eq(i).html().split("");
for(var j=0;j<aHtml.length;j++)
{
aHtml[j]="<span>"+aHtml[j]+"</span>"
}
aA.eq(i).html(aHtml.join(""));
}
var aSpan=$("#iNewsList span");
for(var i=0;i<aSpan.length;i++)
{
aSpan.eq(i).css("left",aSpan.eq(i).position().left+"px");
}
aSpan.css("position","absolute");
var iStartTop=aSpan.position().top;
var iMinTop=-5;
var iMaxTop=parseFloat(aSpan.parent().css("height"))-parseFloat(aSpan.css("height"))+5;
aSpan.mouseover(function(ev){
var ev=ev||event;
var iStartY=ev.clientY;
var obj=$(this);
this.parentNode.onmousemove=function(ev)
{
var iMouseY=ev.clientY;
var iTop=iStartTop+(iMouseY-iStartY);
var aSpan=$(this).find("span");
var iIndex=obj.index();
aSpan.stop();
if(iTop<iMinTop || iTop>iMaxTop)
{
aSpan.animate({top:iStartTop},500,"elasticOut");
this.parentNode.onmouseout=null;
this.parentNode.onmousemove=null;
}
else
{
for(var i=0;i<aSpan.length;i++)
{
if(iMouseY>iStartY)
{
var iSpanTop=iTop-Math.abs(i-iIndex);
if(iSpanTop<iStartTop)
{
iSpanTop=iStartTop;
}
}
else if(iMouseY<iStartY)
{
var iSpanTop=iTop+Math.abs(i-iIndex);
if(iSpanTop>iStartTop)
{
iSpanTop=iStartTop;
}
}
aSpan.eq(i).css("top",iSpanTop+"px");
}
}
this.parentNode.onmouseout=function()
{
aSpan.animate({top:iStartTop},500,"elasticOut");
this.parentNode.onmouseout=null;
this.parentNode.onmousemove=null;
};
};
});
}
exports.fnINews = fnINews;
这段JS 就在你说的那个里面 可以看的很清楚啊 通过 鼠标事件 +CSS 实现的 那个CSS 也可以dong 下来 你试试看
0
你这个列表如果是<p>标签
$("p").mouseover(function(){ $("p").css("background-color","yellow"); });
如果是<li>标签
$("li").mouseover(function(){ $("p").css("background-color","yellow"); });
