Js動態效果
阿新 • • 發佈：2021-08-11
一些常見的Js動態效果。級聯下拉框，隱藏列表框動態顯示，div切換，圖片輪播，內容無縫滾動。
Js動態效果
Js實現一些常見的動態效果。
級聯下拉框
<html> <head> <script type="text/javascript"> var citys=new Array(3); //使用二維陣列儲存 citys[0]=["長沙","湘潭","株洲","郴州"];//湖南 citys[1]=["深圳","廣州","東莞","惠州"];//廣東 citys[2]=["南昌","贛州","宜春"];//江西 </script> </head> <body> 省:<select id="p"> <option value="-1">--請選擇--</option> <option value="0">湖南省</option> <option value="1">廣東省</option> <option value="2">江西省</option> </select> 市:<select id="c"> <option>--請選擇--</option> </select> </body> </html> <script type="text/javascript"> var p=document.getElementById("p"); var c=document.getElementById("c"); p.onchange=function(){ //當前選中的是那個省:對應的value if(this.value!=-1){ var cs=citys[this.value]; //在插入之前先把c裡面的所有的option清除 var coptions=document.getElementById("c").getElementsByTagName("option"); //每次刪除下標為1的option元素,等刪到陣列中只有一個元素的時候就可以了 while(coptions.length>1){ coptions[1].parentNode.removeChild(coptions[1]); } //把市建立成option元素,追加到市的下拉列表框 for(var i=0;i<cs.length;i++){ //建立option元素 var cp=document.createElement("option"); cp.innerHTML=cs[i]; //追加到c下拉列表中 c.appendChild(cp); } } } </script>
隱藏列表框動態顯示
使用滑鼠移入移出事件執行一段函式。
函式獲取li標籤下的div標籤。
在滑鼠移入|移出時，操作div的css將display設定為block|none
<html> <head> <style type="text/css"> #hd li{ list-style: none; float: left; line-height: 20px; width: 60px; } </style> </head> <body> <ul id="hd"> <li> 分類 <div style="display: none;"> <p>文學</p> <p>哲學</p> </div> </li> <li> 賬號 <div style="display: none;"> <p>購物車</p> <p>訂單</p> </div> </li> <li>幫助</li> <li>更多>></li> </ul> </body> </html> <script type="text/javascript"> var lis = document.getElementById("hd").getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onmouseover = function(){ this.getElementsByTagName("div")[0].style.display = "block"; } lis[i].onmouseout = function(){ this.getElementsByTagName("div")[0].style.display = "none"; } } </script>
div切換
<html> <head> <style type="text/css"> li { list-style: none; float: left; line-height: 40px; text-align: center; width: 120px; height: 40px; } #div1{ width: 300px; height: 300px; background-color: #3A6587; } #div2{ width: 300px; height: 300px; background-color: whitesmoke; display: none; } .liclass{ background-color: antiquewhite; } </style> </head> <body> <ul id="hd"> <li value="1" class="liclass">1</li> <li value="2" class="">2</li> <div style="clear: left;"></div> </ul> <div id="bd"> <div id="div1"> div1 </div> <div id="div2"> div2 </div> </div> </body> </html> <script type="text/javascript"> var lis = document.getElementById("hd").getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onmouseover = function(){ //先讓所有div隱藏，再讓點選的div顯示 //隱藏div var div = document.getElementById("bd").getElementsByTagName("div"); for(var y=0;y<div.length;y++){ div[y].style.display = "none"; } //去除li標籤樣式 var ls = document.getElementById("hd").getElementsByTagName("li"); for(var m=0;m<ls.length;m++){ ls[m].className = ""; } //獲取樣式 this.className = "liclass"; for(var n=0;n<ls.length;n++){ document.getElementById("div"+this.value).style.display = "block"; } } } </script>
圖片輪播
在頁面載入完成時，啟動計時器，每一秒執行一次圖片切換函式。
當滑鼠停留在按鈕和圖片上時，停止計時器。滑鼠離開時，開啟計數器。
<html>
<head>
<style>
#bd_center_first_center{
background-color: whitesmoke;
border: 1px solid #DCDCDC;
border-top:none;
border-bottom:none;
height: 210px;
}
#bd_center_first_center button{
margin: 5px 5px;
width: 15px;
height: 17px;
float: left;
}
.liClass{
background-color: orange;
color: white;
}
</style>
</head>
<body>
<div id="bd_center_first_center">
<a href="####" id="a" target="_blank"><img id="img" src="img/dd_scroll_3.jpg" style="margin-left: 10px; margin-top: 10px; float: left;"></a>
<button type="button" value="1" style="margin-top: 10px;" id="bd_center_first_button1" class="liClass">1</button>
<button type="button" value="2" id="bd_center_first_button2">2</button>
<button type="button" value="3" id="bd_center_first_button3">3</button>
<button type="button" value="4" id="bd_center_first_button4">4</button>
<button type="button" value="5" id="bd_center_first_button5">5</button>
<button type="button" value="6" id="bd_center_first_button6">6</button>
</div>
</body>
</html>
<script type="text/javascript">
var num=1;
var time;
function noLiCss(){
var lis=document.getElementsByTagName("button");
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
}
function imgChange(){
num++;
if(num>6){
num=1;
}
//先清除所有li的樣式
noLiCss();
//顯示對應的圖片
document.getElementById("img").src="img/dd_scroll_"+num+".jpg";
document.getElementById("bd_center_first_button"+num).className="liClass";
}
window.onload=function(){
time=setInterval("imgChange()",1000);
}
//給所有 li繫結滑鼠移入事件
var lis=document.getElementsByTagName("button");
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
//清除定時器
clearInterval(time);
noLiCss();
this.className="liClass";
document.getElementById("img").src="img/dd_scroll_"+this.value+".jpg";
num=this.value;
}
lis[i].onmouseout=function(){
time=setInterval("imgChange()",1000);
}
}
//給圖片加滑鼠移入移出事件
document.getElementById("img").onmouseover=function(){
clearInterval(time);
}
document.getElementById("img").onmouseout=function(){
time=setInterval("imgChange()",1000);
}
</script>
內容無縫滾動
<html>
<head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#all{
width: 300px;
height: 400px;
border: 1px solid red;
overflow: hidden;
}
#express{
margin-left: 50px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1">
<ul id="express">
<li>·..........開始.........</li>
<li>·2010考研英語大綱到貨75折...</li>
<li>·權威定本四大名著（人民文...</li>
<li>·口述歷史權威唐德剛先生國...</li>
<li>·袁偉民與體壇風雲：實話實...</li>
<li>·我們臺灣這些年：轟動兩岸...</li>
<li>·暢銷教輔推薦：精品套書50...</li>
<li>·2010版法律碩士聯考大綱75...</li>
<li>·計算機新書暢銷書75折搶購</li>
<li>·2009年孩子最喜歡的書>></li>
<li>·弗洛伊德作品精選集59折</li>
<li>·..........結束.........</li>
</ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>
<script type="text/javascript">
//將div1中的內容複製到div2
document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML;
var time =setInterval(function(){
var all=document.getElementById("all");
var div1=document.getElementById("div1");
if(all.scrollTop>div1.offsetHeight){
all.scrollTop=0;
}else{
all.scrollTop++;
}
},10);
</script>