亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)

 更新時(shí)間：2015年03月14日 11:46:37   投稿：hebedich  
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)大圖全屏圖片相冊(cè)的方法和示例，基于jQuery插件jQuery.album.js來實(shí)現(xiàn)的，效果非常不錯(cuò)，這里推薦給大家，希望大家能夠喜歡。

大圖全屏圖片相冊(cè)jQuery插件，支持左右按鈕切換以及點(diǎn)擊大圖自動(dòng)切換圖片，基于jQuery插件jQuery.album.js，插件支持參數(shù)自定義功能，viewMode：0沒有縮略圖 1有縮略圖  2縮略圖。全屏幕。可以對(duì)圖片進(jìn)行左右轉(zhuǎn)，具體的參數(shù)大家可以查看jQuery.album.js文件，總之效果很不錯(cuò)，喜歡的朋友可學(xué)習(xí)下

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" contect="zh-CN">
<title>非常不錯(cuò)的JS相冊(cè)特效代碼下載 </title>
<meta name="keywords" content="JS代碼,JS特效,JS特效代碼,JS相冊(cè)特效,JS相冊(cè)代碼,jQuery相冊(cè)特效,jQuery相冊(cè)插件,jQuery相冊(cè)圖片輪播" />
<meta name="description" content="JS代碼網(wǎng)提供高質(zhì)量的JS相冊(cè)特效代碼,jQuery相冊(cè)特效下載" />
<link rel="stylesheet" type="text/css" href="css/base.css?v=1409654123" />
<link rel="stylesheet" type="text/css" href="css/album.css?v=1409654123" media="all" />
<script type="text/javascript" src="js/jquery.js?v=1409654123"></script>
<script type="text/javascript">
var dxlCityId = 7;
var _current_num=0;
</script>
<!--[if IE]>
<style type="text/css">
.valin{ display:block;}
.valin i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
.valin img {
    vertical-align:middle
    }
</style>
<![endif]-->
</head>
<body>
<div class="album-box" id="album">
  <div h class="pre-btn" id="preBtn" title="上一張 "><i></i></div>
  <div class="next-btn" id="nextBtn" title="下一張 "><i></i></div>
  <div class="album-con">
    <div class="valin"> <i></i><img src="images/20140121161108.JPG" alt="" id="realImg" />
      <p class="pic-alt" id="txtDes"></p>
    </div>
    <div id="imgLoading"></div>
  </div>
  <div h class="thum-box" id="thumBox">
    <div class="thum-wrap" id="thumWrap">
      <ul class="imglist fix" id="photoList">
      </ul>
    </div>
    <i class="thum-pre-btn" id="thumPreBtn" title="上一頁(yè)"></i> <i class="thum-next-btn" id="thumNextBtn" title="下一頁(yè)"></i> </div>
</div>
<textarea class="dn" id="albumDataList">
            <li>
     <div> <img alt="JS相冊(cè)特效" src="images/tiny/20140121161108.JPG" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121161108.JPG</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161130.jpg" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161130.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161152.jpg" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161152.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img src="images/tiny/20140121161231.JPG" onload="scaleImage(this,99,75)" alt=""></div>
      <p></p>
      <i class="dn">images/20140121161231.JPG</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相冊(cè)特效" src="images/tiny/20140126134637.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140126134637.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相冊(cè)特效" src="images/tiny/20140121181958.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121181958.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相冊(cè)特效" src="images/tiny/20140121182023.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121182023.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
            <li>
     <div> <img alt="JS相冊(cè)特效" src="images/tiny/20140121182118.jpg" onload="scaleImage(this,99,75)"></div>
      <p></p>
      <i class="dn">images/20140121182118.jpg</i>
      <i class="dn imgAlt"></i>
      </li>
</textarea>
<div id="schedule-pop2" class="schedule-pop" style="display: none; top: 102px; left: 0px;">
                    <div id="inpForm2" class="formList formSmall">
                        <p class="hd clearfix">
                            <strong>花嫁麗舍私人婚禮會(huì)所（世博店）</strong><i>檔期查詢</i><br> 
                        </p>
                        <p class="bd">
                            即將為你查詢：<span><em id="year">2014</em>年<em id="mouth">01</em>月<em id="day">24</em>日</span>的婚宴檔期情況<br>
                            請(qǐng)輸入手機(jī)號(hào)碼，便于接受酒店實(shí)時(shí)檔期信息！
                        </p>
                        <div class="inputBox">
                            <div class="mbInp">
                                <label>請(qǐng)輸入手機(jī)號(hào)</label><input type="text" id="mobile614" class="txt" value="" name="mobile" maxlength="11"><span style="padding-left: 0px;" class="msg"><em></em></span>
                            </div>
                        </div>
                        <div class="inputBox clearfix"><input type="submit" id="btn614" class="btn mobile_submit fl mr10" value=""><i class="fl">您的重要信息不會(huì)被泄露&nbsp;&nbsp;詳見隱私條約</i></div>
                        <div id="close614_2"></div>
                        <input type="hidden" name="act" value="do">
                        <input type="hidden" name="from" value="detail">
                        <input type="hidden" name="noalert" value="a">
                        <input type="hidden" name="schedule_hotel" value="schedule_hotel">
                        <input type="hidden" name="happyday" value="" id="happydayv1">
                        <input type="hidden" name="usertype" value="return" id="usertype">
                        <input type="hidden" name="order_from" value="sh_HotelDetail_Schedule_TopCenter">            
                    </div>
                   <input type="hidden" id="trackCitys" value="sh">
                   <input type="hidden" id="hotel_id" value="5499" />
                   <input type="hidden" id="hotel_name" value="花嫁麗舍私人婚禮會(huì)所（世博店）" />
</div>
<script type="text/javascript">
function scaleImage(o, w, h) {
    var img = new Image();
    img.src = o.src;
    if (img.width > 0 && img.height > 0) {
        if (img.width / img.height >= w / h) {
            if (img.width > w) {
                o.width = w;
                o.height = (img.height * w) / img.width;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
           // o.alt = img.width + "x" + img.height;
        } else {
            if (img.height > h) {
                o.height = h;
                o.width = (img.width * h) / img.height;
            } else {
                o.width = img.width;
                o.height = img.height;
            }
            //o.alt = img.width + "x" + img.height;
        }
    }
}
</script>
<script type="text/javascript" src="js/jquery.album.js?v=1409654123"></script>
</body>
</html>

以上就是本文分享給大家的實(shí)例代碼了，希望對(duì)大家學(xué)習(xí)jQuery能夠有所幫助。

相關(guān)文章

最新評(píng)論