jquery仿京東商品頁面代碼分享-js教程-PHP中文網

首頁

web前端

js教程

jquery仿京東商品頁面代碼分享

巴扎黑

Jun 26, 2017 pm 02:28 PM

jquery京東商品頁面

jquery仿京東商品頁面

京東頁面大家都很熟悉，進入商品頁面把滑鼠放在圖片上旁邊會出現一個放大的效果，接下來就帶大家看看怎麼實現的！！！！

仿京東商品頁面的效果！！！

jquery仿京東商品頁面代碼分享

仿京東商品頁面css的程式碼！！！

* {
margin: 0;
padding: 0;
}
.da {
width: 360px;
height: 418px;
float: left;
}
.shang {
width: 350px;
height: 350px;
border: 1px solid #ccc;
margin: 10px 0 10px 10px;
position: relative;
}
.yin {
width: 150px;
height: 150px;
border: 1px solid #ccc;
background: rgba(255,255,255,0.3);
position: absolute;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
.bao {
width: 362px;
height: 56px;
}
.tab {
width: 320px;
height: 56px;
margin-left: 10px;
overflow: hidden;
}
.Ul {
width: 9999px;
height: 56px;
}
.Ul li {
width: 52px;
height: 52px;
float: left;
border: 2px solid #ccc;
margin-left: 8px;
list-style: none;
position: relative;
text-align: center;
}
.li {
width: 52px;
height: 52px;
border: 2px solid #FF7403;
}
.li img {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -26px;
margin-left: -26px;
}
.zuo {
display: block;
width: 12px;
height: 56px;
background: url(../img/icon_clubs.gif) no-repeat;
background-size: 180px 608px;
background-position: -82px -462px;
float: left;
margin-left: 10px;
}
.you {
display: block;
width: 12px;
height: 56px;
background: url(../img/icon_clubs.gif) no-repeat;
background-size: 180px 608px;
background-position: -95px -462px;
float: right;
margin-top: -56px;
}
.xia {
width: 360px;
height: 418px;
border: 1px solid #ccc;
float: left;
margin: 10px 0 0px 20px;
overflow: hidden;
display: none;
}
.lie {
width: 1329px;
height: 30px;
margin-left: 10px;
margin-top: 20px;
border-bottom: 2px solid #BE0000;
}
.lie li {
float: left;
list-style: none;
width: 80px;
height: 28px;
background: #fff;
border-radius: 3px;
border: 0;
line-height: 30px;
text-align: center;
margin-right: 5px;
border: 1px solid #BE0000;
color: #c30;
cursor: pointer;
font-weight: bold;
}
.lie>ul .ll {
width: 80px;
height: 30px;
background: #BE0000;
border-radius: 3px;
border: 0;
line-height: 30px;
text-align: center;
color: #fff;
cursor: pointer;
}
.nie {
width: 1329px;
height: 200px;
margin-left: 10px;
overflow: hidden;
}
.bao1 {
width: 1329px;
height: 500px;
}
.up {
width: 1329px;
height: 200px;
}
.up span {
display: block;
padding: 10px 0 0 10px;
margin-bottom: 70px;
}
.up p {
text-align: center;
margin-top: 5px;
}
.down {
width: 1329px;
height: 300px;
background: yellow;
}

仿京東商品頁面html的程式碼！！！

<html>
 <head></head>
 <body>
  <div>
   <div class="da ">
    <div class="shang">
     <img  src="/static/imghwm/default1.png"  data-src="img/b1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="pian" / alt="jquery仿京東商品頁面代碼分享" >
     <div class="yin"></div>
    </div>
    <div class="bao">
     <span class="zuo"></span>
     <div class="tab">
      <ul class="Ul">
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="img/b2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" ></li>
      </ul>
     </div>
     <span class="you"></span>
    </div>
    <div class="lie ">
     <ul>
      <li class="ll">图文介绍</li>
      <li>评论（1）</li>
     </ul>
    </div>
    <div class="nie">
     <div class="bao1">
      <div class="up">
       <span>暂无好评！</span>
       <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p>
       <p>来源：师徒课堂</p>
      </div>
      <div class="down">
       <img  src="/static/imghwm/default1.png"  data-src="img/11.png"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="jquery仿京東商品頁面代碼分享" >
      </div>
     </div>
    </div>
   </div>
   <div class="xia">
    <img  src="/static/imghwm/default1.png"  data-src="img/b1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" id="zhao" / alt="jquery仿京東商品頁面代碼分享" >
   </div>
  </div> 
 </body>
</html>

仿京東商品頁面jquery的程式碼！！！

$(function() {
    var $yin = $(".yin");
    $(".Ul li img").mouseover(function() {
        $(this).parent().addClass("li").siblings().removeClass("li");
        $("#pian").attr("src", $(this).attr("src"));
        $("#zhao").attr("src", $(this).attr("src"));
    }).mouseout(function() {
        $(this).parent().removeClass("li");
    });
    var l = $(".shang").eq(0).offset().left;
    var t = $(".shang").eq(0).offset().top;
    var width1 = $(".yin").outerWidth() / 2;
    var height1 = $(".yin").outerHeight() / 2;
    var maxL = $(".shang").width() - $yin.outerWidth();
    var maxT = $(".shang").height() - $yin.outerHeight();
    var bili = $("#zhao").width() / $("#pian").width();
    $(".shang").mousemove(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
        };
        $yin.css({
            "left": maskL,
            "top": maskT
        });
        $(".xia").show();
        $(".yin").show();
        $("#zhao").css({
            "margin-left": -maskL * bili,
            "margin-top": -maskT * bili
        });
    });
    $(".shang").mouseleave(function() {
        $(".xia").hide();
        $(".yin").hide();
    });
    var marginLeft = 0;
    $(".you").click(function() {
        marginLeft = marginLeft - 64;
        if (marginLeft < -192) {
            marginLeft = -192
        };
        $(".tab ul").stop().animate({
            "margin-left": marginLeft
        },
        "fast");
    });
    $(".zuo").click(function() {
        marginLeft = marginLeft + 64;
        if (marginLeft > 0) {
            marginLeft = 0
        };
        $(".tab ul").stop().animate({
            "margin-left": marginLeft
        },
        "fast");
    });
    $(".lie li").click(function() {
        var index = $(this).index();
        $(this).addClass("ll").siblings().removeClass("ll");
        $(".bao1>div").eq(index).show().siblings().hide();
    });
});

怎麼樣，當我做出來的時候感覺神清氣爽！！！！！

以上是jquery仿京東商品頁面代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

See all articles