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


Posted in Javascript onOctober 28, 2011

源码:

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');
Javascript 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 #Javascript
js常用代码段收集
Oct 28 #Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 #Javascript
理解JSON:3分钟课程
Oct 28 #Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 #Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 #Javascript
You might like
使用PHP编写的SVN类
2013/07/18 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python十进制转二进制的详解
2020/02/07 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
初任培训自我鉴定
2013/10/07 职场文书
作风建设年活动总结
2014/08/27 职场文书
opencv检测动态物体的实现
2021/07/21 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android