原生js实现放大镜效果
今天做任务的时候，有一个任务就是让实现电商网站常用的放大镜效果，类似于这样的
效果，之前并没有做过这种放大镜效果，刚开始的思路是对图片进行裁剪，但是后来发现实在是难以实现，于是求助了万能的谷歌，发现一个很好的思路就是，展示区是一小块可视区域，给他一个图片，超出可视区域的部分设为隐藏，有了这个思路，这个效果就能够很好的实现了，先看一下HTML结构！
<div id="pic_wrap">
<div id="float_box"></div>
<img src="1.jpg">
</div>
<div id="show">
<img src="1.jpg" id="big_img">
</div>
最外层的两个div，分别是商品原始图片区域，和放大后的可视区域！id为float_box的区域为放大镜所示的区域！第一个img为商品图片，第二个img为预留的放大后的商品！图片CSS代码如下！
img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(1.jpg);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
background-color: white;
opacity:;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}
HTML和CSS写好之后，就要利用js给放大镜加一些交互效果！
第一步，当鼠标移入的时候，放大镜能够显示出来！需要加onmouseover事件。
第二步，当鼠标没有移除，且鼠标在图片内不停地移动， 需要加onmousemove事件。
第三步，当鼠标完全移除后，需要加onmouseout事件。
第四步，onmouseover事件需要让放大镜和可视窗口显示出来。
第五步，onmousemove事件，让放大镜和可视窗口中的图片同时移动。
第六步，onmouseout时间，让放大镜和可是窗口消失！
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*body {
margin: 0;
padding: 0;
}*/
img {
width: 250px;
height: 150px;
}
#pic_wrap {
position: relative;
width: 250px;
height: 150px;
}
#float_box {
width: 100px;
height: 100px;
background-color: green;
filter: opacity(alpha: 30);
opacity: 0.3;
position: absolute;
display: none;
}
#big_img {
background-image: url(1.jpg);
height: 450px;
width: 750px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#show {
width: 300px;
height: 300px;
background-color: white;
opacity: 1;
filter: opacity(alpha:1);
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div id="pic_wrap">
<div id="float_box"></div>
<img src="1.jpg">
</div>
<div id="show">
<img src="1.jpg" id="big_img">
</div>
<script src="等比放大镜.js"></script>
<script type="text/javascript">
var pic_wrap = document.getElementById('pic_wrap'),
float_box = document.getElementById("float_box"),
show = document.getElementById('show');
big_img = document.getElementById("big_img");
//鼠标移入事件，让放大镜和放大区显示！
pic_wrap.onmouseover = function() {
float_box.style.display = "block";
show.style.display = "block";
}
//鼠标不断移动时触发，实时更新放大镜得到的图片
pic_wrap.onmousemove = function(event) {
floatMove(float_box, pic_wrap, event);
showPic();
}
//鼠标移出后，放大镜和放大区隐藏
pic_wrap.onmouseout = function() {
float_box.style.display = "none";
show.style.display = "none";
}
//由于offset方法包括边框，在使用的时候很容易出现问题，所以用style来实时获取attr！
function getStyle(obj, attr) {
if (window.currentStyle) {
return parseInt(obj.currentStyle[attr]);
}
else {
return parseInt(getComputedStyle(obj,null)[attr]);
}
}
//运动框架，控制放大镜在原图中的位置！
function floatMove(argu1, argu2, event) {
var e = event ||window.event;
var minLeft = getStyle(argu1, "width");
var maxLeft = getStyle(argu2, "width") - minLeft/2;
var minHeight = getStyle(argu1, "height");
var maxHeight = getStyle(argu2, "height") - minHeight/2;
console.log(maxLeft);
console.log(maxLeft - minLeft/2);
if (e.clientX < minLeft/2) {
float_box.style.left = "0px";//防止放大镜超出左边框
}
else if (e.clientX > maxLeft) {
float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大镜超出右边框
}
else {
float_box.style.left = event.clientX - minLeft/2 + "px"; //放大镜完全在图片内时正常移动
}
if (e.clientY < minHeight/2) {
float_box.style.top = "0px"; //防止放大镜超出上边框
}
else if (e.clientY > maxHeight) {
float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大镜超出下边框
}
else {
float_box.style.top = event.clientY - minLeft/2 + "px";
}
}
//用来显示放大镜得到的图片，利用坐标计算！实时更新可视区域
function showPic() {
var iCurLeft = getStyle(float_box,"left");
var iCurTop = getStyle(float_box,"top");
var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
var b = getStyle(big_img,"width") - getStyle(show,"width");
var moveWidth = -(iCurLeft/a)*b;
big_img.style.left = moveWidth + "px";
var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
var d = getStyle(big_img,"height") - getStyle(show,"height");
var moveHigth = -(iCurTop/c)*d;
big_img.style.top = moveHigth + "px";
}
</script>
</body>
</html>
原生js实现放大镜效果的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生js实现的效果
原生js实现tooltip提示框的效果 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...
- 原生js仿jquery--animate效果
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- js之放大镜效果
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 原生js简易日历效果实现
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <di ...
随机推荐
- ORA-28001: the password has expired (DBD ERROR: OCISessionBegin) EM无法登录
先发句牢骚,明明刚才写完了,发布的时候却说没登陆,一下子全没了. 今天打开EM发现提示 ORA-28001: the password has expired (DBD ERROR: OCISessi ...
- 给ListBox每项加图标
先设置listBoxMsg.DrawMode = DrawMode.OwnerDrawFixed; private void listBoxMsg_DrawItem(object sender, Dr ...
- 程序设计入门——C语言 第8周编程练习 1 单词长度（4分）
第8周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统 ...
- js中对象 类 实例的区别 数据类型 创建对象
类是对象的具体细分,实例是类中的一个具体事物. 基本数据类型和 引用数据类型 基本数据类型:numble string undefined null 引用数据类型:对象和函数 对象数据类型又细分为:对 ...
- Sprint1（第三天11.16）
Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/qu ...
- Callable与Future的介绍
http://www.cnblogs.com/whgw/archive/2011/09/28/2194760.html
- 05-String动手动脑问题及课后实验性问题总结
一.请运行以下实例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? (1)在Java中,内容相同的字符常量("Hello")只保存一 ...
- Jquery动态操作checkbox
问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- Lamp（Ubuntu 12.04 LTS） 之 htaccess的使用
环境说明:Ubuntu 12.04 LTS Lamp (以apt方式分别安装) 一.明确目标:要确保.htaccess文件起作用,只需要三个重要点: 1.开启apache rewrite模块: (1) ...