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 相关文章推荐
JavaScript的eval JSON object问题
Nov 15 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php-app开发接口加密详解
2018/04/18 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python__name__原理及用法详解
2019/11/02 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python中可以声明变量类型吗
2020/06/18 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
简述安装Slackware Linux系统的过程
2012/01/12 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
校领导推荐信
2013/11/01 职场文书
《草原》教学反思
2014/02/15 职场文书
行政助理工作职责范本
2014/03/04 职场文书
人才市场接收函
2015/01/30 职场文书
商场营业员岗位职责
2015/04/14 职场文书
演讲开场白台词大全
2015/05/29 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript