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


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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
js数组操作学习总结
Nov 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 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
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
javascript 播放器 控制
2007/01/22 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python正则实现计算器功能
2017/12/14 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Django models.py应用实现过程详解
2019/07/29 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
综合实践教学反思
2014/01/31 职场文书
新年寄语大全
2014/04/12 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
普通话宣传标语
2014/06/26 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
乐山大佛导游词
2015/02/02 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript