Image magnifier
来源:互联网 发布:淘宝二类医疗器械申请 编辑:程序博客网 时间:2024/05/21 04:18
Scenario
If you want to look the product carefully on Tmall or JingDong, you will move your mouse point(or tap on smartphone) over the images on the product detail page, and then a larger and clearer image will appear and just show the part of image where your mouse is pointing at in detail. This is the image magnifier on web, a smart way to show the detail part of the product. You may find it helpful when you are going to build up a website for shopping next time.
Implementation
<div class="small"></div><div class="big"></div><style> .small { float: left; height: 200px; width: 300px; background: url("a.jpg"); background-size: cover; } .big { display: none; position: relative; height: 200px; width: 300px; background: url("a.jpg"); background-size: 900px 600px; background-repeat: no-repeat; }</style><script> function setup() { var small = document.querySelector(".small"); var big = document.querySelector(".big"); small.addEventListener("mousemove", function(event) { console.log(event); var x = event.offsetX * 3 - 150; var y = event.offsetY * 3 - 100; if (x < 0) { x = 0; } else if (x > 600) { x = 600; } if (y < 0) { y = 0; } else if (y > 400) { y = 400; } big.style.backgroundPosition = "-" + x + "px -" + y + "px"; big.style.display = "block"; }); small.addEventListener("mouseout", function(event) { big.style.display = "none"; }); } setup();</script>
Result
When you move your mouse over the image, you will see that another image showing up to exactly display the region with your mouse as the center, but at a larger scale. And when you move the mouse out, the detailed image will hide. It works as a handy magnifier, when you want to inspect, it show up and display the content larger, and when you move out it will disappear.
Explanation
- Image magnifier
- OpenGL 放大器(Cocos2d magnifier)
- android 放大镜 Magnifier 简单实现
- Magnifier with ArcGISDynamicMapServiceLayer 放大镜 动态图层
- Disable auto select after clicking magnifier
- JavaScript放大镜插件magnifier实现图像放大效果
- Image
- Image
- Image
- Image
- image
- image
- image
- image
- Image$$
- Image
- image
- image
- Lintcode55 Compare Strings solution 题解
- kotlin在Android studio3.0上的配置问题
- java 创建多线程两种方法比较
- finalize的作用
- 仿QQ侧滑效果
- Image magnifier
- Shell echo命令
- java用poi实现对word读取和修改操作
- order by与group by区别
- 【原】MIT在线课程学习笔记之《Introduction to C Memory Management and C++ Object-Oriented Programming》
- 深入理解java虚拟机读书笔记(二): 运行时数据区域
- Oracle SQL分析函数lag、lead解决相邻记录比较问题
- 关于算法
- 474. Ones and Zeroes