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="img/b1.jpg" height="350" width="350" id="pian" />
     <div class="yin"></div>
    </div>
    <div class="bao">
     <span class="zuo"></span>
     <div class="tab">
      <ul class="Ul">
       <li><img src="img/b1.jpg" height="52" width="52" /></li>
       <li><img src="img/b2.jpg" height="52" width="52" /></li>
       <li><img src="img/b3.jpg" height="52" width="52" /></li>
       <li><img src="img/b1.jpg" height="52" width="52" /></li>
       <li><img src="img/b2.jpg" height="52" width="52" /></li>
       <li><img src="img/b3.jpg" height="52" width="52" /></li>
       <li><img src="img/b1.jpg" height="52" width="52" /></li>
       <li><img src="img/b2.jpg" height="52" width="52" /></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="img/11.png" height="300" width="1329" />
      </div>
     </div>
    </div>
   </div>
   <div class="xia">
    <img src="img/b1.jpg" height="600" width="600" id="zhao" />
   </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

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles