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


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去掉字符串里的所有空格
Feb 08 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
常用jQuery代码分享
Jul 14 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
javascript运行机制之执行顺序理解
Aug 03 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实现短域名互转
2013/07/05 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
手写一个python迭代器过程详解
2019/08/27 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3简单实现照片墙
2014/12/12 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
实习教师自我鉴定
2013/12/12 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
董事长秘书工作职责
2014/06/10 职场文书
美术教师求职信范文
2015/03/20 职场文书
2016公司年会主持词
2015/07/01 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
python实现双链表
2022/05/25 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android