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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
javascript vvorld 在线加密破解方法
Nov 13 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
详解vue中axios的封装
Jul 18 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue实现购物车列表
Jun 30 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JavaScript获取某一天所在的星期
2019/09/05 Javascript
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python实现类之间的方法互相调用
2018/04/29 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python socket 聊天室实例代码详解
2019/11/14 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
大数据分析用java还是Python
2020/07/06 Python
Python requests上传文件实现步骤
2020/09/15 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
中学生个人自我评价
2014/02/06 职场文书
报到证办理个人委托书
2014/10/06 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014年派出所工作总结
2014/11/21 职场文书