京东
放大镜效果
实现放大镜主要知识点
javascript中DOM操作。
javascript中时间的获取,主要有mouseenter、mouseleave、以及当鼠标在照片上移动的时候onmousemove事件以及其中的事件对象中的属性clientY,clientX,还有获取元素宽度offsetWidth、offsetHight等。
这里面好考虑到绝对定位,以及放大倍率的计算,里面用到的倍率计算公式(小框里面的放大区域面积/小框面积)=(大框的面积/大筐里的大照片的面积)//大照片的原理是将其放在大框里,将大框的css样式设置为overflow:hidden,这样可以将你小筐里的区域按比例显示在大框里面。
具体代码实现情况如下
这样就可以实现放大效果啦,希望这些能对对大家有所帮助。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
jQuery仿京东商城图片变亮变暗效果
jQuery仿京东商城图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮,兼容主流浏览器。
下载
推荐阅读:
JS的设计模式之构造函数模式详解
前端为什么要使用模块化?
web前端关于浏览器兼容性问题的解决方案
放大镜
//记得将其设置与小框大小一致
