suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert einen äußerst prägnanten Linklisten-Scrolling-Effektcode in einem festen Bereich

JS implementiert einen äußerst prägnanten Linklisten-Scrolling-Effektcode in einem festen Bereich

PHPz
PHPznach vorne
2016-05-16 15:33:521239Durchsuche

In diesem Artikel wird hauptsächlich JS vorgestellt, um einen ultrapräzisen Linklisten-Scrolleffekt-Code in einem festen Bereich zu implementieren, eine sehr häufige Steuerung der Attributtransformation von Seitenelementen, um einen Scrolleffekt zu erzielen, einfach und praktisch, Freunde in Not können darauf verweisen, die Details sind wie folgt:

Diese Ultra-Lite-Version des Linklisten-Textlaufcodes kann innerhalb des angegebenen Bereichs scrollen. Natürlich kann die Bereichsgröße selbst festgelegt werden.

Ein Screenshot des Laufeffekts lautet wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

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

Der Oben finden Sie den gesamten Inhalt dieses Kapitels. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Häufig verwendete Funktionen in Javascript (2)_Javascript-KenntnisseNächster Artikel：Häufig verwendete Funktionen in Javascript (2)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen