`
aerchi
  • 浏览: 419263 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
文章分类
社区版块
存档分类
最新评论

新浪微博首页文字淡入淡出滚动效果

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新浪微博首页文字淡入淡出滚动效果丨芯晴网页特效丨CsrCode.Cn</title>
<style>
#ul1 {background:white; margin:0px; padding:0px; width:500px; height:300px; border:1px solid black; overflow:hidden;}
li {border-bottom:1px solid orange; padding:15px 10px 3px 10px; margin:0px; list-style:none;}
</style>
<script type="text/javascript">
var arr=['洗脸也能抽筋??', '好冷啊', '一如既往地喜欢特务男,哈哈,有脑有身手', '我靠近你,不是因为你什么都好,不是因为你能给我一个安心而不错的未来,不是因为你是我的老公,不是因为我觉得我们肯定这一辈子会这样好好走下去,不是因为再找一段感情代价太大,而是因为,我爱你,我觉得看到你,就会心动。', '我承认我是个没有鼓励就没有动力的人,缺乏太多毅力。等过了这个冬天。也许我真的能把自己的心收拾干净。空出心里最重要的位置。给自己未来的新娘。剩下的空间,全是梦想,家庭和朋友。'];
var t=setInterval(function(){
var sTxt=arr.shift();
createDom(sTxt);
arr.push(sTxt);
},2000)
var bPause=false;
function startMove(obj,attr,iTarget,fnMoveEnd)
{
if(obj.timer)
{
clearInterval(obj.timer);
}
obj.timer=setInterval(function(){
if(bPause)
{
return;
}
doMove(obj,attr,iTarget,fnMoveEnd);
},30)
};
function getAttr(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return document.defaultView.getComputedStyle(obj,false)[attr];
}
}
function doMove(obj,attr,iTarget,fnMoveEnd)
{
var iSpeed=0;
var weizhi=0;
if(attr=="opacity")
{
weizhi=parseFloat(getAttr(obj,"opacity"));
}
else
{
weizhi=parseFloat(getAttr(obj,attr))
}
if(Math.abs(iTarget-weizhi)<1/100)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnMoveEnd)
{
fnMoveEnd();
}
}
else
{
iSpeed=(iTarget-weizhi)/8;
if(attr=="opacity")
{
obj.style.filter="alpha(opacity:"+(weizhi+iSpeed)*100+")";
obj.style.opacity=weizhi+iSpeed;
}
else
{
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
obj.style[attr]=weizhi+iSpeed+"px";
}
}
};
function leaveMessage()
{
var oText=document.getElementById("txt1");
createDom(oText.value);
oText.value="";
};
function createDom(sTxt)
{
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var oLi=document.createElement("li");

var iHeight=0;
oLi.innerHTML=sTxt;
oLi.style.filter="alpha(opacity:0)";
oLi.style.opacity=0;

if(aLi.length)
{
oUl.insertBefore(oLi,aLi[0])
}
else
{
oUl.appendChild(oLi)
}

//开始运动
iHeight=oLi.offsetHeight;
oLi.style.height="0px";
oLi.style.overflow='hidden';
startMove(oLi,"height",iHeight,function(){
startMove(oLi,"opacity",1)
})
oUl.onmouseover=function()
{
bPause=true;
};
oUl.onmouseout=function()
{
bPause=false;
}
};
</script>
</head>
<body>
<ul id="ul1"></ul>
</body>
</html>


<p align="center">本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</p>
分享到:
评论

相关推荐

    jQuery实现图片文字淡入淡出效果

    本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果,分享给大家供大家参考,具体内容如下 1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div...

    完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效

    1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果...

    jquery实现仿新浪微博评论滚动效果

    这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动...

    仿新浪微博首页&quot;大家正在说&quot;渐入轮显效果

    仿新浪微博首页“大家正在说”渐入轮显效果,有淡入淡出的效果,新内容渐渐滚出来,老内容慢慢滚动下去,貌似很新奇的一种方式,从新浪微博获得。

    JQuery&CSS;&CSS;+DIV实例大全.rar

    63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典...

    《精通CSS+DIV网页样式与布局》光盘源码

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与XML的...

    精通CSS.DIV.网页样式与布局 源码

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与...

    精通CSS+DIV网页样式与布局Part1

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与XML的...

    精通CSS+DIV网页样式与布局

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与XML的...

    精通CSS.DIV网页样式与布局视频01

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与XML的...

    精通CSS+DIV网页样式与布局视频教材

    13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1...

    精通JavaScript+jQuery Part1

     13.6 实例四:图片淡入淡出   13.7 实例五:CSS实现PPT幻灯片   13.8 实例六:灯光效果   13.9 实例七:舞台灯光   13.10 实例八:探照灯   13.11 实例九:鼠标文字跟随   第14章 CSS与XML的...

Global site tag (gtag.js) - Google Analytics