效果图：

不废话直接上代码：

 <!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. 如何编写及运行JS

    JS也是一种脚本语言,他可以有两种方式在HTML页面进行引入,一种是外联,一种是内部.       外联JS的写法为: <script src="相对路径"></ ...

  2. mysql主从延迟复制

    需求描述 正常情况下我们是不会有刻意延迟从库的需求的,因为正常的线上业务自然是延迟越低越好.但是针对测试场景,业务上偶尔需要测试延迟场景下业务是否能正常运行. 解决方案 针对这种场景mysql有一个叫 ...

  3. MySQL必知必会 读书笔记三：检索数据和数据排序

    检索数据 SELECT语句 它的用途是从一个或多个表中检索信息. 为了使用SELECT检索表数据,必须至少给出两条信息--想选择什 么,以及从什么地方选择. 检索单个列 SELECT col_1 FR ...

  4. day 29 socketserver ftp功能的简单讲解

    1.上传下载的简单示例 server: import socket import struct import json   server =socket.socket() server.bind((' ...

  5. TImage保存图片到Stream及从Stream中取图片

    因为一个项目,不得不将图片保存到数据库中,需要的时候再从数据库中读取.初时,以为很简单,不就是一个Stream.事实上,也很简单.度娘一下,代码也很多,但,都是坑! 看一下TImage的源,Pictu ...

  6. Python爬虫系列 - 初探：爬取新闻推送

    Get发送内容格式 Get方式主要需要发送headers.url.cookies.params等部分的内容. t = requests.get(url, headers = header, param ...

  7. 慎用静态类static class

    偶然翻到一篇有趣的帖子: class - When to Use Static Classes in C# - Stack Overflowhttp://stackoverflow.com/quest ...

  8. XNA+WPF solution worked

    Cory Petosky's website Edit 11/17/2010: While this article's XNA+WPF solution worked when I wrote it ...

  9. git忽略项gitegnore配置

    在git中如果想忽略掉某个文件, 不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则 例如 # 此为注释 – 将被 Git 忽略 *.a # ...

  10. ubuntu14.04上安装Java

    apt-get安装 sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get install orac ...