JS implémente un code d'effet de défilement de liste de liens ultra-concis dans une zone fixe-js tutoriel-php.cn

JS implémente un code d'effet de défilement de liste de liens ultra-concis dans une zone fixe

PHPz

Libérer： 2018-09-28 16:12:01

avant

1242 Les gens l'ont consulté

Cet article présente principalement JS pour implémenter un code d'effet de défilement de liste de liens ultra-concis dans une zone fixe, un contrôle de transformation d'attribut d'élément de page très courant pour obtenir un effet de défilement, simple et pratique, les amis dans le besoin peuvent s'y référer, les détails sont comme suit :

Cette version ultra-légère du code de défilement du texte de la liste de liens peut défiler dans la zone spécifiée. Bien sûr, la taille de la zone peut être définie par vous-même.

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

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

http : //demo.jb51.net/ js/2015/js-link-list-scroll-style-codes/

Le code spécifique est le suivant :

<html>
<HEAD>
<TITLE>文字链接列表滚动</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
 width:100%;
 overflow:hidden;
 font:12px/16px tahoma;
 display:block;
 text-decoration:none;
 margin:2px;
 color:#4a551c;
 padding-left:2px;
 text-align:left;
}
#demo a:hover {
 color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<p id="demo" style="overflow:hidden;height:132px;width:350px; border:1px solid #dde5bc;">
 <p id="demo1"> 
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
 </p>
 <p id="demo2"></p>
</p>
<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>

Copier après la connexion

Le ci-dessus est l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !