N lebih mudah kod tatal lancar yang dilaksanakan oleh JS (termasuk kesan grafik dan teks)

N lebih mudah kod tatal lancar yang dilaksanakan oleh JS (termasuk kesan grafik dan teks)_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:33:37

asal

1396 orang telah melayarinya

Contoh dalam artikel ini menerangkan banyak kod tatal lancar yang mudah dilaksanakan oleh JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Prinsip pelaksanaan adalah sangat mudah Selepas mendaftarkan acara, innerHTML elemen terkumpul sekali.

Kemudian tatal bermula, apabila bar tatal mencapai kedudukan tengah elemen:

Jangan tetapkan margin dan padding pada elemen kanak-kanak, kerana mekanisme tindanan CSS margin atau padding akan menyebabkan "melompat" dalam menatal. Cara selamat ialah dengan menetapkan elemen sebaris dan kemudian tetapkan margin atau padding di dalamnya!

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-n-txt-pic-scroll-codes/

Kod khusus adalah seperti berikut:

<!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" />
<style type="text/css">
body{width:80%;margin:0 auto;color:#00a;}
h2{font-size:120%;margin:1em auto;text-align:center;}
div{border:solid 1px #0a0;font-size:12px;overflow:hidden;width:500px;margin:1em auto;}
p{padding:0;margin:0;}
p span{display:inline-block;margin:1em;}
p b{margin:1em .5em;display:inline-block;font-size:120%;color:red;}
.tips{border:solid 1px red;background:#FFC;padding:.5em;}
</style>
<title>无缝滚动</title>
</head>
<body>
<h1>较简单的无缝滚动实现办法</h1>
<p class="tips">切记：不要在子元素上设置margin和padding，因为CSS对margin或padding的叠加机制，会导致滚动出现“跳跃”。稳妥的办法是套一个内联元素，然后再在里面设置margin或者padding！为什么滚动到一半就跳转到顶部了呢？因为obj.innerHTML=obj.innerHTML+obj.innerHTML，它迷惑了你。。。。</p>
<h2>第一个，设置非标准属性delay，所以要快些</h2>
<div class="seamless" style="height:100px;" id="obj" delay="10">
 <p><span>蓝色理想维基是一个以蓝色理想社区 用户为基础的维基系统。 只要是社区的用户，并达到初级用户级别，就能对本站的页面进行增加和编辑。</span></p>
 <p><span>我们目前使用这套系统来完成我们网站的各项帮助。比如论坛怎么使用，怎么找回密码一类的问题。另外还用来记录一些网站，会员的各项历史信息。</span></p>
 <p><span>长期的打算是解决社区的技术版块中重复提出的基础问题。因为论坛回复很不规范，需要用户自己从回复中整理和测试，另外很容易被帖子内容淹没，没有有效地进行整理和规范。</span></p>
 <p><span>我们想利用高素质的网站会员在HTML方面的专业知识，来完成一个协作的WEB知识库，造福大众。</span></p>
 <p><span>蓝色理想维基标识设计师是:bobpop，标识版权属于支付宝。</span></p>
</div>
<h2>第二个，如果未设置delay，则默认100毫秒的频率滚动</h2>
<div class="seamless" style="height:50px;">
 <p><span>缺陷：不能对子标签设置margin或者padding。</span></p>
 <p><span>怎么办呢？跟上面一样，里面套一个span标签，然后就可以设置margin，padding了。</span></p>
 <p><span>算是一个缺点吧。</span></p>
</div>
<h2>第三个，可以停止的，因为class="seamless <strong style="color:red;">allowStop</strong>"</h2>
<div class="seamless allowStop" style="height:90px;width:150px;" delay="9">
 <p><span><img src="images/frown.gif" width="50" /></span></p>
 <p><span><img src="images/redface.gif" /></span></p>
 <p><span><img src="images/biggrin.gif" width="90" /></span></p>
 <p><span><img src="images/wink.gif" width="120" /></span></p>
 <p><span><img src="images/tongue.gif" width="40" /></span></p>
 <p><span><img src="images/cool.gif" align="right" height="40" /></span></p>
 <p><span><img src="images/rolleyes.gif" width="70" /></span></p>
 <p><span><img src="images/confused.gif" /></span></p>
 <p><span><img src="images/han.gif" /></span></p>
</div>
</body>
</html>
<script type="text/javascript">
(function(c){
 var obj=document.getElementsByTagName("div");
 var _l=obj.length;
 var o;
 for(var i=0;i<_l;i++){
  o=obj[i];
  var n2=o.clientHeight;
  var n3=o.scrollHeight;
  o.s=0;
  if(o.className.indexOf(c)>=0){
   if(n3<=n2){return false;}
   var delay=parseInt(o.getAttribute("delay"),10);
   if(isNaN(delay)){delay=100;}
   if(o.className.indexOf("allowStop")>=0){
    o.onmouseover=function(){this.Stop=true;}
    o.onmouseout=function(){this.Stop=false;}
   }
   giveInterval(autoRun,delay,o);
   //关键之处！！
   o.innerHTML=o.innerHTML+o.innerHTML;
  }
 }
 //注册函数
 function giveInterval(funcName,time){var args=[];for(var i=2;i<arguments.length;i++){args.push(arguments[i]);}return window.setInterval(function(){funcName.apply(this,args);},time);}
 function autoRun(o,s){
  if(o.Stop==true){return false;}
  var n1=o.scrollTop;
  var n3=o.scrollHeight;
  o.s++;
  o.scrollTop=o.s;
  if(n1>=n3/2){
   o.scrollTop=0;
   o.s=0;
  }
 }
})('seamless')
</script>

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.