jquery单行文字向上滚动效果示例


Posted in Javascript onMarch 06, 2014
<body> 
<div id="title" style="width:100%;height:40px;">看看间断滚动文字</div> <div id="content" class="infocontent"> 
<div id="top" class="infolist"> 
<ul> 
<li>央视315曝光: 华润深陷“海砂门”回应澄而未清</li> 
<li>吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒</li> 
<li>无锡警方公布“待产女警突发不幸”事发经过</li> 
<li>中国人一天:最后的轮渡 视界:在家“搞定”</li> 
</ul> 
</div> 
<div id="bottom" class="infolist"></div> 
</div> 
<div id="foot"></div> 
</body>

.infolist{width:400px;matgin:0;} 
.infolist ul{margin:0;padding:0;} 
.infolist ul li{list-style:none;height:26px;line-height:26px;} 
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

var interval=1000;//两次滚动之间的时间间隔 
var stepsize=26;//滚动一次的长度,必须是行高的倍数,这样滚动的时候才不会断行 
var objInterval=null; $(document).ready( function(){ 
//用上部的内容填充下部 
$("#bottom").html($("#top").html()); 
//给显示的区域绑定鼠标事件 
$("#content").bind("mouseover",function(){StopScroll();}); 
$("#content").bind("mouseout",function(){StartScroll();}); 
//启动定时器 
StartScroll(); 
}); 
//启动定时器,开始滚动 
function StartScroll(){ 
objInterval=setInterval("verticalloop()",interval); 
} 
//清除定时器,停止滚动 
function StopScroll(){ 
window.clearInterval(objInterval); 
} 
//控制滚动 
function verticalloop(){ 
//判断是否上部内容全部移出显示区域 
//如果是,从新开始;否则,继续向上移动 
if($("#content").scrollTop()>=$("#top").outerHeight()){ 
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight()); 
} 
//使用jquery创建滚动时的动画效果 
$("#content").animate( 
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){ 
//这里用于显示滚动区域的scrollTop,实际应用中请删除 
// $("#foot").html("scrollTop:"+$("#content").scrollTop()); 
}); 
}
Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 #Javascript
在Firefox下js select标签点击无法弹出
Mar 06 #Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 #Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 #Javascript
Jquery easyUI 更新行示例
Mar 06 #Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 #Javascript
button没写type=button会导致点击时提交
Mar 06 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP中phar包的使用教程
2017/06/14 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
详解js的六大数据类型
2016/12/27 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python3.4实现邮件发送功能
2018/05/28 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
python调用百度API实现人脸识别
2020/11/17 Python
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
初中校园之声广播稿
2014/01/15 职场文书
淘宝活动总结范文
2014/06/26 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL