首頁 > 開發者 > JavaScript
最近在看《JavaScript+DOM編程藝術》。好像沒什麼吸收。
Dom尋找方法：
getElementById() //返回id元素
getElementsByTagName() //按照標籤名返回該標籤集合
getAttribute() //得到該元素某個屬性值
setAttribute() //設定元素的屬性值
本文主要利用setAttribute() 來改變img的href屬性值達到圖片轉場效果。
按照javascript美術館寫成了這個效果。
源碼：
<!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" /><meta name="Keywords" content="Tomi-Eric" /><meta name="Description" content="Tomi-Eric,練習執行個體" /><title>原生態javascript-圖片轉場效果</title><style type="text/css">/*{margin:0;padding:0}*/body{font:12px/1.5em "微軟雅黑",Arial;background:#f4f4f4}h1{color:#555; text-shadow:1px 2px #ababab;border-bottom:1px solid #dedede;margin:20px 0;padding:20px 0}#content{width:960px;margin:0 auto}ul{overflow:hidden;list-style:none;margin:0;padding:0}li{float:left;margin-right:10px}li a{text-decoration:none;color:#555;display:block;border:1px solid #dedede;background:#f5f5f5;text-align:center;padding:5px 20px;border-radius:5px;}li a:hover{color:#f90;background:#fefefe}li a.hover{color:#f90;background:#fefefe}#imgBox{width:400px;background#fff;margin:20px 0;padding:5px;border:1px solid #ccc;border-radius:2px; background:#fff;box-shadow:1px 1px 2px #ccc}p#description{text-align:center;font-weight:bold; color:#f90}</style><script type="text/javascript">window.onload=function(){ //導覽按鈕a元素集合 var alinks=document.getElementsByTagName("a"); //顯示img標籤對象 var img_c=document.getElementById("img_content"); //圖片描述對象 var p_desc=document.getElementById("description"); //遍曆a便簽元素，為每個a標籤添加click事件 for(var i=0;i<alinks.length;i++){ alinks[i].onclick=function(){ nav_focus(alinks,this,"hover"); //切換高亮元素 p_desc.innerHTML=this.title; //切換圖片描述內容 img_c.setAttribute("src",this.href); //更改圖片href屬性，即切換圖片return false; //阻止a標籤預設事件 } } alinks[0].click();}/*導覽按鈕選中高亮函數（objs,obj,styleName）objs:導航a標籤集合obj:當前點擊元素styleName:選中後的高亮樣式*/function nav_focus(objs,obj,styleName){ for(var i=0;i<objs.length;i++){ objs[i].className="";} obj.className=styleName;}</script></head><body><div id="content"><h1>APPLE STORE</h1><ul><li><a href="images/apple_1_bigger.jpg" title="i love ipod">iPod</a></li><li><a href="images/apple_2_bigger.jpg" title="i love ipad">iPad</a></li><li><a href="images/apple_3_bigger.jpg" title="i love iPhone">iPhone</a></li><li><a href="images/apple_4_bigger.jpg" title="i love MacAir">Mac Air</a></li></ul><div id="imgBox"><img id="img_content" src="images/loading.gif" /><p id="description">Loading... ...</p></div><div id="footer">只在FF6中測試.Copyright by <a href="http://cnblogs.com/tomieric">Tomi-Eric.</a></div></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
