国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
js相冊效果
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>
<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>
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS+JS自動改變切換方向的圖片幻燈切換效果
鼠標(biāo)移圖片上切換文字介紹的jquery網(wǎng)頁特效
W3C標(biāo)準中對css3的transition屬性
Web前端設(shè)計模式--制作漂亮的彈出層... - 翁智華 - 博客園
簡單的原生js輪播圖
JavaScript 圖片滾動(絕對酷)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服