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


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插件Style定制化方法的分析与比较
May 03 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
JavaScript实现网页跨年倒计时
Dec 02 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两种去掉数组重复值的方法比较
2014/06/19 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
从0开始学Vue
2016/10/27 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python如何读写csv数据
2018/03/21 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
JNI的定义
2012/11/25 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
《开国大典》教学反思
2014/04/19 职场文书
学习保证书范文
2014/04/30 职场文书
小学运动会加油稿
2015/07/22 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android