国产婷婷一区二区,久久久人人人,欧美日韩国产一二三

分析javascript縱向的相冊效果

來源：易賢網閱讀：1246 次日期：2014-08-15 16:52:05

溫馨提示：易賢網小編為您整理了“分析javascript縱向的相冊效果”,方便廣大網友查閱！

本代碼來自于懶人圖庫,本站只是對其代碼進行分析并解釋,并標注了源代碼的來源,本次是對縱向的相冊效果進行分析.

注明:源文件來源于懶人圖庫(便于代碼簡潔,去除了部分懶人的ad)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>縱向的JS相冊效果</title>

<style>

body {background:#000000;margin:20px 0;font:12px Verdana, Arial, Tahoma;text-align:center;vertical-align:middle;color:#FFFFFF}

img {border:none}

.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff}

img.thumb_img {cursor:pointer;display:block;margin-bottom:10px}

img#main_img {cursor:pointer;display:block;}

#gotop {cursor:pointer;display:block;}

#gobottom {cursor:pointer;display:block;}

#showArea {height:355px;margin:10px;overflow:hidden}

.info {color:#666;font:normal 9px Verdana;margin-top:20px}

.info a:link, .info a:visited {color:#666;text-decoration:none}

.info a:hover {color:#fff;text-decoration:none}

</style>

</head>

<body>

<tr>

<td height="75" colspan="2" align="left" class="txt_1">縱向的JS相冊效果</td>

</tr>

<tr>

......省略n個圖片

</div>

</tr>

</table>

</body>

</html>

function $(e) {return document.getElementById(e);}//定義獲取通過對象

document.getElementsByClassName = function(cl) {//定義document的通過ClassName來獲得對象數組

var retnode = [];//定義空數組

var myclass = new RegExp(cl);//通過正則上面傳來的cl值來判斷對象

var elem = this.getElementsByTagName('*');

for (var i = 0; i < elem.length; i++) {

var classes = elem[i].className;//如果classname符合正則則添加到定義的空數組

if (myclass.test(classes)) retnode.push(elem[i]);

}

return retnode;//最后返回數組

}

var MyMar;

var speed = 1; //速度，越大越慢

var spec = 1; //每次滾動的間距, 越大滾動越快

var ipath = 'images/'; //圖片路徑

var thumbs = document.getElementsByClassName('thumb_img');//獲取以"thumb_img"的數組

for (var i=0; i<thumbs.length; i++) {

thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};//循環對對象進行附加事件

thumbs[i].onclick = function () {location = this.link}

}

$('main_img').onclick = function () {window.open(this.link);}//對中間的大圖進行附加事件

$('gotop').onmouseover = function() {this.src = ipath + 'gotop2.gif'; MyMar=setInterval(gotop,speed);}

$('gotop').onmouseout = function() {this.src = ipath + 'gotop.gif'; clearInterval(MyMar);}

$('gobottom').onmouseover = function() {this.src = ipath + 'gobottom2.gif'; MyMar=setInterval(gobottom,speed);}

$('gobottom').onmouseout = function() {this.src = ipath + 'gobottom.gif'; clearInterval(MyMar);}

function gotop() {$('showArea').scrollTop-=spec;}//設定鼠標移動到上下按鈕時,圖片的整體滾動<網站制作學習網Foasp.cn>

function gobottom() {$('showArea').scrollTop+=spec;}

</script>

更多信息請查看IT技術專欄

上一篇：js只能輸入數字

下一篇：javascript打字效果

易賢網手機網站地址：分析javascript縱向的相冊效果

由于各方面情況的不斷調整與變化，易賢網提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢為準！

相關閱讀腳本欄目

Bottle框架中的裝飾器類和描述符應用詳解10月30日

Python探索之SocketServer詳解10月30日

Python探索之實現一個簡單的HTTP服務器10月30日

python探索之BaseHTTPServer-實現Web服務器介紹10月30日

13個最常用的Python深度學習庫介紹10月30日

深入理解Python中的*重復運算符10月30日

python logging日志模塊詳解10月30日

System表空間不足的報警問題淺析10月22日

Android開發自定義TextView省略號樣式的方法10月22日

MySQL 清除表空間碎片的實例詳解10月22日

Ubuntu下MySQL安裝及配置遠程登錄教程10月22日

Python 2.x如何設置命令執行的超時時間實例10月22日

windows 64位下redis安裝教程10月22日

Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動效果10月22日

淺談Node Inspector 代理實現10月22日

java web開發之購物車功能實現示例代碼10月22日

Android開發中GridView用法示例10月22日

Django ORM框架的定時任務如何使用詳解10月22日

SpringMail使用過程中的報錯解決辦法10月22日

Android 使用自定義RecyclerView控件實現Gallery效果10月22日

易賢網移動網站

2026上岸·考公考編培訓報班

報班類型
姓名
手機號
驗證碼

中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久