js 模拟放大镜的开发
分类专栏: Javascript&
简介 商品详情展示商品的时候需要有一个放大镜的效果。
<p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">Style样式模块</strong></p><pre class="ql-syntax" spellcheck="false"> <style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 800px;
height: 400px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {
position: absolute;
display: block;
width: 800px;
height: 400px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 860px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
</pre><p><br></p><p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">javascript模块</strong></p><p><br></p><pre class="ql-syntax" spellcheck="false"> <script>
//页面加载完毕后执行
window.onload = function () {
var objDemo = document.getElementById("demo");
var objSmallBox = document.getElementById("small-box");
var objMark = document.getElementById("mark");
var objFloatBox = document.getElementById("float-box");
var objBigBox = document.getElementById("big-box");
var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
objMark.onmouseover = function () {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
objMark.onmouseout = function () {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
}
objMark.onmousemove = function (ev) {
var _event = ev || window.event; //兼容多个浏览器的event参数模式
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
// console.log("left", left);
// console.log("top", top);
//设置边界处理,防止移出小图片
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
objFloatBox.style.top = top + "px";
//求其比值
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
console.log('percentX', percentX);
console.log('percentY', percentY);
console.log("offsetWidth", objBigBoxImage.offsetWidth);
console.log("offsetHeight", objBigBoxImage.offsetHeight);
console.log("objBigBoxoffsetWidth", objBigBox.offsetWidth);
console.log("objBigBoxoffsetHeight", objBigBox.offsetHeight);
//方向相反,小图片鼠标移动方向与大图片相反,故而是负值
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
}
</script>
</pre><p><br></p><p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">HTML模块</strong></p><pre class="ql-syntax" spellcheck="false"> <div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img style="width:100%;" src="https://rd.test/media/catalog/product/1/_/1_47_13.jpg"/>
</div>
<div id="big-box">
<img src="https://rd.test/media/catalog/product/1/_/1_47_13.jpg"/>
</div>
</div>
</pre>
分享到:
转载:
https://www.cnblogs.com/zxcjj/p/6603585.html
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
- 点击排行
- 站长推荐
- 猜你喜欢
- Promise All 的批量请求的使用方式
- mysql查询获取数据的同时返回总数
- 一文彻底解决新手对 webpack 的恐惧!&
- 英国电信要求英政府延期移除华为设备,需花费约 40.6 亿元
- Node—requireDirectory实现路由自动加载
- 天谋科技 Timecho 完成近亿元人民币天使轮融资 围绕 Apache IoTDB 打造工业物联网原生时序数据库
- axios请求缓存+防止重复提交
- Vue路由懒加载-prefetch预加载问题
- 美国芯片大涨价且难以交货,消息称欧美部分电信客户已转单联发科、瑞昱等
- 马斯克的头疼事:特斯拉近 90 天离职员工中有 20% 加入了竞争对手公司
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1245天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据