js放大镜放大购物图片效果
图片放大镜效果，供大家参考，具体内容如下
一难点：不让黄盒子出界
二难点：让大盒子相应移动（比例）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 100px;
position: relative;
}
.small{
width: 350px;
height: 350px;
border: 1px solid #999;
position: relative;
}
.select{
display: none;
width: 100px;
height: 100px;
background: rgba(255,255,0,0.4);
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.big{
display: none;
position: absolute;
left: 360px;
top: 0;
width: 450px;
height: 450px;
border: 1px solid #ccc;
overflow: hidden;
}
.big img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="small" id="smallbox">
<img src="images/001.jpg" alt="">
<div class="select" id="mask" style="display:none;"></div>
</div>
<div class="big" id="bigbox">
<img src="images/0001.jpg" alt="">
</div>
</div>
<script>
var smallbox = document.getElementById('smallbox');
var bigbox = document.getElementById('bigbox');
var mask = document.getElementById('mask');
var bigImg = bigbox.children[0];
smallbox.onmouseover = function(){
mask.style.display = "block";
bigbox.style.display = "block";
}
smallbox.onmouseout = function(){
mask.style.display = "none";
bigbox.style.display = "none";
}
smallbox.onmousemove = function(event){
var event = event || window.event;
var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
//不让黄盒子出界
if(x < 0){
x = 0;
}else if(x > smallbox.offsetWidth - mask.offsetWidth){
x = smallbox.offsetWidth - mask.offsetWidth;
}
if(y<0) {
y = 0;
}else if(y > smallbox.offsetHeight - mask.offsetHeight){
y = smallbox.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y + "px";
bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x
bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px";
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现计时器的简单方法
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <label>计时:</label> <input type="text" name="" id=&qu
-
移动端点击图片放大特效PhotoSwipe.js插件实现
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地. <style> .pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px} .pnav a{padding:4px} .pnav a.cur{background:#00
-
JS简单的图片放大缩小的两种方法
以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下: <script type="text/javascript"> //兼容IE和火狐 缩小放大.缩放 function ImageSuofang(args) { var oImg = document.getElementById("oImg"); if (args) {
-
原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大镜效果. 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: <html> <head> <meta charset="UTF-8"> <title>Document</title> <style t
-
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //
-
JS 页面计时器示例代码
复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value
-
js实现单击图片放大图片的方法
本文实例讲述了js实现单击图片放大图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>单击图片即可放大图片</title> <body> 点击图片预览效果.<br> <img src="/images/m01.jpg" onclick="this.width+=50;this.height+=50" onclick="javascript:
-
手机端点击图片放大特效PhotoSwipe.js插件实现
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ 但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了. 打开photoswipe.js,大概在3179行有个关于tap的函数定义 在开头先定义一个变量 var tap_num = 0; 然后在onTapStart的定义里加入 //根据需求自己添加的S //判断
-
原生js实现图片放大缩小计时器效果
知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时,清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
JS实现图片放大镜效果的方法
本文实例讲述了JS实现图片放大镜效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo