基于jquery的单行滚动，支持一个页面多个单行滚动

最新推荐文章于 2021-03-13 07:27:55 发布
最新推荐文章于 2021-03-13 07:27:55 发布
阅读量125 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmnmtm/article/details/82923733
版权

 

效果如图：

基于jquery的单行滚动，支持一个页面多个单行滚动 - 加菲 - 加菲猫

 

源代码如下，同时在同一个文件夹下放一个js文件（jquery-1.3.2.js）：

 

 
 
 
 
 
<!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=gb2312" />
<title>一页多个滚动区</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style type="text/css">
<!--
 body{ 
  background-color:#0D6B2D;margin-top:20px; 
  color:#000; 
  font:12px/22px "宋体";
  line-height:18px;
  text-align:left;  
 
 

 }
 
 
 
 
 
 .div1,.div2{
  float:left;margin:20px;width:200px;height:18px;line-height:18px;overflow:hidden;
  background-color:#FFFF00;
 }
 
 

 #RunTopic1,#RunTopic2{
  clear:both;width:200px;height:18px;line-height:18px;overflow:hidden;
  background-color:#FFFF00;
 }
 
 /* 超链接  */
 A:link {
  COLOR: #005534; TEXT-DECORATION: none
 }
 A:visited {
  COLOR: #005534; TEXT-DECORATION: none
 }
 A:hover {
  COLOR: #FF0000; TEXT-DECORATION: none
 }
 A:active {
  COLOR: #bc2931
 }
 
 
-->
 
 

</style>
 
 
</head>
 
 
<body> 
 
 
<div >http://wmnmtm.blog.163.com</div>
 
 
<div class="div1">
 <ul id="RunTopic1"> 
  <li>文字1</li> 
  <li>文字2</li> 
  <li>文字3</li> 
  <li>文字4</li> 
  <li>文字5</li> 
 </ul> 
</div>
 
 
<div class="div2">
 <ul id="RunTopic2"> 
  <li>文字1</li> 
  <li>文字2</li> 
  <li>文字3</li> 
  <li>文字4</li> 
  <li>文字5</li> 
 </ul> 
</div>
 
 
</body> 
 
 
<script type="text/javascript"> 
 $(document.body).ready(function(){ 
  $("#RunTopic1").RollTitle({line:1,speed:200,timespan:1500}); 
  $("#RunTopic2").RollTitle({line:1,speed:200,timespan:1500}); 
 }); 
</script> 
 
 
</html> 
 
 
<!--
 调用方法： 
 line:一次卷动的文本行数 
 speed:卷动动画的时间 
 timespan:间隔时间 
-->
 
 
<script>
 
 

(function($){ 
$.fn.extend({ 
RollTitle: function(opt,callback){ 
if(!opt) var opt={}; 
var _this = this; 
_this.timer = null; 
_this.lineH = _this.find("li:first").height(); 
_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10); 
_this.speed=opt.speed?parseInt(opt.speed,10):3000, //卷动速度，数值越大，速度越慢（毫秒 
_this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; //滚动的时间间隔（毫秒 
if(_this.line==0) this.line=1; 
_this.upHeight=0-_this.line*_this.lineH; 
_this.scrollUp=function(){ 
_this.animate({ 
marginTop:_this.upHeight 
},_this.speed,function(){ 
for(i=1;i<=_this.line;i++){ 
_this.find("li:first").appendTo(_this); 
} 
_this.css({marginTop:0}); 
}); 
} 
_this.hover(function(){ 
clearInterval(_this.timer); 
},function(){ 
_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan); 
}).mouseout(); 
} 
}) 
})(jQuery); 
 
 
</script>
 
 

 
 
以上代码本人做过些改动，经测试完全可用，效果很好，也不存在滚动着出现错位的现象。
 
 

 
 


                

        

        

    

  


    

      

        

            

              
                
                  wmnmtm
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
jquery实现在一个页面2个独立的滚动新闻框

				
			

			

				

					04-21
				

			

		

		

			
				
用jquery实现在一个页面上有2个独立的滚动框，当鼠标停留在其中一个滚动框时该框不动，另外一个框仍然在动。其中用到了js的计时器。

			
		

	



                

              
                



	

		

			

				
					
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

				
			

			

				

					10-29
				

			

		

		

			
				
Jquery.RollTitle 是一个基于jQuery库的插件，专门用于实现这种效果，并且支持在一个页面上创建多个独立的滚动区域。  **插件功能与特性**  1. **多行滚动**：Jquery.RollTitle 插件不仅支持单行文字的滚动，还能够...

			
		

	



                


  
              

                


	

		

			

				
					
jquery的单行循环滚动示例

				
			

			

				

					duckyning
				

				

					11-01
					
					235
					
				

			

		

		

			
				
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="serv.

			
		

	





	

		

			

				
					
jquery单行文字向上滚动效果

				
			

			

				

					vip_linux的专栏
				

				

					03-07
					
					1939
					
				

			

		

		

			
				
jquery单行文字向上滚动效果示例


jquery实现的单行文字向上滚动效果,。
代码：
 
看看间断滚动文字 
 
 
 
央视315曝光: 华润深陷“海砂门”回应澄而未清 
吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒 
无锡警方公布“待产女警突发不幸”事发经过 
中国人一天：最后的轮渡 视界：在家“搞定” 
 
 
 
 
脚本学堂 http://www.jbxue.com提供

			
		

	



		

			
		



	

		

			

				
					
