php 放大镜代码,JavaScript实现简单放大镜效果代码

本文主要和大家介绍了原生JavaScript实现的简单放大镜效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。

原理：其实所谓的放大就是准备两张一样的图片，除大小不一样。鼠标移动到不同位置，将会显示大图片对应的图片内容。

完整代码：

放大镜效果

var filter = document.getElementById('filter');

var smallImg = document.getElementById('smallImg');

var bigImg = document.getElementById('bigImg');

var wrap = document.getElementById('wrap');

var largeImgs = bigImg.getElementsByTagName('img')[0];

smallImg.onmouseover = function(){

bigImg.style.display = "inline-block";

filter.style.display = "inline-block";

}

smallImg.onmousemove = function(event){

var event = event || window.event;

var mouseleft = event.clientX - wrap.offsetLeft;

var mousetop = event.clientY - wrap.offsetTop;

var left = mouseleftsmallImg.offsetWidth*3/4?smallImg.offsetWidth/2:(mouseleft - filter.offsetWidth/2);

var top = mousetopsmallImg.offsetHeight*3/4?smallImg.offsetHeight/2:(mousetop - filter.offsetWidth/2);

filter.style.left = left + "px";

filter.style.top = top +"px";

largeImgs.style.left = "-" +　left*bigImg.offsetWidth/smallImg.offsetWidth + "px";

largeImgs.style.top = "-" +　top*bigImg.offsetHeight/smallImg.offsetHeight + "px";

}

smallImg.onmouseout = function(){

bigImg.style.display = "none";

filter.style.display = "none";

}

运行效果：

php 放大镜代码,JavaScript实现简单放大镜效果代码相关推荐

js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
九宫格抽奖源代码php,原生javascript实现九宫格抽奖效果代码
本篇文章主要介绍了原生javascript实现九宫格抽奖效果代码.具有很好的参考价值.下面跟着小编一起来看下吧效果图: 代码如下: *{margin:0;padding:0;} #container ...
html放大镜效果代码,js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大 ...
php活动倒计时代码,JavaScript实现活动倒计时效果的代码分享
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js倒计时效果的具体代码,供大家参考 ...
php 漂浮广告代码,JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广 ...
html 开关按钮 js代码,JavaScript实现开关等效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: 开关灯 html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cu ...
html桌面倒计时代码,JavaScript实现简单的数字倒计时
这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下: runCount(10); function runCount(t){ if(t>0){ ...
ajax 示例代码,Ajax的简单实用实例代码
我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在UsersAction类中的checkUser方法中接收并验证前台的表单数据,针对不同情况,返回一个状态码cod ...
php ajax简单实例代码,Ajax的简单实用实例代码
这篇文章主要介绍了Ajax的简单实用实例代码,对ajax感兴趣的朋友可以参考下Ajax的简单实用的方法我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在User ...

php 放大镜代码,JavaScript实现简单放大镜效果代码

php 放大镜代码,JavaScript实现简单放大镜效果代码相关推荐

最新文章

热门文章