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


Posted in jQuery onJune 06, 2017

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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
Jquery EasyUI $.Parser
Jun 02 #jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
You might like
PHP 和 COM
2006/10/09 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
django-csrf使用和禁用方式
2020/03/13 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
会计学自我鉴定
2014/02/06 职场文书
食品安全汇报材料
2014/08/18 职场文书
创先争优活动个人总结
2015/03/04 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python