jquery實現某寶放大點擊切換_ZenDei技術網路在線

jquery實現某寶放大點擊切換

-Advertisement-

html代碼 < > css代碼 { margin: 0; padding:0; } li{ list style: none; } .boss{ position:relative; width: 350px; } .bigimg{ width: 350px; border: 1px ...

html代碼

<body>
<div class="boss">
    <div class="bigimg">
        <img src="img/s1.jpg" height="350" width="350" id="spic">   
        <div id="mask"></div>
    </div>
    <div class="xia"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
      <div class="items">
        <ul>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b2.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b1.jpg" height="56" width="56"></li>
          <li><img src="img/b2.jpg" height="56" width="56"></li>
          <li><img src="img/b3.jpg" height="56" width="56"></li>
        </ul>
      </div>
    </div>
    <div class="zoom">
        <img src="img/b1.jpg" id="bpic">
    </div>
</div>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/js6.js"></script>

css代碼

*{
margin: 0;
padding:0;
}
li{
    list-style: none;
}
.boss{
    position:relative;
    width: 350px;
}
.bigimg{
    width: 350px;
    border: 1px solid #ccc;
    height: 350px;
    position: relative;
}
#mask{
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    border:1px solid #ccc;
    cursor: pointer;
}

.xia{
    clear:both;
    margin-top:5px;
    width:352px;
}
.xia .prev{
    float:left;
    margin-right:4px;
}
.xia .next{
    float:right;
}
.xia .prev,.xia .next{
    display:block;
    text-align:center;
    width:10px;
    height:54px; 
    line-height:54px;
    border:1px solid #CCC;
    background:#EBEBEB;
    cursor:pointer;
    text-decoration:none;
}
.xia .items{
    float:left;
    position:relative;
    width:322px;
    height:56px;
    overflow:hidden;
}
.xia .items ul{
    position:absolute;
    height:56px;
}
.xia .items ul li{
    float:left;
    width:64px;
    text-align:center;
}
 .xia .items ul li img{
    border:1px solid #CCC;
    padding:2px;
    width:50px;
    height:50px;
}
.xia .items ul li img:hover{
    border:2px solid #FF6600;
    padding:1px;
} 
.zoom{
    width: 350px;
    height: 410px;
    border:1px solid #ccc;
    position: absolute;
    top: 0;
    right: -360px;
    overflow: hidden;
    display: none;
}

jquery代碼

var $spic=$("#spic");
var $mask=$("#mask");
var $bigimg=$(".bigimg");
var $bpic=$("#bpic");
$(".items img").on("mouseover",function(){
    
    $spic.attr("src",$(this).attr("src"));//滑鼠滑過切換
    $bpic.attr("src",$(this).attr("src"));

});

var l=$bigimg.eq(0).offset().left;
var t=$bigimg.eq(0).offset().top;
var width1=$mask.outerWidth()/2;
var height1=$mask.outerHeight()/2;

var maxl=$bigimg.width()-$mask.outerWidth();
var maxt=$bigimg.height()-$mask.outerHeight();

var bili=$bpic.width()/$spic.width();

$bigimg.mouseover(function(e){
    var maskl=e.clientX-l-width1,maskt=e.clientY-t-height1;
    if(maskl<0) maskl=0;
    if(maskt<0) maskt=0;
    if(maskl>maxl)maskl=maxl;
    if(maskt>maxt)maskt=maxt;

    $mask.css({"left":maskl,"top":maskt});

    $(".zoom").show();

    $bpic.css({"margin-left":-maskl*bili,"margin-top":-maskt*bili});
});


var marginLeft=0
$(".next").click(function(){

    marginLeft=marginLeft-63.5;
    if(marginLeft<-254) marginLeft=-254;

    $(".items ul").css({"margin-left":marginLeft})
})
$(".prev").click(function(){

    marginLeft=marginLeft+63;
    if(marginLeft>0) marginLeft=0;

    $(".items ul").css({"margin-left":marginLeft})
});

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Java反射機制深入詳解

一.概念反射就是把Java的各種成分映射成相應的Java類。 Class類的構造方法是private，由JVM創建。反射是java語言的一個特性，它允程式在運行時（註意不是編譯的時候）來進行自我檢查並且對內部的成員進行操作。例如它允許一個java的類獲取他所有的成員變數和方法並且顯示出來。Jav ...
java-------單鏈表

單鏈表： * 1.鏈表可以是一種有序或無序的列表 * 2.鏈表的內容通常存儲在記憶體中分散的為止 * 3.鏈表由節點組成，每一個節點具有相同的結構 * 4.節點分為數據域和鏈域，數據域存放節點內容，鏈域存放下一個節點的指針 package myLinkList; public class MyLink ...
js 中格式化時間

在js中常常要求對時間的輸出格式進行格式化，比如 2017-01-01 10：10，比較麻煩的是月，日，小時，分。它們的格式一般要求兩位，如果小於10的話需要在前邊補0,當然這算不上什麼問題，可以通過判斷完成，比如 day = day>10?day:("0"+day);但是這樣的代碼寫多了總想寫點有 ...
Array基礎知識

Array 數組類除了 Object 之外， Array 類型恐怕是ECMAScript 中最常用的類型了。而且，ECMAScript 中的數組與其他多數語言中的數組有著相當大的區別。雖然 ECMAScript 數組與其他語言中的數組都是數據的有序列表，但與其他語言不同的是，ECMAScript ...
Bootstrap學習筆記01

1、Make Images Mobile Responsive 用處：使圖片適配你的頁面寬度。操作：給圖片添加 .img-responsive class屬性。 2、Center Text with Bootstrap 用處：使文本居中。操作：給文本添加 center-text clas ...
每天一個JS 小demo之原生數組splice方法書寫。主要知識點：鍛煉思維邏輯能力，對於數組方法的理解和各種情況的考量

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <body><script>/** splice(start, deleteCount, data1, data2, da ...
nodeJS之事件events

[1]EventEmitter [2]方法 [3]設置 [4]事件 ...
每天一個JS 小demo之日曆製作。主要知識點：日期函數和對於函數封裝的靈活運用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> td { text-align: center; } </style></head> <body> <p> <selec ...