js实现图片放大并跟随鼠标移动特效

图片跟随鼠标移动并放大射流研究…特效，供大家参考，具体内容如下

很多网站有类似于淘宝放大镜的效果，只不过这里说的是"不仅能直接放大，而且会跟随鼠标移动" !类似于“DEDECMS”官网的案例中心的效果！

本案例代码，效果图，代码，参考如下：

射流研究…代码：

脚本/展示函数showBigPic(文件路径){ //将文件路径传给图片大图文件。getelementbyid(' BigPic ').src=filepath/获取大图差异是否存在var div=文档。getelementbyid(' BigPicView ')；if(！div){ return；} //如果存在则展示文件。getelementbyid(' BigPicView ')。风格。display=' block//获取鼠标坐标var intX=window。事件。客户x；var intY=window。事件。客户关系；//设置大图左上角起点位置div。风格。left=IntX 10 ' pxdiv。风格。top=Inty 10 ' px} //隐藏函数closeimg(){ document。getelementbyid(' BigPicView ')。风格。显示='无'；}/脚本可以封装为射流研究…插件：showBigPic.js

超文本标记语言代码：

！DOCTYPE html html heartheta charset=' utf-8 '/title图片放大显示并跟随鼠标移动/title脚本src=' http : js/ShowBigPic。js '/脚本/头体H3图片放大显示并跟随鼠标移动/H3 HR/div id=' bipicwrap ' img src=' http : images/01。jpg ' width=' 300 px ' onmousemove=' showbipic(this。src)' onmouseout=' closeimg()'/br/img src=' http : images/02。jpg ' width=' 300 px ' onmousemove=' showbipic(this。src)' onmouseout=' closeimg()'/h3display : none ' img src=' http : ' width=' 600 px ' id=' big pic '/br///div/body/html使用说明：

1.无需引入jquery。量滴js；2.已经封装为：多大图。js；3.使用时：只需要设置a.对应的编号选择器；b.鼠标悬停事件；c.鼠标离开事件；4.合理设置放大尺寸：如果位于页面最顶部和最底部图片的放大效果，部分会被视图窗口遮盖，那么只需要鼠标滚轮即可查看放大的全图。5.经实际测试，好的！

以上就是关于"图片跟随鼠标移动并放大射流研究…特效"的全部内容。

希望对大家的学习有所帮助，也希望大家多多支持我们。