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


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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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 禁止页面缓存输出
2009/01/07 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
Django model update的多种用法介绍
2020/03/28 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python如何对XML 解析
2020/06/28 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
《赠汪伦》教学反思
2014/04/12 职场文书
统计员岗位职责
2015/02/11 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL