js实现放大镜特效的实例代码-js教程-PHP中文网

js实现放大镜特效的实例代码

零下一度

发布： 2017-06-26 11:54:23

原创

12274人浏览过

放大镜

黑色箭头：

 
var x = e.clientX;//鼠标相对于视口的位置

var y = e.clientY;

红色箭头：

触发式加载精美特效企业网站源码1.0.0

触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也

查看详情

 
var t = bbox.offsetTop;//box相对于视口的位置

var l = bbox.offsetLeft;

橙色箭头：

 
var _left = x - l - bmove.offsetWidth/2;//计算move的位置

var _top = y - t -bmove.offsetHeight/2;

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围：

 
bbox.offsetWidth-bmove.offsetWidth

move块现在的坐标占可移动范围的比例：

 
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例

var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围：

 
b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置：

 
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置

var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

以上就是js实现放大镜特效的实例代码的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript如何操作URL_怎样解析和修改查询参数？ javascript如何实现多线程_Web Worker有哪些使用限制为什么JavaScript的测试是必要的_有哪些流行的测试框架？ javascript中的服务端渲染如何工作_与客户端渲染有何不同 javascript的React Hooks是什么_如何使用useState和useEffect？