仿猪八戒网左下角的文字滚动效果

 更新时间:2011年10月28日 23:56:45   作者:  
觉得猪八戒网左下角的文字滚动,效果不错!自己摸索了一下,以自己的方法实现了!没有运用jQuery,不过用了自己的编写的Js库!
源码:

css:
复制代码 代码如下:

*{padding:0;margin:0;font-size:12px;}
.do_ta { border: 1px solid #E4E4E4; margin:10px auto; width:170px; }
.do_ta .ta_ta { background: url("http://s.zbjimg.com/p/zbj/css/../img/tafb.gif") no-repeat; height: 52px; width: 168px; }
.do_ta .ta_tc { height: 61px; line-height: 20px; margin: 10px; overflow: hidden; padding: 0;position:relative; }
.do_ta .ta_tc li { border-bottom: 1px dashed #E4E4E4; color: #666666; height: 60px; margin: 0; overflow: hidden; padding: 0;position:absolute;top:0;left:0;background:#fff;z-index:0;width:155px; }
.do_ta .ta_tc li .time { color: #999999; }
.do_ta .ta_tc li u { color: #2B9A00; text-decoration:none;}
.do_ta .ta_tc li s { color: #FF3600; text-decoration:none;}
.do_ta .ta_tc li a { color: #1A69DE;text-decoration:none; }
.do_ta .dota_d { padding: 5px 0 15px; text-align: center; }
.do_ta .dota_d a{color:#666;}

javascript:

个人js工具库,猛点击
复制代码 代码如下:

Meng.extend({
zbjScrollText:function(scrollId){
var li = Meng.getTag('li',Meng.getId(scrollId)),

curActLi = 0,
getActivity = function(){
return [li[curActLi],li[10+curActLi],li[20+curActLi],li[30+curActLi]];
},
sliceDown = function(elem,pos){
Meng.setStyle(elem,{top:'-60px',zIndex:1});
Meng.animate(elem,{top:-60},{top:60},800);
},
play = function(){
Meng.each(getActivity(),function(i){
var _this = this;
setTimeout(function(){
sliceDown(_this,i);
},i*900);
});
};
play();
setInterval(function(){
if(curActLi == 9){
curActLi = 0;
Meng.each(li,function(){Meng.setStyle(this,{zIndex:0})});
}else curActLi++;
play();
},5000);
}
});
Meng.zbjScrollText('dota1');

相关文章

  • 微信小程序实现照片裁剪

    微信小程序实现照片裁剪

    这篇文章主要为大家详细介绍了微信小程序实现照片裁剪,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • RequireJS使用注意细节

    RequireJS使用注意细节

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。这篇文章主要介绍了RequireJS使用注意细节的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript省市联动实现代码

    JavaScript省市联动实现代码

    这篇文章主要介绍了JavaScript省市联动实现代码,需要的朋友可以参考下
    2014-02-02
  • js实现鼠标滑动到某个div禁止滚动

    js实现鼠标滑动到某个div禁止滚动

    这篇文章主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 基于rollup的组件库打包体积优化小结

    基于rollup的组件库打包体积优化小结

    这篇文章主要介绍了基于rollup的组件库打包体积优化小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • es6的数字处理的方法(5个)

    es6的数字处理的方法(5个)

    本文主要介绍了es6的数字处理的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 轻松实现jquery手风琴效果

    轻松实现jquery手风琴效果

    这篇文章主要为大家介绍了实现jquery手风琴效果的详细代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • window.open打开窗口被拦截的快速解决方法

    window.open打开窗口被拦截的快速解决方法

    下面小编就为大家带来一篇window.open打开窗口被拦截的快速解决方法。觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 关于layui的按钮禁用与恢复方式

    关于layui的按钮禁用与恢复方式

    这篇文章主要介绍了关于layui的按钮禁用与恢复方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 浅谈Javascript中substr和substring的区别

    浅谈Javascript中substr和substring的区别

    这篇文章主要介绍了Javascript中substr和substring的区别,非常的简单明了,有需要的小伙伴可以来仔细看看。
    2015-09-09

最新评论