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实现提示语淡入效果
May 05 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
Python类属性的延迟计算
2016/10/22 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python语言快速上手学习方法
2018/12/14 Python
python对于requests的封装方法详解
2019/01/03 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
员工拓展培训方案
2014/02/15 职场文书
经典安踏广告词
2014/03/21 职场文书
活动宣传策划方案
2014/05/23 职场文书
作文批改评语
2014/12/25 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
安全主题班会教案
2015/08/12 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
运动会主持人开幕词
2016/03/04 职场文书