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-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现穿梭框功能
Jan 19 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 删除记录实现代码
2009/03/12 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python实现学员管理系统
2019/02/26 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python小白垃圾回收机制入门
2020/06/09 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
"引用"与多态的关系
2013/02/01 面试题
linux面试相关问题
2013/04/28 面试题
七一表彰活动方案
2014/01/18 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
全新239军机修复记
2022/04/05 无线电