帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery图片放大镜效果
jQuery图片放大镜效果
浏览:713次
-
评论:0次
-
发布时间:2020-02-27
Html
Css
Js
* { margin:0; padding:0; } .box { width:350px; height:350px; margin:100px; border:1px solid #ccc; position:relative; } .big { width:400px; height:400px; position:absolute; top:0; left:360px; border:1px solid #ccc; overflow:hidden; display:none; } .mask { width:175px; height:175px; background:rgba(255,255,0,0.4); position:absolute; top:0; left:0; cursor:move; display:none; } .small { position:relative; } img { vertical-align:top; }
window.onload = function() { //需求:鼠标放到小盒子上,让大盒子里面的图片和我们同步等比例移动。 //技术点:onmouseenter== 第一个不冒泡 //技术点:onmouseleave==onmouseout 第一个不冒泡 //步骤: //1.鼠标放上去显示盒子,移开隐藏盒子。 //2.老三步和新五步(黄盒子跟随移动) //3.右侧的大图片,等比例移动。 //0.获取相关元素 var box = document.getElementsByClassName("box")[0]; var small = box.firstElementChild || box.firstChild; var big = box.children[1]; var mask = small.children[1]; var bigImg = big.children[0]; //1.鼠标放上去显示盒子,移开隐藏盒子。(为小盒子绑定事件) small.onmouseenter = function() { //封装好方法调用:显示元素 show(mask); show(big); } small.onmouseleave = function() { //封装好方法调用:隐藏元素 hide(mask); hide(big); } //2.老三步和新五步(黄盒子跟随移动) //绑定的事件是onmousemove,而事件源是small(只要在小盒子上移动1像素,黄盒子也要跟随) small.onmousemove = function(event) { //想移动黄盒子,必须知道鼠标在small中的位置。x作为mask的left值,y作mask的top值。 //新五步 event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX; var pagey = event.pageY || scroll().top + event.clientY; //让鼠标在黄盒子最中间,减去黄盒子宽高的一半 var x = pagex - box.offsetLeft - mask.offsetWidth / 2; var y = pagey - box.offsetTop - mask.offsetHeight / 2; //限制换盒子的范围 //left取值为大于0,小盒子的宽-mask的宽。 if (x < 0) { x = 0; } if (x > small.offsetWidth - mask.offsetWidth) { x = small.offsetWidth - mask.offsetWidth; } //top同理。 if (y < 0) { y = 0; } if (y > small.offsetHeight - mask.offsetHeight) { y = small.offsetHeight - mask.offsetHeight; } //移动黄盒子 console.log(small.offsetHeight); mask.style.left = x + "px"; mask.style.top = y + "px"; //3.右侧的大图片,等比例移动。 //如何移动大图片?等比例移动。 // 大图片/大盒子 = 小图片/mask盒子 // 大图片走的距离/mask走的距离 = (大图片-大盒子)/(小图片-黄盒子) // var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth); //大图片走的距离/mask盒子都的距离 = 大图片/小图片 var bili = bigImg.offsetWidth / small.offsetWidth; var xx = bili * x; var yy = bili * y; bigImg.style.marginTop = -yy + "px"; bigImg.style.marginLeft = -xx + "px"; } } //显示和隐藏 function show(ele) { ele.style.display = "block"; } function hide(ele) { ele.style.display = "none"; } //缓动动画封装 function animate(ele, target) { clearInterval(ele.timer); ele.timer = setInterval(function() { var step = (target - ele.offsetTop) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); ele.style.top = ele.offsetTop + step + "px"; console.log(1); if (Math.abs(target - ele.offsetTop) < Math.abs(step)) { ele.style.top = target + "px"; clearInterval(ele.timer); } }, 25); } /** * Created by andy on 2015/12/8. */ function scroll() { // 开始封装自己的scrollTop if (window.pageYOffset != null) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } } /** * Created by Lenovo on 2016/9/2. */ /** * 通过传递不同的参数获取不同的元素 * @param str * @returns {*} */ function $(str) { var str1 = str.charAt(0); if (str1 === "#") { return document.getElementById(str.slice(1)); } else if (str1 === ".") { return document.getElementsByClassName(str.slice(1)); } else { return document.getElementsByTagName(str); } } /** * 功能:给定元素查找他的第一个元素子节点,并返回 * @param ele * @returns {Element|*|Node} */ function getFirstNode(ele) { var node = ele.firstElementChild || ele.firstChild; return node; } /** * 功能:给定元素查找他的最后一个元素子节点,并返回 * @param ele * @returns {Element|*|Node} */ function getLastNode(ele) { return ele.lastElementChild || ele.lastChild; } /** * 功能:给定元素查找他的下一个元素兄弟节点,并返回 * @param ele * @returns {Element|*|Node} */ function getNextNode(ele) { return ele.nextElementSibling || ele.nextSibling; } /** * 功能:给定元素查找他的上一个兄弟元素节点,并返回 * @param ele * @returns {Element|*|Node} */ function getPrevNode(ele) { return ele.previousElementSibling || ele.previousSibling; } /** * 功能:给定元素和索引值查找指定索引值的兄弟元素节点,并返回 * @param ele 元素节点 * @param index 索引值 * @returns {*|HTMLElement} */ function getEleOfIndex(ele, index) { return ele.parentNode.children[index]; } /** * 功能:给定元素查找他的所有兄弟元素,并返回数组 * @param ele * @returns {Array} */ function getAllSiblings(ele) { //定义一个新数组,装所有的兄弟元素,将来返回 var newArr = []; var arr = ele.parentNode.children; for (var i = 0; i < arr.length; i++) { //判断,如果不是传递过来的元素本身,那么添加到新数组中。 if (arr[i] !== ele) { newArr.push(arr[i]); } } return newArr; }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery图片放大镜效果-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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jquery商品预览图片放大镜效果
Table实现下滑表头悬浮在页面顶部效果
打字机打印每个文字效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
713
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值