jquery仿京东商品放大浏览页面

jQuery 2019-01-07

jquery仿京东商品页面

京东页面大家都很熟悉，进入商品页面把鼠标放在图片上旁边会出现一个放大的效果，接下来就带大家看看怎么实现的！！！！

仿京东商品页面css的代码！！！

<div class="jb51code">
<pre class="brush: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,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的代码！！！

rush:xhtml;"> 
<div class="tab"&gt;
  <ul class="Ul"&gt;
    <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"&gt;</span>
</div>
<div class="lie "&gt;
  <ul>
    <li class="ll"&gt;图文介绍</li>
    <li><a href="https://www.jb51.cc/tag/pinglun/" target="_blank" class="keywords">评论</a>（1）</li>
  </ul>
</div>

<div class="nie"&gt;
  <div class="bao1"&gt;
    <div class="up"&gt;
      <span>暂无好评！</span>
      <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗</p>
      <p>来源：师徒课堂</p>
    </div>
    <div class="down"&gt;
      <img src="img/11.png" height="300" width="1329" />
    </div>
  </div>
</div>

仿京东商品页面jquery的代码！！！

<div class="jb51code">
<pre class="brush:js;">
$(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京东商品浏览页面jquery商品放大jquery商品放大浏览

相关文章

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...