首页 新闻 搜索 专区 学院

css3特效文字跟随鼠标移动

0
悬赏园豆:20 [已关闭问题] 关闭于 2016-08-30 15:18

http://www.miaov.com/2013/

附上链接 

最新消息模块 鼠标划过文字做出的特效 这种效果怎么写

求赐源码

L_JL的主页 L_JL | 初学一级 | 园豆:165
提问于:2016-04-28 11:53
< >
分享
所有回答(3)
0

现在浏览器都可以查看效果的,比如google浏览器,看看是样式设置的还是脚本设置的。

waiter | 园豆:1000 (小虾三级) | 2016-04-28 14:03

脚本 在http://www.miaov.com/2013/js/indexIn.js 

这个标题是一个字符都用一组<p></p>包含,在mouseover事件设置top等css属性

支持(0) 反对(0) waiter | 园豆:1000 (小虾三级) | 2016-04-28 14:08
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 下来 你试试看

skin33 | 园豆:110 (初学一级) | 2016-04-28 17:32
0

你这个列表如果是<p>标签

$("p").mouseover(function(){ $("p").css("background-color","yellow"); });

如果是<li>标签

$("li").mouseover(function(){ $("p").css("background-color","yellow"); });

酱油荷 | 园豆:3 (初学一级) | 2016-04-28 17:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册