效果图：

不废话直接上代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>test</title>

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         ul{

             position: relative;

             width: 500px;

             /*height: 500px;*/

             margin: 50px;

         }

         li{

             width: 500px;

             height: 500px;

             /*position: absolute;*/

         }

         .div {

             border: 1px solid;

             position: relative;

             /*margin: 50px;*/

             height: 500px;

             width: 500px;

         }

         .div img {

             width: 500px;

             height: 500px;

         }

         .span {

             width: 100px;

             height: 100px;

             position: absolute;

             background: red;

             display: none;

             cursor: all-scroll;

             opacity: 0.1;

         }

         .show {

             height: 550px;

             width: 550px;

             position: relative;

             left: 502px;

             top: -505px;

             overflow: hidden;

             /*display: none;*/

         }

         .show img {

             position: absolute;

             width: 1500px;

             height: 1500px;

         }

     </style>

 </head>

 <body>

 <ul>

     <li >

         <div class="div">

             <img src="sjxq01_boom.jpg">

             <span class="span"></span>

             <div class="show">

                 <img class="show_img" src="sjxq01_boom.jpg">

             </div>

         </div>

     </li>

     <li >

         <div class="div" style="display: none">

             <img src="sjxq3_boom.jpg">

             <span class="span"></span>

             <div class="show">

                 <img class="show_img" src="sjxq3_boom.jpg">

             </div>

         </div>

     </li>

 </ul>

 <script type="text/javascript" src="jquery.min.js"></script><script src="demo.js"></script>

 </body> </html>

js代码：

  $(document).ready(function () {

         (function () {

                      var mouseX,   //鼠标光标X坐标

 　　　　　　　　　　　　 mouseY,

 　　　　　　　　　　　　 divX,   //最外层DIV X坐标

 　　　　　　　　　　　　　divY,

 　　　　　　　　　　　　 spanX,   //放大镜 X坐标

 　　　　　　　　　　　　　spanY,

 　　　　　　　　　　　　　divW,   // 最外层 DIV 宽度

 　　　　　　　　　　　　　divH,　　

 　　　　　　　　　　　　　scrY,  //滚动条卷去的高度

              div = $(".div");

             div.on("mousemove", function (e) {

                 $(this).find(".span").show();

                 $(this).find(".show").show();

                 scrY=document.body.scrollTop||document.documentElement.scrollTop;

                 divW = div.width();

                 divH = div.height();

                 mouseX = e.originalEvent.x || e.originalEvent.layerX || 0;

                 mouseY = e.originalEvent.y || e.originalEvent.layerY || 0;

                 divY = $(this).offset().top;

                 divX = $(this).offset().left;

                 spanX = mouseX - divX - 50;

                 spanY = mouseY - divY - 50+scrY;

                 if ((spanX + 100) > divW) {

                     spanX = 400;

                 }

                 if ((spanY + 100) > divW) {

                     spanY = 400;

                 }

                 if (spanX < 0) {

                     spanX = 0;

                 }

                 if (spanY < 0) {

                     spanY = 0;

                 }

if(mouseX > (divW+divX)){
                     $(this).find(".span").hide();
                     $(this).find(".show").hide();
                  }

                 $(this).find(".span").css('left', spanX).css('top', spanY);

                 $(this).find(".show_img").css("left", -3 * spanX).css('top', -3 * spanY);

             });

             div.on("mouseout", function () {

                 $(this).find(".span").hide();

                 $(this).find(".show").hide();

             });

             div.on("mouseover", function () {

             });

         })();

     });

jQuery实现仿京东商城图片放大镜的更多相关文章

  1. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  2. 完美高仿精仿京东商城手机客户端android版源码

    完美高仿精仿京东商城手机客户端android版源码,是从安卓教程网那边转载过来的,这款应用源码非常不错的,也是一个非常优秀的应用源码的,希望能够帮到学习的朋友. _js_op> <igno ...

  3. 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

    本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...

  4. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  5. 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 京东商城的底部布局的选择效果看上去很复杂,其实很简单,这主要是要 ...

  6. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...

  7. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  9. 17 Flutter仿京东商城项目 保存历史搜索记录 删除历史记录 清空历史记录 长按删除

    Storage.dart import 'package:shared_preferences/shared_preferences.dart'; class Storage{ static Futu ...

随机推荐

  1. #leetcode刷题之路10-正则表达式匹配

    匹配应该覆盖整个字符串 (s) ,而不是部分字符串.说明:s 可能为空,且只包含从 a-z 的小写字母.p 可能为空,且只包含从 a-z 的小写字母,以及字符 . 和 *. 示例 1:输入:s = & ...

  2. mysql学习记录，CASE WHEN THEN ELSE END用法

    记mysql,case when then else end用法 用法1:搜索函数 SELECT r.order_no, r.golds, r.pay_tool, , ) ) END AS price ...

  3. 爬虫——Scrapy框架案例二：阳光问政平台

    阳光热线问政平台 URL地址:http://wz.sun0769.com/index.php/question/questionType?type=4&page= 爬取字段:帖子的编号.投诉类 ...

  4. vue-cli3 vue.config.js 配置

    // cli_api配置地址 https://cli.vuejs.org/zh/config/ module.exports = { baseUrl: './', // 部署应用包时的基本 URL o ...

  5. fastdfs安装过程

    Fastdfs于centos7的安装步骤(支持横向拓展) 主要目的:根据网上教程搭建时遇到的问题以及描述不明确的地方进行补充和说明 一.首先需要准备以下4个文件 nginx-1.12.0.tar.gz ...

  6. 全文检索引擎 sphinx-coreseek中文索引

    Sphinx是一个基于SQL的全文检索引擎,可以结合MySQL,PostgreSQL做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索. Sphinx特别为一些 ...

  7. 常量的三种定义方式和static在c语言中的三种修饰

    c语言的常量在执行期间为固定值,在定义后无法被修改常量可以是任何的数据基本类型,可以为整形,浮点常量,字符和字符串常量1,使用const关键字2, 使用宏定义3,使用枚举常量 枚举: #include ...

  8. app与php后台接口登录认证、验证（seesion和token）

    简要:随着电商的不断发展,APP也层次不穷,随着科技的发展主要登录形式(微信.QQ.账号/密码):为此向大家分享一下"app与php后台接口登录认证.验证"想法和做法:希望能够帮助 ...

  9. 使用JAX-WS(JWS)发布WebService（一）

    JAX-WS概述: 通过Main发布一个简单WebService: JAX-WS(Java API for XML Web Services)规范是一组XML web services的JAVA AP ...

  10. 学习Drupal一个容易被忽视的问题

    刚刚修复了一个问题,一个非常小的问题,但我花了2-3小时才查明原因并修复. 总结下来我忽视了一个非常常见的问题或者没有养成一个好的习惯. 问题现象是:论坛发帖,只有editor以上权限的人可以发帖,也 ...