cari

Rumah >hujung hadapan web >tutorial js >JS melaksanakan kod kesan menatal senarai pautan ultra-ringkas dalam kawasan tetap

JS melaksanakan kod kesan menatal senarai pautan ultra-ringkas dalam kawasan tetap

PHPz
PHPzke hadapan
2016-05-16 15:33:521258semak imbas

Artikel ini terutamanya memperkenalkan JS untuk melaksanakan kod kesan menatal senarai pautan ultra ringkas di kawasan tetap, kawalan transformasi atribut elemen halaman yang sangat biasa untuk mencapai kesan menatal, mudah dan praktikal, rakan yang memerlukan boleh merujuknya, butirannya adalah seperti berikut:

Versi ultra-lite bagi kod skrol senarai pautan ini boleh menatal dalam kawasan yang ditentukan Sudah tentu, saiz kawasan boleh ditetapkan sendiri.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Kod di atas ialah keseluruhan kandungan bab ini Untuk lebih banyak tutorial berkaitan, sila Lawati Tutorial Video JavaScript!

Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Fungsi yang biasa digunakan dalam kemahiran javascript (2)_javascriptArtikel seterusnya：Fungsi yang biasa digunakan dalam kemahiran javascript (2)_javascript

Artikel berkaitan

Lihat lagi