<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             #smallImg {

                 position: absolute;

                 left: 50px;

                 top: 100px;

             }

             #smallImg, #smallImg img {

                 width: 200px;

                 height: 200px;

             }

             #smallArea {

                  display: none;

                  width: 50px; height: 50px; background: rgba(200, 222,111, 0.3);

                  position: absolute; left: 50px; top: 0;

             }

             #bigArea {

                  display: none; overflow: hidden;

                  width: 300px; height: 300px; background: rgba(200,111,222,0.3);

                  position: absolute; left: 300px; top: 100px;

             }

             #bigImg {

                 width: 800px; height: 800px;

                 position: absolute; left: 0; top: 0;

             }

         </style>

         <script type="text/javascript" src="js/jquery-1.12.3.js" ></script>

         <script>

             $(function(){

                 //等比公式

                 //小图width/大图width == 小区域width/大区域width

                 $("#smallArea").width( $("#smallImg").width() * $("#bigArea").width() / $("#bigImg").width() );

                 $("#smallArea").height( $("#smallImg").height() * $("#bigArea").height() / $("#bigImg").height() );

                 //放大系数

                 var scale = $("#bigImg").width() / $("#smallImg").width();

                 //在小图中移动

                 $("#smallImg").mousemove(function(e){

                     $("#smallArea").show(); //显示小区域

                     $("#bigArea").show(); //显示大区域

                     var x = e.pageX - $("#smallImg").offset().left - $("#smallArea").width()/2;

                     var y = e.pageY - $("#smallImg").offset().top - $("#smallArea").height()/2;

                     //控制不超出左右边界

                     if (x < 0){

                         x = 0;

                     }

                     else if (x > $("#smallImg").width()-$("#smallArea").width()){

                         x = $("#smallImg").width()-$("#smallArea").width();

                     }

                     //控制不超出上下边界

                     if (y < 0){

                         y = 0

                     }

                     else if (y > $("#smallImg").height()-$("#smallArea").height()) {

                         y = $("#smallImg").height()-$("#smallArea").height();

                     }

                     //小区域移动

                     $("#smallArea").css({left:x, top:y});

                     //大图移动

                     $("#bigImg").css({left: -scale*x,top: -scale*y});

                 })

                 //移除小图

                 $("#smallImg").mouseleave(function(){

                     $("#smallArea").hide(); //隐藏小区域

                     $("#bigArea").hide(); //隐藏大区域

                 })

             })

         </script>

     </head>

     <body>

         <div id="smallImg">

             <img src="data:images/星际穿越.jpg" />

             <div id="smallArea"></div>

         </div>

         <div id="bigArea">

             <img id="bigImg" src="data:images/星际穿越.jpg" />

         </div>

     </body>

 </html>

jq-demo-放大镜的更多相关文章

  1. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. jq demo 简单的图片懒加载效果

    重点:在元素进入可视区域后,把图片元素的 _src 的值,赋值给 src <!DOCTYPE HTML> <html> <head> <meta http-e ...

  4. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. jq demo—图片翻页展示效果 animate()动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Magnifier笔记

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

  10. Nanui 教程

    彩票自动投注软件定制-联灬系-\加/Q;2943075966 黑/科/技问/世.详情直接添加咨询.信/誉/文本 最近接到一个项目 是关于构建一套 电脑端会员管理系统    但考虑到个人比较喜欢写Web ...

随机推荐

  1. clip-path 加边框border

    最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层 ...

  2. LINUX搭建网站环境教程

    安装Mysql yum install mysql-server -y 启动Mysql service mysqld restart 此实验使用 mysql 默认账户名和密码,您也可以设置自己的 My ...

  3. 知识点整理01- 引用对象被子方法赋值后不改变；CheckBox 取消选择不可用问题

    1. Class 实体是引用类型,但传入方法时是null的情况在子方法中不论怎么赋值当 FirstService.SetPerson(person,ref tempMsg); 执行后Person都是n ...

  4. 微信小程序のwxs语言

    一.wxs介绍 wxs是微信小程序自身的脚本语言,用来过滤和计算.wxs可以通过文件可模块标签来定义 文件需要.wxs后缀文件 二.实例 <wxs module="test1" ...

  5. leetcood学习笔记-27-移除元素

    题目: 第一次提交: class Solution: def removeElement(self, nums, val: int) -> int: for i in range(len(num ...

  6. leetcood学习笔记-13

    错误记录 class Solution: def romanToInt(self, s: str) -> int: d = {'I':1,'V':5,'X':10,'L':50,'C':100, ...

  7. 二维差分前缀和——cf1202D(好题）

    直接枚举每个点作为左上角是可以做的,但是写起来较麻烦 有一种较为简单的做法是对一列或一行统计贡献 比如某一行的B存在的区间是L,R那么就有三种情况 1.没有这样的区间,即一行都是W,此时这行对答案的贡 ...

  8. Html加水印和禁用复制和右键（jquery.watermark.js）

    近期遇到一个需求,需要在页面背景加上自己的水印和禁止用户在页面复制粘贴 解决: 水印使用的是jquery.watermark.js插件,这个插件可以在html背景上加水印,同时可以设置相关属性值. 相 ...

  9. php开发面试题---创建型设计模式1（创建型设计模式有哪几种）

    php开发面试题---创建型设计模式1(创建型设计模式有哪几种) 一.总结 一句话总结: 共五种:(简单工厂模式).工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 1.学设计模式最好的方 ...

  10. CSS：CSS 背景

    ylbtech-CSS:CSS 背景 1.返回顶部 1. CSS 背景 CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background ...