js实现文本上下来回滚动


Posted in Javascript onFebruary 03, 2017

话不多说,请看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行滚动jQuery循环新闻列表代码</title>
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//滚动插件
(function($){
$.fn.extend({
 Scroll:function(opt,callback){
  //参数初始化
  if(!opt) var opt={};
  var _this=this.eq(0).find("ul:first");
  var lineH=_this.find("li:first").height(), //获取行高
   line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数,默认为一屏,即父容器高度
   speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度,数值越大,速度越慢(毫秒)
   timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
  if(line==0) line=1;
  var upHeight=0-line*lineH;
  //滚动函数
  scrollUp=function(){
   _this.animate({
    marginTop:upHeight
   },speed,function(){
    for(i=1;i<=line;i++){
     _this.find("li:first").appendTo(_this);
    }
    _this.css({marginTop:0});
   });
  }
  //鼠标事件绑定
  _this.hover(function(){
   clearInterval(timerID);
  },function(){
   timerID=setInterval("scrollUp()",timer);
  }).mouseout();
 } 
})
})(jQuery);
$(document).ready(function(){
 $("#scrollDiv").Scroll({line:1,speed:500,timer:1000});//可修改line值,speed值,timer值
});
</script>
</head>
<body>
<p>多行滚动演示:</p>
<div id="scrollDiv">
 <ul>
 <li>这是公告标题的第一行</li>
 <li>这是公告标题的第二行</li>
 <li>这是公告标题的第三行</li>
 <li>这是公告标题的第四行</li>
 <li>这是公告标题的第五行</li>
 <li>这是公告标题的第六行</li>
 <li>这是公告标题的第七行</li>
 <li>这是公告标题的第八行</li>
 </ul>
</div>
</body>
</html>
***请再次刷新查看效果,或保存到本地浏览***

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
jquery代码规范让代码越来越好看
Feb 03 #Javascript
Javascript for in的缺陷总结
Feb 03 #Javascript
canvas绘制七巧板
Feb 03 #Javascript
JS对象是否拥有某属性如何判断
Feb 03 #Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 #Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 #Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 #Javascript
You might like
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
CI框架常用函数封装实例
2016/11/21 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
python编程开发之日期操作实例分析
2015/11/13 Python
深入理解Python变量与常量
2016/06/02 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
python logging模块的使用总结
2019/07/09 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python实现扫雷小游戏
2020/04/24 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
暑假实习求职信范文
2013/09/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
代办出身证明书
2014/10/21 职场文书
神农溪导游词
2015/02/11 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript