JavaScript鼠标经过图片的放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片缩放</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#minBox{
border:1px solid #ccc;
width: 350px;
height: 350px;
position: relative;
top: 50px;
left: 50px;
}
#minBox img{
position: absolute;
}
#smBox{
display: none;
position: absolute;
width:150px;
height: 150px;
background-color: yellow;
opacity: 0.3;
}
#maxBox {
display: none;
position: absolute;
overflow: hidden;
left:500px;
top:50px;
width:500px;
height: 500px;
border:1px solid #d9d9d9;
}
#maxBox img {
position: absolute;
}
</style>
</head>
<body>
<div id="minBox">
<img src="img/min.jpg">
<div id="smBox"></div>
</div>
<div id="maxBox">
<img src="img/max.jpg">
</div> <script type="text/javascript">
//获取节点 var minBox =document.getElementById("minBox");
var smBox = document.getElementById("smBox");
var maxBox = document.getElementById("maxBox");
var maxImg = maxBox.children[0]; //小块鼠标移动事件事件
minBox.onmousemove = function(){
var e = e || window.event;
smBox.style.display = "block";
maxBox.style.display = "block";
//计算小块的位置
//定义
var sLeft = e.clientX - smBox.offsetWidth/2 -minBox.getBoundingClientRect().left;
var sTop = e.clientY - smBox.offsetWidth/2 - minBox.getBoundingClientRect().top;
//判断左右边界,小块距离左边的距离小于0,则意味超界,设置它的left为0;
//右边边界判断,小块的最大宽度不能>(minBox的视口宽度- 小块本身宽度),
if(sLeft<0){
sLeft= 0;
}else if(sLeft >minBox.clientWidth- smBox.offsetWidth){
sLeft = minBox.clientWidth - smBox.offsetWidth;
}
//上下边界同理
if(sTop<0){
sTop = 0;
}else if(sTop > minBox.clientHeight - smBox.offsetHeight){
sTop = minBox.clientHeight - smBox.offsetHeight;
} //鼠标移动、小块跟着移动
smBox.style.left = sLeft + "px";
smBox.style.top = sTop + "px" ; //计算小块在minBox移动的比例,大图同比例在maxBox移动;
//定义设置moveX、moveY 暂存比例
var moveX = sLeft/(minBox.clientWidth - smBox.offsetWidth); var moveY = sTop/(minBox.clientHeight - smBox.offsetHeight);
console.log(moveY); //大图maxImg移动 maxImg.style.left = - moveX*(maxImg.clientWidth - maxBox.offsetWidth) +"px";
maxImg.style.top = - moveY* (maxImg.clientHeight - maxBox.offsetHeight) +"px";
}
//移出滑块的时候
minBox.onmouseleave = function() {
smBox.style.display = "none";
maxBox.style.display = "none";
}
</script>
</body>
</html>
JavaScript鼠标经过图片的放大镜效果的更多相关文章
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- 基于Jquery的商城商品图片的放大镜效果(非组件)
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- JavaScript图形实例:图形放大镜效果
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C# 同类型实体赋值
#region 更新赋值,前者赋值给后者 public static void ShadowCopy(object a, object b) { if (a == null) return; if ( ...
- LeetCode 167 Two Sum II - Input array is sorted
Problem: Given an array of integers that is already sorted in ascending order, find two numbers such ...
- JDBC的操作总结
JDBC 操作总结 JDBC是一组能够执行SQL语句的API JDBC的操作方式比较单一,简单的分为以下几个流程: 1.通过数据库厂商提供的JDB类库想DriverManager注册数据库驱动 ...
- ORA-12541:TNS:no listener 客户端tnsnames.ora配置,以及服务端listener.ora配置
需求:客户端(192.168.25.1)需要访问服务端(192.168.7.215)的Oracle库ORCL. 步骤一:配置客户端tnsnames.ora 步骤二:配置服务端listener.ora ...
- 修改MySql 数据默认存储路径
1. cmd进入控制台 net stop mysql 2.复制原来数据库目录到新目录 复制C:\ProgramData\MySQL\MySQL Server 5.5\中的data目录到 D:\Prog ...
- xcode8.2 打包问题
如图 在 iOS 到处 ipa包的时候 会有四个选项 PS:证书的账号密码 是需要填写的1.Save for iOS App Store Deployment(部署) sign and packa ...
- Android开发之MVP模式的使用
前几天发现,在Android项目代码里有一个Activity类行数居然有1000多行,而600行左右都是逻辑控制,真正和页面控件处理相关的代码不多,虽然可以用#region <>...#e ...
- PermGen space
MyEclipse内存空间不足,调整空间操作: 1.点击"Run"-"Run Configurations",在打开的窗口中点击"Arguments& ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- 设计模式之简单工厂模式Simple Factory(四创建型)
工厂模式简介. 工厂模式专门负责将大量有共同接口的类实例化 工厂模式可以动态决定将哪一个类实例化,不必事先知道每次要实例化哪一个类. 工厂模式有三种形态: 1.简单工厂模式Simple Factory ...