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


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 indexOf函数使用说明
Jul 03 Javascript
jquery radio 操作代码
Mar 16 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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使用MySQL保存session会话的方法
2015/06/18 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
openLayer4实现动态改变标注图标
2020/08/17 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python内置函数dir详解
2015/04/14 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
python实现微信远程控制电脑
2018/02/22 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
《理想》教学反思
2014/02/17 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
企业委托书范本
2014/09/13 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
借钱欠条怎么写
2015/07/03 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书