国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看
打開APP
未登錄
開通VIP,暢享免費電子書等14項超值服
開通VIP
首頁
好書
留言交流
下載APP
聯(lián)系客服
js相冊效果
AOD
>《我的圖書館》
2011.01.19
關(guān)注
JS相冊效果 -- 縱向代碼:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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:455px;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>
<table width="860" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td height="75" colspan="2" align="left" class="txt_1">JS相冊效果,圖片作者是攝友攝色hnmao1,鼠標(biāo)移動到小圖上自動看大圖。 </td>
</tr>
<tr>
<td width="740" align="center"><img src="
>
<td width="150" align="center" valign="top">
<img src="
<div id="showArea">
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
</div>
<img src="
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp(''\\b''+cl+''\\b'');
var elem = this.getElementsByTagName(''*'');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var speed = 1; //速度,越大越慢
var spec = 1; //每次滾動的間距, 越大滾動越快
var ipath = ''http://www.tblog.com.cn/test/images/''; //圖片路徑
var thumbs = document.getElementsByClassName(''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 () {location = 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;}
function gobottom() {$(''showArea'').scrollTop+=spec;}
</script>
JS相冊效果 -- 橫向
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS相冊效果 -- 橫向</title>
<style>
body {background:#000;margin:0;font:12px Verdana;text-align:center;}
#tbody {width:750px;margin:50px auto;}
#mainbody {width:740px;margin:5px;border:1px solid #222;padding:1px}
#mainphoto {cursor:pointer;display:block;}
#goleft {float:left;clear:left;margin:6px 5px 0 3px;}
#goright {float:right;clear:right;margin:6px 3px 0 5px;}
#photos {width:710px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}
#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}
</style>
</head>
<body>
<div id="tbody">
<div id="mainbody">
<img src="
</div>
<img src="
<img src="
<div id="photos">
<div id="showArea">
<!--
SRC: 縮略圖地址
REL: 大圖地址
NAME: 網(wǎng)址
-->
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
<img src="
</div>
</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var browse = window.navigator.appName.toLowerCase();
var MyMar;
var speed = 1; //速度,越大越慢
var spec = 1; //每次滾動的間距, 越大滾動越快
var minOpa = 50; //濾鏡最小值
var maxOpa = 100; //濾鏡最大值
var spa = 2; //縮略圖區(qū)域補充數(shù)值
var w = 0;
spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20);
function $(e) {return document.getElementById(e);}
function goleft() {$(''photos'').scrollLeft -= spec;}
function goright() {$(''photos'').scrollLeft += spec;}
function setOpacity(e, n) {
if (browse.indexOf("microsoft") > -1) e.style.filter = ''alpha(opacity='' + n + '')'';
else e.style.opacity = n/100;
}
$(''goleft'').style.cursor = ''pointer'';
$(''goright'').style.cursor = ''pointer'';
$(''mainphoto'').onmouseover = function() {setOpacity(this, maxOpa);}
$(''mainphoto'').onmouseout = function() {setOpacity(this, minOpa);}
$(''mainphoto'').onclick = function() {location = this.getAttribute(''name'');}
$(''goleft'').onmouseover = function() {this.src = ''http://image.hnol.net/c/2008-04/30/09/20080430094231399712-212277.gif''; MyMar=setInterval(goleft, speed);}
$(''goleft'').onmouseout = function() {this.src = ''http://image.hnol.net/c/2008-04/30/09/20080430094450144569-212277.gif''; clearInterval(MyMar);}
$(''goright'').onmouseover = function() {this.src = ''http://image.hnol.net/c/2008-04/30/09/20080430094231246114-212277.gif''; MyMar=setInterval(goright,speed);}
$(''goright'').onmouseout = function() {this.src = ''http://image.hnol.net/c/2008-04/30/09/200804300944506335422-212277.gif''; clearInterval(MyMar);}
window.onload = function() {
setOpacity($(''mainphoto''), minOpa);
var rHtml = '''';
var p = $(''showArea'').getElementsByTagName(''img'');
for (var i=0; i<p.length; i++) {
w += parseInt(p[i].getAttribute(''width'')) + spa;
setOpacity(p[i], minOpa);
p[i].onclick = function() {location = this.getAttribute(''name'');}
p[i].onmouseover = function() {
setOpacity(this, maxOpa);
$(''mainphoto'').src = this.getAttribute(''rel'');
$(''mainphoto'').setAttribute(''name'', this.getAttribute(''name''));
setOpacity($(''mainphoto''), maxOpa);
}
p[i].onmouseout = function() {
setOpacity(this, minOpa);
setOpacity($(''mainphoto''), minOpa);
}
rHtml += ''<img src="'' + p[i].getAttribute(''rel'') + ''" width="0" height="0" alt="" />'';
}
$(''showArea'').style.width = parseInt(w) + ''px'';
var rLoad = document.createElement("div");
$(''photos'').appendChild(rLoad);
rLoad.style.width = "1px";
rLoad.style.height = "1px";
rLoad.style.overflow = "hidden";
rLoad.innerHTML = rHtml;
}
</script>
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點擊舉報
。
打開APP,閱讀全文并永久保存
查看更多類似文章
猜你喜歡
類似文章
CSS+JS自動改變切換方向的圖片幻燈切換效果
鼠標(biāo)移圖片上切換文字介紹的jquery網(wǎng)頁特效
W3C標(biāo)準中對css3的transition屬性
Web前端設(shè)計模式--制作漂亮的彈出層... - 翁智華 - 博客園
簡單的原生js輪播圖
JavaScript 圖片滾動(絕對酷)
更多類似文章 >>
生活服務(wù)
首頁
萬象
文化
人生
生活
健康
教育
職場
理財
娛樂
藝術(shù)
上網(wǎng)
留言交流
回頂部
聯(lián)系我們
分享
收藏
點擊這里,查看已保存的文章
導(dǎo)長圖
關(guān)注
一鍵復(fù)制
下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!
聯(lián)系客服
微信登錄中...
請勿關(guān)閉此頁面
先別劃走!
送你5元優(yōu)惠券,購買VIP限時立減!
5
元
優(yōu)惠券
優(yōu)惠券還有
10:00
過期
馬上使用
×