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 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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程序时遇到的三个问题
2012/01/17 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Python中的ceil()方法使用教程
2015/05/14 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
python实现实时监控文件的方法
2016/08/26 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python 字典套字典或列表的示例
2019/12/16 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
struct与class的区别
2014/02/03 面试题
工艺工程师岗位职责
2014/03/04 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
城南旧事观后感
2015/06/11 职场文书