recherche

Maison >interface Web >js tutoriel >N codes de défilement transparents plus simples implémentés par JS (y compris les effets graphiques et de texte)_compétences javascript

N codes de défilement transparents plus simples implémentés par JS (y compris les effets graphiques et de texte)_compétences javascript

WBOY
WBOYoriginal
2016-05-16 15:33:371389parcourir

Les exemples de cet article décrivent de nombreux codes de défilement simples et transparents implémentés par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le principe de mise en œuvre est très simple. Après l'enregistrement de l'événement, le innerHTML de l'élément est accumulé une seule fois.

Puis le défilement commence, lorsque la barre de défilement atteint la position médiane de l'élément :

Ne définissez pas de marge et de remplissage sur les éléments enfants, car le mécanisme de superposition CSS de marge ou de remplissage provoquera un "saut" lors du défilement. Le moyen le plus sûr consiste à définir un élément en ligne, puis à définir une marge ou un remplissage à l'intérieur !

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js connaissances de base (méthodes publiques, méthodes privées, méthodes privilégiées)_Connaissances de baseArticle suivant：js connaissances de base (méthodes publiques, méthodes privées, méthodes privilégiées)_Connaissances de base

Articles Liés

Voir plus