无间断滚动原理

转载 2012年03月26日 23:43:22
<HTML><HEAD><TITLE>无间断滚动原理</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<div id="tbmq">
  <table width="300" border="1" align="left" bgcolor="#00CCFF">
    <tr> 
      <td height="30"> </td>
      <td>1</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>2</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>3</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>4</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>5</td>
      <td> </td>
    </tr>
  </table>
</div>
<script>
function MqObj(obj,width,height,speed,direct){
obj.contWidth=obj.offsetWidth;// offsetWidth
obj.stopscroll=false;
obj.nowscroll=0;
with(obj){
scrollLeft=0;//
innerHTML+=innerHTML;
style.width=width;
style.height=height;
style.overflowX="hidden";//
style.overflowY="visible";//
noWrap=true;
onmouseover=function(){stopscroll=true};
onmouseout=function(){stopscroll=false};
}
eval("setInterval('doScroll("+obj.id+")',"+speed+")");
}
function doScroll(obj){
if(obj.stopscroll==true) return;
if(obj.nowscroll<obj.contWidth){ // 
obj.scrollLeft=obj.nowscroll++;//scrollLeft
}else{
obj.scrollLeft=0;//scrollLeft
obj.nowscroll=0;
}
}
window.onload=function(){
MqObj(tbmq,"250","200","10")
MqObj(tbmq2,"270","200","50")
}
</script>
<div id="tbmq2"> 
  <table width="300" border="1" align="left" bgcolor="#00CCFF">
    <tr> 
      <td height="30"> </td>
      <td>1</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>2</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>3</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>4</td>
      <td> </td>
    </tr>
    <tr> 
      <td height="30"> </td>
      <td>5</td>
      <td> </td>
    </tr>
  </table>
</div>
</BODY></HTML>

上下左右无间断滚动

var speed=1//速度数值越大速度越慢 var rollmain=document.getElementById("demo") var rollbegin=document.getEle...
  • u014330950
  • u014330950
  • 2017年05月31日 15:54
  • 118

IOS实现文字水平无间断滚动

IOS跑马灯效果,实现文字水平无间断滚动
  • yimiyuangguang
  • yimiyuangguang
  • 2015年07月08日 12:22
  • 4002

无间断的图片循环滚动效果

使用JavaScript脚本实现无间断的图片循环滚动效果,主要是通过JavaScript脚本创建的move函数实现的。在move函数中,变量speed的数值用来控制图片滚动的速度,同时在页面中应用层来...
  • Sugar_girl
  • Sugar_girl
  • 2017年02月12日 11:40
  • 677

图片无缝滚动的原理和实例

无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%; 原理:第一个盒子相对浮动,第二个盒子绝对浮动,让...
  • stopcpp
  • stopcpp
  • 2016年10月12日 10:55
  • 2601

js连续滚动轮播原理

刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后...
  • wkj001
  • wkj001
  • 2017年01月16日 12:33
  • 330

视差滚动原理及实现

作为一种优雅酷炫的页面展示的方式,视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱,优设的2014年网页设计趋势中依然能够看到它的影子,所以我们不得不来好好研究下视差滚动...
  • chenlycly
  • chenlycly
  • 2014年05月05日 14:19
  • 15149

js无缝滚动原理及其使用注意点

以上内容转自:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html
  • yuelenglingxi
  • yuelenglingxi
  • 2014年05月07日 13:26
  • 6213

jquery滚动实现原理之一,自制滚动函数实例

jquery滚动实现原理之一,自制滚动函数实例 (2012-03-20 16:23:09) 转载▼     js标签横向滚动的实现的原理有很多种,进行...
  • ft2166826
  • ft2166826
  • 2013年12月09日 16:57
  • 766

ListView乱谈之ListView的滚动原理

简单的分析了ListView的滚动原理
  • chunqiuwei
  • chunqiuwei
  • 2015年09月26日 22:30
  • 2743

图片懒加载(滚动加载)原理

一、什么是图片懒加载? 即在页面载入的时候将页面上的img标签的src指向一个小图片,把真实地址存放在一个自定义属性中,这里我用data-src来存放,如下。 img src="loading....
  • lyyo_cd
  • lyyo_cd
  • 2017年06月15日 18:35
  • 407
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无间断滚动原理
举报原因:
原因补充:

(最多只允许输入30个字)