图片放大镜

用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

由 泪湿孤枕 提交于 2019-12-07 02:17:42
本文转载于: 猿2048 网站 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果 1.前言 CSS3 的出现解决了很多让人头疼的问题，至少我想很多童鞋都这样认为。 css3 的cursor属性大家用的应该是非常的多的，我想用的比较多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就来讲一下这两个属性值的用法。 2.简介 cursor的定义和用法 　　 cursor属性规定要显示的光标和类型（形状）。定义了鼠标指针放在一个元素边界范围内时所用的光标形状。默认值是auto;大部分常用的值有以下： crosshair 十字准心 pointer;hand（IE5只认识hand） 手形状 wait 等待（沙漏） help 帮助 no-drop 无法释放 text 文本/编辑 move 可移动对象 n-resize 向上改变大小 s-resize 向下改变大小 e-resize 向右改变大小 w-resize 向左改变大小 ne-resize 向上右改变大小 nw-resize 向上基改变大小 sw-resize 向下左改变大小 se-resize 向下右改变大小 auto 自动 not-allowed 禁止 progress 处理中 default 默认

使用原生JS实现图片放大镜效果

由 耗尽温柔 提交于 2019-11-29 08:55:44
前提先了解数学算法： 求遮罩层mask宽度 大图、大图显示区、小图、遮罩层 1、小图是大图等比缩放的 2、遮罩层是大图显示区缩放的 小图/大图 = 遮罩层/大图显示区 遮罩层 = 大图显示区*(小图/大图); ------------------------------------------------ 大图活动区 = 大图-大图显示区 小图活动区 = 小图-遮罩层 遮罩层偏移量/小图活动区 = 大图偏移量/大图活动区 大图偏移量 = 大图活动区*(遮罩层偏移量/小图活动区) 大图偏移量 = (大图-大图显示区)*(遮罩层偏移量/(小图-遮罩层)) 分解动作： 1、布局 2、计算遮罩层宽高度 3、为small绑定移入移出事件处理 4、为small绑定鼠标移入事件处理 4.1、计算mask的偏移量 (e.clientX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2) 4.2、规定mask的最大最小偏移量 4.3、计算大图偏移量(参照公式) 注意事项： 1、鼠标移入和鼠标移动事件应该加给small 2、offsetX/offsetY 值不准确，应该使用clientX/clientY代替 效果： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果

由 柔情痞子 提交于 2019-11-29 07:43:48
本文转载于: 猿2048 网站 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果 1.前言 CSS3 的出现解决了很多让人头疼的问题，至少我想很多童鞋都这样认为。 css3 的cursor属性大家用的应该是非常的多的，我想用的比较多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就来讲一下这两个属性值的用法。 2.简介 cursor的定义和用法 　　 cursor属性规定要显示的光标和类型（形状）。定义了鼠标指针放在一个元素边界范围内时所用的光标形状。默认值是auto;大部分常用的值有以下： crosshair 十字准心 pointer;hand（IE5只认识hand） 手形状 wait 等待（沙漏） help 帮助 no-drop 无法释放 text 文本/编辑 move 可移动对象 n-resize 向上改变大小 s-resize 向下改变大小 e-resize 向右改变大小 w-resize 向左改变大小 ne-resize 向上右改变大小 nw-resize 向上基改变大小 sw-resize 向下左改变大小 se-resize 向下右改变大小 auto 自动 not-allowed 禁止 progress 处理中 default 默认
订阅 图片放大镜