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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
JavaScript修改css样式style
Apr 15 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
js有关元素内容操作小结
2011/12/20 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
python time模块用法实例详解
2014/09/11 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python 读入多行数据的实例
2018/04/19 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
NumPy中的维度Axis详解
2019/11/26 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python super()函数的基本使用
2020/09/10 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
同学会感言
2015/07/30 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python