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


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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JS修改css样式style浅谈
May 06 Javascript
JS字符串截取函数实例
Dec 27 Javascript
js导出txt示例代码
Jan 14 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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的header和asp中的redirect比较
2006/10/09 PHP
php中使用url传递数组的方法
2015/02/11 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python删除服务器文件代码示例
2018/02/09 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python文件读写代码实例
2019/10/21 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
劳资专员岗位职责
2013/12/27 职场文书
档案接收函范文
2014/01/10 职场文书
贷款承诺书范文
2014/05/19 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Nginx跨域问题解析与解决
2022/08/05 Servers