JQuery 单行多条信息滚动代码

				
			

			

				

					sungang1120的专栏
				

				

					03-20
					
					258
					
				

			

		

		

			
				

	function T(n){
		document.getElementById("ArticleCnt").style.fontSize=n+"px";
	}
	function srcMarquee(){
		this.ID = document.getElementById(arguments[0]);

		if(!this.ID){
			this.ID = -1;
...

			
		

	





	

		

			

				
					
jQuery单行文字滚动

				
			

			

				

					M_SSY的博客
				

				

					12-06
					
					682
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;title&gt;Document&lt;/title&gt;
	&lt;style type="text/css"&gt;
		 .swiper_wr

			
		

	





	

		

			

				
					
jquery单行文字向上滚动效果的实现代码

				
			

			

				

					10-25
				

			

		

		

			
				
标题中的“jquery单行文字向上滚动效果的实现代码”指的是使用jQuery库来创建一个效果，使得文本在一行内持续向上滚动。这种效果常用于新闻滚动、公告栏等场景，能够吸引用户注意并节省空间。  首先，我们需要理解...

			
		

	





	

		

			

				
					
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

				
			

			

				

					10-29
				

			

		

		

			
				
`setInterval`函数设置了一个定时器，每1秒执行一次`AutoScroll`函数。  ### 2. 多行滚动效果  对于多行滚动，我们可以使用自定义的jQuery插件实现，以下代码演示了如何进行多行批量滚动：  ```html <!DOCTYPE html>...

			
		

	





	

		

			

				
					
jquery单行文字循环滚动特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
标题 "jquery单行文字循环滚动特效代码" 涉及的是使用jQuery库来实现一种文本动画效果，使得单行文字能够在页面上持续滚动展示。这种效果常见于新闻标题或者滚动公告等场景，能够吸引用户的注意力并高效利用有限的...

			
		

	





	

		

			

				
					
jQuery单行文字上下不间断循环滚动效果，适合做新闻滚动推荐

				
			

			

				

					05-24
				

			

		

		

			
				
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例，它主要用于创建一串文字在单一行内循环滚动，通常用于网站的头部或侧边栏，以动态展示最新的新闻标题或公告。  要实现这个效果，首先...

			
		

	





	

		

			

				
					
JQuery实现文字无缝滚动效果(Marquee插件)

				
			

			

				

					feifei20081014的专栏
				

				

					08-15
					
					2035
					
				

			

		

		

			
				
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。

此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。

官方演示，如下： 
Demo

使用方法如下：

1、加载javascript。
 type="text/javascript" src="js/jquery.js">   type="text/jav

			
		

	





	

		

			

				
					
Jquery使两个Div的滚动条同步滚动

				
			

			

				

					weixin_33860553的博客
				

				

					03-03
					
					1504
					
				

			

		

		

			
				
$("#div").scroll(function(){
        $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条
        $("#div1").scrollLeft($(this).scrollLeft()); // 横向滚动条
    });
    $("#div1").scroll(function(...

			
		

	





	

		

			

				
					
文字如果超出了自动 向左 横向 滚动

				
			

			

				

					weixin_30564901的博客
				

				

					07-01
					
					1692
					
				

			

		

		

			
				
在线演示

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0...

			
		

	





	

		

			

				
					
基于jQuery的上下无缝滚动应用(单行或多行)

				
			

			

				

					暗淡亮点的博客
				

				

					10-28
					
					466
					
				

			

		

		

			
				
基于jQuery的上下无缝滚动应用(单行或多行)@Mr.Thinkhttp://mrthink.net/demo/css/base.css" />http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />http://mrthink.net/xmlrpc.php" />http://mrthink.net/feed/" />http://a

			
		

	





	

		

			

				
					
php跑马灯,基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

				
			

			

				

					weixin_28893705的博客
				

				

					03-13
					
					291
					
				

			

		

		

			
				
兼容各浏览器的文本行高(function($){$.fn.extend({RollTitle: function(opt,callback){if(!opt) var opt={};var _this = this;_this.timer = null;_this.lineH = _this.find("li:first").height();_this.line=opt.line?parseIn...

			
		

	





	

		

			

				
					
vue+Element实现文字列表轮番滚动效果

				
			

			

				

					资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
				

				

					05-22
					
					4357
					
				

			

		

		

			
				
<template> <div style="position: relative;">
    <p class="spans"><img src="../../assets/img/block-title-icon.png" alt=""><span class="tit">预警信息</span></p>
    <div v-if="!chuxians" ref="message" class="message.

			
		

	





	

		

			

				
					
各种函数声明和定义模块

					
最新发布

				
			

			

				

					09-16
				

			

		

		

			
				
各种函数声明和定义模块

			
		

	





	

		

			

				
					
湖北工业大学在河南2021-2024各专业最低录取分数及位次表.pdf

				
			

			

				

					09-16
				

			

		

		

			
				
全国各大学在河北2021-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据

			
		

	





	

		

			

				
					
JQuery实现：页面滚动时保持浮动的窗口控件

				
			

			

				

					
				

			

		

		

			
				
在本教程中，我们将探讨如何利用JQuery来创建一个浮动窗口控件，这一控件会在用户滚动页面时保持在屏幕上的可见位置。  1. 浮动窗口控件的基本概念  浮动窗口控件是指一种网页设计元素，当用户滚动页面时，该元素会...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值