<!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. Centos安装mysql5.6.33

    下载安装包 百度网盘地址: 链接:https://pan.baidu.com/s/15xaHIqvjggS_rFP_jL-BVA 提取码:mh48 上传到服务器 mkdir mysql   #在/us ...

  2. Linux防火墙设置——iptables

    防火墙用于监控往来流量,并根据用户定义的规则来过滤数据包以保证安全.iptables是Linux下设置防火墙规则的常用工具,它可以让你设置.维护以及查看防火墙的规则表.你可以定义多个表,每个表可以包含 ...

  3. HIVE常用函数(1)聚合函数和序列函数

    SUM--sum(汇总字段) over (partition by 分组字段 order by 排序字段) 如果不指定ROWS BETWEEN,默认为从起点到当前行;如果不指定ORDER BY,则将分 ...

  4. 表格table隔行变色

    if($('.p03-s2').find('table').length >= 2) {$('table:last-child').css({'borderTop': 'none'});}if( ...

  5. java基础方法笔记

    Java环境 1.编译 javac HelloWorld.java 2.运行 java HelloWorld 3.执行class文件 java -classpath C:\java\myclasses ...

  6. Robot Framework：数据库操作

    robotframework 操作数据库,需要安装DatabaseLibrary库 pip install robotframework-databaselibrary Python操作不同的数据库, ...

  7. MySql中创建存储过程

    MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...

  8. Java中连接MySql数据库的例子

    Java中连接MySql数据库的例子: package com.joinmysql.demo; import java.sql.DriverManager; import java.sql.Resul ...

  9. Shell4

    ssh 192.168.4.5>提示continue,连接过的主机不会提示>连接过的主机 文件存放位置:/root/.ssh/known_hosts ################### ...

  10. 装nginx遇到的坑 未完待续

    首装nginx时 server { listen 8066;  监听端口号 server_name localhost;   监听地址 location / goldwind{   root /roo ...