帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 图片放大镜效果插件
图片放大镜效果插件
浏览:674次
-
评论:1次
-
发布时间:2018-01-29
Html
Css
Js
#main { margin:30px; } #main img { width:200px; height:200px; }
window.onload = function() { fangda('main', 120, 100, 'blue', 0.6, 3, 'http://www.sucainiu.com/themes/images/demo/500x500-1.png') } //window.onload 之后图片才加载完,才能获取宽高 var fangda = function(mainId, boxWidth, boxHeight, bgcolor, opacity, multiple, imgsrc) { //获取主容器 var main = document.getElementById(mainId); //获取图片 var img = main.getElementsByTagName('img')[0]; //获取图片宽高,设置给其父容器 var imgW = img.offsetWidth; var imgH = img.offsetHeight; main.style.width = imgW + 'px'; main.style.height = imgH + 'px'; main.style.position = 'relative'; //hidden为了后面的方块在鼠标移出后消失 main.style.overflow = 'hidden'; //动态创建放大的小方块,设置属性,并且添加到main内 var box = document.createElement("div"); box.style.width = boxWidth + 'px'; box.style.height = boxHeight + 'px'; box.style.backgroundColor = bgcolor; box.style.opacity = opacity; //设置绝对定位时,要想起来给其父容器设置相对定位 box.style.position = 'absolute'; box.style.top = 0; box.style.left = 0; box.style.cursor = 'move'; //none是为了一开始隐藏,鼠标移入main再显示 box.style.display = 'none'; main.appendChild(box); //给main添加鼠标移入事件 //移入显示box main.onmouseover = function() { box.style.display = 'block'; showBox.style.display = 'block'; showBox.style.zIndex = 999; } //移出隐藏box main.onmouseout = function() { box.style.display = 'none'; showBox.style.display = 'none'; showBox.style.zIndex = -999; } //设置main的鼠标移动事件,带着box走 //提前获取一些值 //获取main距离左边与顶部的距离 var mainL = main.offsetLeft; var mainT = main.offsetTop; //获取main和box的宽高; var mainW = main.offsetWidth; var mainH = main.offsetHeight; //getComputedStyle(box).width获取到的是带有单位px的值,需要转化为整数 var boxW = parseInt(getComputedStyle(box).width); var boxH = parseInt(getComputedStyle(box).height); //动态创建显示的容器以及其内的图片,为了使用mainL等已经获取的值 //并且设置其属性 var showBox = document.createElement("div"); showBox.style.width = boxWidth * multiple + 'px'; showBox.style.height = boxHeight * multiple + 'px'; showBox.style.position = 'fixed'; showBox.style.left = (mainL + mainW + 5) + 'px'; showBox.style.top = mainT + 'px'; showBox.style.overflow = 'hidden'; showBox.style.display = 'none'; showBox.style.zIndex = -999; //创建图片 var showImg = document.createElement("img"); if (imgsrc == '') { showImg.src = img.src; } else { showImg.src = imgsrc; } showImg.style.width = imgW * multiple + 'px'; showImg.style.height = imgH * multiple + 'px'; showImg.style.position = 'absolute'; //把图片添加到showBox内, showBox.appendChild(showImg); //再把showBox添加到body内 document.getElementsByTagName('body')[0].appendChild(showBox) main.onmousemove = function(event) { //获取鼠标位置 var x = event.pageX; var y = event.pageY; //把获取box的宽高放在显示之后才能获取到,若想在之前获取,用getComputedStyle(box).width // var boxW = box.offsetWidth; // var boxH = box.offsetHeight; //对box的left和top进行赋值 //赋值前进行判断。让box不能超出main范围 var left = x - mainL - boxW / 2; var top = y - mainT - boxH / 2; if (left <= 0) { left = 0; } if (top <= 0) { top = 0; } if (left >= mainW - boxW) { left = mainW - boxW; } if (top >= mainH - boxH) { top = mainH - boxH; } box.style.left = left + 'px'; box.style.top = top + 'px'; //根据放大倍数设置showImg的位置 showImg.style.left = -left * multiple + 'px' showImg.style.top = -top * multiple + 'px'; } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>图片放大镜效果插件-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:先获取容器宽高,再获取鼠标四周
返回距离当前之前N个月对象
canvas绘制背景动画效果
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv7 码师
18***83
2018年02月07日
谢谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
674
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值