jquery实现放大镜简单方法
网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>放大镜效果</title> <style type= "text/css" > * { margin: 0; padding: 0; } .small { margin-left:40px; margin-top:50px; width: 150px; height: 150px; /*border: 2px solid yellow;*/ } .small>img { width: 150px; height: 150px; } .slider { width: 50px; height: 50px; background: rgba(180,180,135,0.3); position: absolute; display: none; } #big { //设置为固定大小; width: 200px; height: 200px; position: absolute; /* border: 2px solid red;*/ overflow: hidden; display: none; } </style> </head> <body> <!--缩略图--> <p class = "small" > <img src= "thumb.jpg" /> <!--放大镜,在原图不上的小块--> <p class = "slider" ></p> </p> <!--放大镜区域,大图,设置为none隐藏--> <p id= "big" > <img id= "bigImg" src= "big.jpg" /> </p> even.clientX<input type= "text" value= "0" id= "test" /><br/> even.clientY<input type= "text" value= "0" id= "test1" /> <script type= "text/javascript" src= "jquery-1.7.2.min.js" ></script> <script type= "text/javascript" > var small = $( ".small" )[0]; var slider = $( ".slider" )[0]; var big = document.getElementById( "big" ); //试一试js获取 var bigImg = document.getElementById( "bigImg" ); //让slider跟随鼠标移动.给小的方块绑定事件 $( ".small" ).mousemove( function (e) { var even = e || event; //兼容火狐浏览器 var x = even.clientX - small.offsetLeft - slider.offsetWidth/2; var y = even.clientY - small.offsetTop - slider.offsetHeight/2; //测试even.clientX和even.clientY $( "#test" ).val(even.clientX); $( "#test1" ).val(even.clientY); //水平方向的最大值 var maxX = small.clientWidth - slider.clientWidth; //竖直方向的最大值 var maxY = small.clientHeight - slider.clientHeight; if (x<0){ //相当于超出左侧,超出左侧时,拉回 x=0; } //超出右侧时拉回 if (x>maxX){ x = maxX; } //顶部超出 if (y<0){ y=0; } //底部超出 if (y>maxY){ y = maxY; } slider.style.top = (y+small.offsetTop) + "px" ; slider.style.left = (x+small.offsetLeft) + "px" ; //放大的图片的主要实现代码:比例计算, big.scrollLeft是id=big的p中下方滚轴的位置 //由于id=big的p设置成固定大小,而图片又非常大,所以这个p就像个放大镜一样在大图上晃 //比例计算很简单,鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比,现在未知数是大图鼠标的位置 big.scrollLeft = x/maxX * (bigImg.clientWidth - big.clientWidth) ; big.scrollTop = y/maxY * (bigImg.clientHeight -big.clientHeight) ; }); //鼠标移入事件 $( ".small" ).mouseenter( function (){ //鼠标移入到缩略图时候实现,上面出现的小的方块 $( ".slider" ).css( "display" , "block" ); $( "#big" ).css( "top" ,small.offsetTop+ "px" ); //隐藏的大图=获取左图的左边位置+宽度+10(隔开点缝隙与缩略图)+px big.style.left = small.offsetLeft + small.offsetWidth + 10 + "px" ; //右侧的大图区域显示出来图片 $( "#big" ).css( "display" , "block" ); }); //移除事件 //添加鼠标移出事件,鼠标移出缩略图的时候 $( ".small" ).mouseleave( function (){ $( ".slider" ).css( "display" , "none" ); $( "#big" ).css( "display" , "none" ); }); </script> </body> </html> |
相关推荐:
jquery实现放大镜简单方法的更多相关文章
- JS去掉首尾空格 简单方法大全(原生正则jquery)
JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...
- jQuery插件实现的方法和原理简单说明
下文来自 http://www.itzhai.com/jquery-plug-ins-to-achieve-the-methods-and-principles-of-simple-instructi ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery常用函数与方法
1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目.jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队 ...
- chm转换为html的超简单方法
在Windows下chm转换为html的超简单方法(反编译CHM文件的方法) 通过调用Windows命令,将chm 文件转换为html 文件. 方法: 命令行(cmd),输入hh -decompile ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- magento jQuery冲突N种方法
在做修改模板的时候在page中加入jquery库发现原本自带的js冲突 商品无法加入购物车,很多js都没有效果 这是jQuery和magento自带prototype的冲突解决版本有很多种,说个简单点 ...
- jquery中的clone()方法使用
clone([Even[,deepEven]]) 描述: 克隆匹配的DOM元素并且选中这些克隆的副本. 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用. 1:一个布尔值(true 或者 ...
- JQuery asp.net 简单入门
1.A标签 <a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a> <a href ...
随机推荐
- Linux 进程通信之:内存共享(Shared Memory)(转,好文章)
https://blog.csdn.net/afei__/article/details/84188548
- loj2542 「PKUWC2018」随机游走 MinMax 容斥+树上高斯消元+状压 DP
题目传送门 https://loj.ac/problem/2542 题解 肯定一眼 MinMax 容斥吧. 然后问题就转化为,给定一个集合 \(S\),问期望情况下多少步可以走到 \(S\) 中的点. ...
- Boyer-Moore
Boyer-Moore 只做这些失败的匹配,就可以排除掉相应的对齐位置.在BM算法中,模式串P与文本串T的对准位置依然自左向右移动,而在对准位置确是自右向左的逐一比对各个字符串,具体的,在每一轮自右向 ...
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA AES RSA AES 混合加密 整合 前言: 为了提高安全性采用了RS ...
- [CSP-S模拟测试]:physics(二维前缀和+二分+剪枝)
题目传送门(内部题26) 输入格式 第一行有$3$个整数$n,m,q$.然后有$n$行,每行有一个长度为$m$的字符串,$+$表示正电粒子,$-$表示负电粒子.然后有$q$行,每行$2$个整数$x,y ...
- (转)Docker network命令
转:https://blog.csdn.net/gezhonglei2007/article/details/51627821 原文地址:https://docs.docker.com/engine/ ...
- Java学习之包
一.包:就是类的命名空间(在文件系统中的表现形式就是文件夹) 二.代码编写规则 1.写在程序文件的第一行 2.格式:package 包名[.包名1.包名2......] 类的全名称 包名.类名 例如: ...
- Php 单元测试 phpunit && codecept
Php 单元测试 phpunit && codecept phpunit: Windows版本 整体上说,在 Windows 下安装 PHAR 和手工在 Windows 下安装 Com ...
- Linux系统CPU占用率较高问题排查思路
作为 Linux 运维工程师,在日常工作中我们会遇到 Linux服务器上出现CPU负载达到100%居高不下的情况,如果CPU 持续跑高,则会影响业务系统的正常运行,带来企业损失. 很多运维的同学遇到这 ...
- Mac-如何安装apk到android手机
将电脑上的apk安装到手机,Windows系统可以使用usb连接Android手机,然后打开编辑手机中的文件,直接粘贴apk到手机上安装apk.对于Mac来说就没有那么简单啦.那么Mac如何将apk安 ...