常用的文字、图片的无缝滚动

js图片文字向左无缝滚动效果代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <tit 阅读详情

1.文字的无缝向上滚动


<!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>文字列表无缝向上滚动JavaScript代码</title>
<style>
*{margin:0px;padding:0px;border:0px;}
body{font-size:12px}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
#demo2  li{
list-style-type:none;
height:22px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<div id="demo" style="overflow:hidden;height:80px;width:280px;">
<ul id="demo1">  
<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
<li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li>
<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li>
<li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li>
<li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li>
<li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li>
<li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>
</ul> 
<div id="demo2"></div>
</div> 
<script> 
var speed=40 
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1"); 
demo2.innerHTML=demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
  demo.scrollTop-=demo1.offsetHeight 
else{ 
  demo.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
</script> 
</body>
</html>

 

2.图片各种无缝滚动




2.1 经典图片滚动

<!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>
<style type="text/css">
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:52px;width:20px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:530px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:132px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
-->
</style>
</head>
<body>
<div class="rollBox">
     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1">
       
        <!-- 图片列表 begin -->
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">风景美如画</a></p>
         </div>       
        
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
          <p><a href="#" target="_blank">千里之行</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">学习源码站</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">每一款都测试</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
          <p><a href="#" target="_blank">你难道不喜欢</a></p>
         </div>
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">你太令我失望了</a></p>
         </div>      
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">今天早点睡</a></p>
         </div>
        <!-- 图片列表 end -->
        
       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    </div>
   </div>

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 528; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
 clearInterval(AutoPlayObj);
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
 GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
 clearInterval(MoveTimeObj);
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 ISL_ScrDown();
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
 GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
 var num;
 if(Comp == 0){MoveLock = false;return;}
 if(Comp < 0){ //上翻
  if(Comp < -Space){
   Comp += Space;
   num = Space;
  }else{
   num = -Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft -= num;
  setTimeout('CompScr()',Speed);
 }else{ //下翻
  if(Comp > Space){
   Comp -= Space;
   num = Space;
  }else{
   num = Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft += num;
  setTimeout('CompScr()',Speed);
 }
}
//--><!]]>
</script>
</body>
</html>


2.2  各种图片滚动

<!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>Marquee 替代 -- 无间滚动</title>
<style type="text/css">
<!--
* {padding: 0; margin: 0}
body {margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {padding: 5px; line-height: 20px}
p {margin: 1em 0}
ul {}
li {height: 1%; overflow: hidden; list-style-type: none}
a {color: #666666; text-decoration: none}
a:hover {color: #333333}
.r {float: right}
.l {float: left}
.b {font-weight: bold}
.gray {color: #666666; margin-top: 8px}
.light {color:#FF6600; margin: 0 5px}
.case {display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px

#EAEAEA}
.call {display:block;}
.key {display: block; width: 8em; float: left}
.type {display: block; width: 6em; float: left}
.info {padding-left: 2em}
.demo {margin-bottom: 2em}
-->
</style>
<style type="text/css">
<!--
.MyMarqueeX {width: 98%; height: 150px; overflow: hidden; margin: 0 auto 0 auto}
 .MyMarqueeX img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
.MyMarqueeY {width: 205px; height: 420px; overflow: hidden;}
 .MyMarqueeY img {width: 185px; height: 125px; border: 2px solid #e6e6e6; padding: 1px; margin: 5px}
-->
</style>
<script language="javascript" type="text/javascript">
//<!--
// 附带函数
var
// 用ID获取元素
$ = function(element) {
 return typeof(element) == 'object' ? element : document.getElementById(element);
},
// 生成随机数
RandStr = function(n, u){
 var tmStr = "abcdefghijklmnopqrstuvwxyz0123456789";
 var Len = tmStr.length;
 var Str = "";
 for(i=1;i<n+1;i++){
  Str += tmStr.charAt(Math.random()*Len);
 }
 return (u ? Str.toUpperCase() : Str);
};
//-->
</script>
<script language="javascript" type="text/javascript">
//<!--
/*******************************************
 - Marquee 替代 -- 无间滚动
 - By Mudoo 2008.8
 - http://hi.baidu.com/mt20
********************************************
 new Marquee({
  obj   : 'myMarquee',  // 滚动对象(必须)
  name  : 'MyMQ_1',   // 实例名(可选,不指定则随机)
  mode  : 'x',    // 滚动模式(可选,x=水平, y=垂直,默认x)
  speed  : 10,    // 滚动速度(可选,越小速度越快,默认10)
  autoStart  : true,    // 自动开始(可选,默认True)
  movePause : true    // 鼠标经过是否暂停(可选,默认True)
 });
********************************************/
var MyMarquees = new Array();
// 获取检测实例名
function getMyMQName(mName) {
 var name = mName==undefined ? RandStr(5) : mName;
 var myNames = ','+ MyMarquees.join(',') +',';
 
 while(myNames.indexOf(','+ name +',')!=-1) {
  name = RandStr(5);
 }
 return name;
}
function Marquee(inits) {
 var _o = this;
 var _i = inits;
 
 if(_i.obj==undefined) return;
 _o.mode    = _i.mode==undefined ? 'x' : _i.mode;   // 滚动模式(x:横向, y:纵向)
 _o.mName = getMyMQName(_i.name);       // 实例名
 _o.mObj  = $(_i.obj);         // 滚动对象
 _o.speed = _i.speed==undefined ? 10 : _i.speed;   // 滚动速度
 _o.autoStart= _i.autoStart==undefined ? true : _i.autoStart;// 自动开始
 _o.movePause= _i.movePause==undefined ? true : _i.movePause;// 鼠标经过是否暂停
 
 _o.mDo  = null;           // 计时器
 _o.pause = false;          // 暂停状态
 
 // 无间滚动初始化
 _o.init = function() {
  if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth && _o.mode=='x') || (_o.mObj.scrollHeight<=_o.mObj.offsetHeight && _o.mode=='y')) return;
  
  MyMarquees.push(_o.mName);
  
  // 克隆滚动内容
  _o.mObj.innerHTML = _o.mode=='x' ? (
   '<table width="100%" border="0" align="left" cellpadding="0" cellspace="0">'+
   ' <tr>'+
   '  <td id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</td>'+
   '  <td id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</td>'+
   ' </tr>'+
   '</table>'
  ) : (
   '<div id="MYMQ_'+ _o.mName +'_1">'+ _o.mObj.innerHTML +'</div>'+
   '<div id="MYMQ_'+ _o.mName +'_2">'+ _o.mObj.innerHTML +'</div>'
  );
  
  // 获取对象、高宽
  _o.mObj1 = $('MYMQ_'+ _o.mName +'_1');
  _o.mObj2 = $('MYMQ_'+ _o.mName +'_2');
  _o.mo1Width = _o.mObj1.scrollWidth;
  _o.mo1Height = _o.mObj1.scrollHeight;
  
  // 初始滚动
  if(_o.autoStart) _o.start();
 };
  
 // 开始滚动
 _o.start = function() {
  _o.mDo = setInterval((_o.mode=='x' ? _o.moveX : _o.moveY), _o.speed);
  if(_o.movePause) {
   _o.mObj.onmouseover = function() {_o.pause = true;} 
   _o.mObj.onmouseout = function() {_o.pause = false;}
  }
 }
 
 // 停止滚动
 _o.stop = function() {
  clearInterval(_o.mDo)
  _o.mObj.onmouseover = function() {} 
  _o.mObj.onmouseout = function() {}
 }
 
 // 水平滚动
 _o.moveX = function() {
  if(_o.pause) return;
  var left = _o.mObj.scrollLeft;
  if(left==_o.mo1Width){ 
   _o.mObj.scrollLeft = 0 ;
  }else if(left>_o.mo1Width) {
   _o.mObj.scrollLeft = left-_o.mo1Width;
  }else{ 
   _o.mObj.scrollLeft++;
  }
 };
 
 // 垂直滚动
 _o.moveY = function() {
  if(_o.pause) return;
  var top = _o.mObj.scrollTop;
  if(top==_o.mo1Height){ 
   _o.mObj.scrollTop = 0 ;
  }else if(top>_o.mo1Height) {
   _o.mObj.scrollTop = top-_o.mo1Height;
  }else{ 
   _o.mObj.scrollTop++;
  }
 };
 
 _o.init();
}
//-->
</script>
</head>
<body>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a>Marquee 调用方法</div>
 <div class="b">new Marquee({obj, name, mode, speed, autoStart, movePause});</div>
 <ul class="info gray">
  <li><span class="key">obj:</span><span class="type">Object</span>滚动对象  (*必须)</li>
  <li><span class="key">name:</span><span class="type">String</span>实例名  (*可选,默认随机)</li>
  <li><span class="key">mode:</span><span class="type">String</span>滚动模式(x=水平, y=垂直)  (*可选,默认为x)</li>
  <li><span class="key">speed:</span><span class="type">Number</span>滚动速度,越小速度越快  (*可选,默认10)</li>
  <li><span class="key">autoStart:</span><span class="type">Boolean</span>自动开始  (*可选,默认True)</li>
  <li><span class="key">movePause:</span><span class="type">Boolean</span>鼠标经过是否暂停  (*可选,默认True)</li>
 </ul>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式</div>
 <div id="MyMarqueeX" class="MyMarqueeX">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /></td>
   </tr>
  </table>
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式</div>
 <div id="MyMarqueeY" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 横向模式(内容不够宽)</div>
 <div id="MyMarqueeX2" class="MyMarqueeX">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
    <td><img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
    <td><img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /></td>
   </tr>
  </table>
 </div>
</div>
<div class="case">
 <div class="title"><a href="#" class="r">Top</a><a name="1" ></a>Marquee 演示 - 纵向模式(内容不够长)</div>
 <div id="MyMarqueeY2" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
</div>
<div id="MyMarqueeY" class="MyMarqueeY">
  <img src="/Pri_upfile/jspic/gd31.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd32.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd33.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd34.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd35.jpg" alt="深圳网站建设www.gdwd.net" /><br />
  <img src="/Pri_upfile/jspic/gd36.jpg" alt="深圳网站建设www.gdwd.net" /><br />
 </div>
<script language="javascript" type="text/javascript">
//<!--
/*********************************************
  - Marquee 演示
*********************************************/
new Marquee({
 obj : 'MyMarqueeX',
 movePause : true
});
new Marquee({
 obj : 'MyMarqueeY',
 mode : 'y'
});
new Marquee({
 obj : 'MyMarqueeX2',
 movePause : true
});
new Marquee({
 obj : 'MyMarqueeY2',
 mode : 'y'
});
//-->
</script>
</body>
</html>

实现网页中的无缝图片及文字滚动展示代码 本文还有配套的精品资源,点击获取 简介:文章介绍了如何通过HTML、CSS和JavaScript实现图片和说明文字的无缝滚动效果。这一动态效果可以增强网页的交互体验,适用于新闻更新和产品展示。文章详细说明了创建HTML结构、设置CSS样式以及利用JavaScript动画实现自左向右滚动的整个过程。最终,读者将学会如何实现一个吸引人的图片滚动展示,并可根据需要调整样式和动画效... 阅读详情

相关推荐

实现JS无缝滚动的双层图片+文字技术探究

无缝滚动是一种常见的网页动态效果,通过连续不断地滚动内容,给用户带来动态和连续的视觉体验。它经常被应用于新闻滚动、商品展示和数据展示等多种场景。基本原理是通过JavaScript动态调整DOM元素的位置,使其在水平或垂直方向上循环滚动,而不会出现明显的断点。无缝滚动的基本步骤包括初始化滚动容器、创建滚动内容、通过JavaScript动态改变元素位置,并通过定时器或动画帧控制更新频率。下面章节会详细介绍JavaScript代码实现、双层滚动机制、缓动动画优化、自动滚动实现以及性能优化等关键步骤。

weixin_30820933的博客 1174

swiper实现局部内容滚动效果

先看一下效果图:在蓝色的背景里面文字可以上下滚动,这个就是我们需要的效果。具体代码如下:<!DOCTYPE html> <!-- saved from url=(0054)http://www.swiper.com.cn/demo/32-scroll-container.html --> <html lang="en"><head><meta http-equiv="Content-Type" co

马优晨 2万+

文字列表无缝向上滚动

文字列表无缝向上滚动,只要设定总体高度,多少行都能让文字滚动。

uni-app swiper实现公告栏上下循环滚动(整理)

uni-app swiper实现公告栏上下循环滚动

在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖 5582

js文字向上滚动轮播

支持文字向上滚动轮播,采用jquery动画,可以添加点击事件,并且可以轮播点击,如果有需要可以for循环去生成,文字循环向上滚动,实现文字轮播。

无缝向上滚动(图片文字效果)

网页上出现的图片或文字向上滚动显示效果,很不错值得推荐。

使用swiper实现无限滚动

(使用 vue3-seamless-scroll 插件也是可以实现的,详细见。

weixin_55932347的博客 2625

NE564锁相环FM解调电路设计:10.7MHz中频实测与3种失真优化方案

本文详细解析了NE564锁相环在10.7MHz中频FM解调电路中的设计与优化方案。通过分析锁相环技术基础、电路架构设计及典型失真问题,提供了3种有效的失真优化方法,包括限幅增强、VCO频偏补偿和环路滤波优化,显著提升解调性能。文章还涵盖了PCB布局要点和系统测试验证,为高频电子线路设计提供实用参考。

weixin_33314040的博客 350

swiper自动无缝轮播(无限滚动)

swiper匀速无缝轮播(基于swiper的无缝滚动)

qq_42400124的博客 7961

离线安装 nvidia-docker2(nvidia-container-toolkit)

很多时候大家都有用docker使用gpu的需求,但是因为网络等原因不是那么好用,这里留了一个给ubuntu的安装包,网络好的话也提供了在线安装方式。

father_yingying的博客 1181

Ubuntu 22.04下Realtek R8125网卡驱动安装避坑指南(附DKMS自动编译配置)

本文详细介绍了在Ubuntu 22.04系统上为Realtek R8125 2.5GbE网卡安装驱动的完整流程与避坑指南。针对内核通用驱动r8169的冲突问题,重点讲解了如何通过DKMS(Dynamic Kernel Module Support)实现驱动的持久化自动编译与安装,确保系统内核升级后网卡驱动依然有效。内容包括环境准备、驱动源码获取、DKMS标准配置、驱动冲突解决(设置黑名单)以及日常维护与故障排查方法,旨在为用户提供一个一劳永逸的稳定解决方案。

echo99的专栏 1023

vue Swiper 竖向轮播 纵向轮播

当 v-if 的条件为 false时,元素会从 DOM 中完全移除;v-if 的条件为 true 时,元素才会被添加到 DOM 中。当 v-show 的条件为 false 时,元素依然存在于 DOM 中,只是被设置为 display: none。通过 CSS 的 display 属性来控制。

m0_59985666的博客 1620

26、电子测量与旋转编码器控制技术解析

本文深入解析了电子测量中的电感测量技术与旋转编码器的控制方法。介绍了LC电路振荡原理、滤波器类型及其应用,并通过代码实现了基于脉冲宽度的电感值计算。对比了陶瓷电容与电解电容在高频测量中的性能差异。在旋转编码器部分,详细阐述了其工作原理,提出了抖动问题和检测遗漏的解决方案,包括中断检测法和基于4位状态映射的高精度控制方法。文章还探讨了相关技术在电力系统、通信设备、工业自动化和智能家居中的应用,并展望了高精度、智能化、小型化和无线化的发展趋势,为电子系统设计提供了实用指导和技术参考。

elastic6hunter的博客 97

dw自动滚动图片_Dreamweaver实现滚动图片文字

06Dreamweaver8是美国Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器,具有强大的编辑功能,能够方便地实现对网页创作的灵感,使设计者不必编写大量的HTML代码就能够实现特效。平常在网页上看到的公告板的滚动文字、最新的焦点新闻图片滚动、产品的宣传等都可以利用Dreamweaver8轻松实现,旨在对以上技巧进行说明。1留白滚动字幕和图片在网页中出现一些滚动字...

weixin_39769984的博客 2202

Neo4j LLM知识图谱构建器使用教程

是一个开源应用程序,旨在将非结构化数据(如PDF、文档、文本、YouTube视频、网页等)转换为存储在Neo4j中的知识图谱。该项目利用大型语言模型(如OpenAI、Gemini等)从文本中提取节点、关系及其属性,并通过Langchain框架创建结构化的知识图谱。

u013250861的博客 541

机械式激光雷达实现原理以及特性总结

本文介绍了机械式激光雷达的技术原理和核心特性。该技术通过机械旋转结构实现360°三维扫描,采用飞行时间法测距并生成点云数据。核心优势包括全向扫描、长距高精度和成熟度高,但存在体积大、成本高、可靠性受限等局限。典型应用于自动驾驶测试车、测绘建模等领域。与固态激光雷达相比,机械式在视场角和探测距离方面有优势,但在体积、成本和可靠性方面处于劣势。该技术目前主要应用于对成本不敏感的专业场景。

start_up_go的博客 262

html无缝滚动原理,JavaScript实现图片无缝滚动效果

图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的原理。原理以向上无缝滚动为例,其余几个方向的无缝滚动原理是一样的,点击向上无缝滚动。设定一个可视区域,超过可视区域的部分隐藏,这里是将nav部分作为可视区域,ul#img是中包含所有的图片,实现无缝滚...

weixin_27372101的博客 867

Open3D(C++) 点云构建三维Delaunay三角剖分

C++版本的Open3D实现从点云构建三维Delaunay,可视化效果。

点云侠的博客 2247

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

推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果。 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准。 官方演示,如下:  Demo 使用方法如下: 1、加载javascript。  type="text/javascript" src="js/jquery.js">   type="text/jav

feifei20081014的专栏 2176

界面材料知识

界面材料(TIM)用于芯片和散热器之间的导热作用,将低导热系数的空气(空气的导热系数(0.026 W /M·K))排除,换成高导热系数,低热阻导热系数的材料。具体的:TIM1为芯片DIE和芯片保护壳之间的界面材料,一般是直接焊接的方式,比如使用铟片,有很高的导热系数;芯片厂工程师主要找的是TIM1界面材料。TIM1.5为芯片Die和散热器之间的界面材料,比较少见;TIM2为我们所常见的界面材料,用于芯片外壳和散热器之间。(图片来源网上)

YY_Share的博客 1854

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

js实现单张或多张图片持续无缝滚动

想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符。 原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1、必须是没有设置过渡动画的,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。 实现: ht.

BUG制造者:图图 <p>这是一个P标签</p> 3469

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

vue 文字无缝滚动_vue 上实现无缝滚动播放文字系统公告

首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定,是利用了将表格分层两部分,滚动的时候通过translate来移动了表格的位置,实现的半边滚动,半边移动,这种办法可以用在我们这里,这样就实现了代码的横向滚动,这下就剩下无缝链接。既然是用transla...

weixin_39913648的博客 783

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

php 页面图片无缝滚动,js实现图片无缝滚动

实现原理:图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接。前提:1、必须是没有设置过渡动画的,2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。实现:html主要包含三块:1、最外层盒子,用来展示滚动图的区域,overflow:hidden;2、滚动的盒子,主...

weixin_39715290的博客 141

各种图片、文字无缝滚动

1.文字的无缝向上滚动 文字列表无缝向上滚动JavaScript代码 *{margin:0px;padding:0px;border:0px;} body{font-size:12px} #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list

HelloJimmy520的专栏 3329

jQuery无缝滚动插件支持图片无缝滚动或文字无缝滚动-20130708

1、效果及功能说明 导航菜单插件制作当鼠标滑过显示二级下拉菜单目录子内容,这是一款轻量级的jquery菜单插件非常实用 2、实现原理 首先是设定文字滚动的速度,然后设定每一行文字的高度,接下来来定义文字的自动滚动和当滚动完成一轮后新的文字从最下方出来最上的文字消失每次从下方出现设定为一条文字并且控制文字是从想下往上的滚动方式,最后在定义一个伪类当鼠标触及到文字时所有滚动效果停止...

xjwolaile的博客 429

html js无缝滚动图片

很无语,刚开始学网页,前前后后搞滚动就搞了好久,往上找了好多例子文字太多不想看。。。话不多说 ,我们先看一下效果:首先,我们需要知道几个重要的标签:(附带一个解释链接偷懒一下http://blog.youkuaiyun.com/zxf13598202302/article/details/51162664)offsetWidth,offsetLeft,style.left,style.width....请记住...

啦啦啦的博客 2330
上一篇: 各种图片、文字无缝滚动
下一篇: 动态调用WEB服务【以调用天气为例子】
HelloJimmy520
博客等级 码龄16年 31粉丝 13原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值