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


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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
给Function做的OOP扩展
May 07 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
js实现汉字排序的方法
Jul 23 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
详解vue表单——小白速看
Apr 08 Javascript
vue如何判断dom的class
Apr 26 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP的FTP学习(三)
2006/10/09 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
《javascript少儿编程》location术语总结
2018/05/27 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
如何定义一个可复用的服务
2014/09/30 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
策划创业计划书
2014/02/06 职场文书
合作经营协议书
2014/04/17 职场文书
参赛口号
2014/06/16 职场文书
结婚老公保证书
2015/02/26 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书