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


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中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
JsRender for object语法简介
2014/10/31 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
javascript每日必学之封装
2016/02/23 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
js实现微信聊天界面
2020/08/09 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
python中文乱码的解决方法
2013/11/04 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
十八届三中全会个人学习材料
2014/02/13 职场文书
专题组织生活会方案
2014/06/15 职场文书
答辩状格式范本
2015/05/22 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python