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


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 相关文章推荐
jQuery实用函数用法总结
Aug 29 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python保存数据到本地文件的方法
2018/06/23 Python
Django实现学员管理系统
2019/02/26 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
机械专业个人求职自荐信格式
2013/09/21 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python