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


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 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js给selected添加options的方法
May 06 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
javascript时间差插件分享
Jul 18 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
详解React 元素渲染
Jul 07 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
javascript代码实现简易计算器
Jan 25 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中定义网站根目录的常用方法
2010/08/08 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
学习python的几条建议分享
2013/02/10 Python
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python模块相关知识点小结
2020/03/09 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
教师产假请假条范文
2014/04/10 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
个人合作协议范本
2015/08/06 职场文书
python编写函数注意事项总结
2021/03/29 Python