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的代码！！！

<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>

仿京东商品页面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京东商品浏览页面  # jquery商品放大浏览  # jquery商品放大  # jQuery模仿京东/天猫商品左侧分类导航菜单效果  # jquery 实现京东商城、凡客商城的图片放大效果  # jQuery实现等比例缩放大图片让大图片自适应页面布局  # 用JQuery模仿淘宝的图片放大镜显示效果  # 基于jquery实现一张图片点击鼠标放大再点缩小  # 基于Jquery插件开发之图片放大镜效果(仿淘宝)  # jQuery当鼠标悬停时放大图片的效果实例  # jquery图片放大镜功能的实例代码  # 关于Jqzoom的使用心得 jquery放大镜效果插件  # jquery实现图片放大点击切换  # 京东  # 放在  # 暂无  # 鼠标  # 大家都  # 当我  # 神清气爽  # 搜狗  # 很熟悉  # 大家多多  # 就带  # 傲游  # 世界之窗  # style  # text  # list  # align  # img  # block  # center 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何清理系统缓存命令_Laravel清除路由配置及视图缓存的方法【总结】  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  如何快速搭建个人网站并优化SEO？  网站建设要注意的标准 促进网站用户好感度！  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  如何用5美元大硬盘VPS安全高效搭建个人网站？  Laravel怎么使用artisan命令缓存配置和视图  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  简单实现Android文件上传  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  如何在阿里云购买域名并搭建网站？  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  如何在云主机上快速搭建网站？  *服务器网站为何频现安全漏洞？  Android自定义listview布局实现上拉加载下拉刷新功能  详解Android中Activity的四大启动模式实验简述  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  在Oracle关闭情况下如何修改spfile的参数  PythonWeb开发入门教程_Flask快速构建Web应用  Laravel如何自定义错误页面（404, 500）？（代码示例）  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  bing浏览器学术搜索入口_bing学术文献检索地址  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  php json中文编码为null的解决办法  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel如何使用Sanctum进行API认证？（SPA实战）  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  如何用景安虚拟主机手机版绑定域名建站？  Laravel如何使用Gate和Policy进行权限控制_Laravel权限判定与策略规则配置  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  中国移动官方网站首页入口 中国移动官网网页登录  香港服务器如何优化才能显著提升网站加载速度？  北京的网站制作公司有哪些,哪个视频网站最好？  如何用美橙互联一键搭建多站合一网站？  如何在IIS管理器中快速创建并配置网站？  浅谈Javascript中的Label语句  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  如何自定义建站之星模板颜色并下载新样式？  想要更高端的建设网站，这些原则一定要坚持！  利用vue写todolist单页应用  如何在 React 中条件性地遍历数组并渲染元素  laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  Java遍历集合的三种方式  简历没回改：利用AI润色让你的文字更专业