jquery仿京东商品放大浏览页面_实例分享

小云云

发布时间：2018-01-10 10:38:04

2187人浏览过

来源于php中文网

原创

前面我们和大家分享过很多仿京东功能的文章，本文我们主要为大家详细介绍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的代码！！！

@@##@@

@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@

图文介绍
评论（1）

暂无好评！

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗

来源：师徒课堂

@@##@@

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

jq仿京东商品详细页图片放大镜

jq仿京东商品详细页图片放大镜是一款基于jquery实现的jqzoom仿京东商城商品详细页面图片放大镜特效。

下载

$(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>p").eq(index).show().siblings().hide();
  });
});

仿京东商品页面的效果！！！

jquery仿京东商品放大浏览页面_实例分享

大家觉得怎么样？是不是很有趣，赶紧动手尝试一下吧。

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

151

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

312

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

396

2023.11.10