<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding:0;}
#small{
width:350px;
height:350px;
border:1px solid #000;
position:relative;
float: left;
margin-right: 20px;

}
#big img{
position: absolute;
}
#mask{
display: block;
width:50px;
height:50px;
opacity:0.5;
background: red;
display: none;
position: absolute;
left:0;
top:0;
}
#big{
width:350px;
height:350px;
float:left;
border:1px solid #000;
overflow: hidden;
display: none;
position: relative;
}
</style>
<script>
window.onload=function(){
var oSmall=document.getElementById('small');
var oMask=document.getElementById('mask');
var oBig=document.getElementById('big');
var oImg=document.getElementById('bigimg');
oSmall.onmouseover=function(){
oMask.style.display='block';
oBig.style.display='block';
};
oSmall.onmouseout=function(){
oMask.style.display='none';
oBig.style.display='none';
};
oSmall.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - oMask.offsetWidth/2;
var t = oEvent.clientY - oMask.offsetHeight/2;
if(l < 0){
l= 0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l = oSmall.offsetWidth - oMask.offsetWidth;
}
if(t < 0){
t = 0;
}else if(t >oSmall.offsetHeight - oMask.offsetHeight){
t = oSmall.offsetHeight - oMask.offsetHeight;
}
oMask.style.left = l + 'px';
oMask.style.top = t + 'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';

}
oSmall.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-oMask.offsetWidth/2;
var t=oEvent.clientY-oMask.offsetHeight/2;
if(l<0){
l=0;
}else if(l > oSmall.offsetWidth - oMask.offsetWidth){
l=oSmall.offsetWidth-oMask.offsetWidth;
}
if(t<0){
t=0;
}else if(t>oSmall.offsetHeight-oMask.offsetHeight){
t=oSmall.offsetHeight-oMask.offsetHeight;
}
oMask.style.left=l+'px';
oMask.style.top=t+'px';
oImg.style.left=l*(oBig.offsetWidth-oImg.offsetWidth)/
(oSmall.offsetWidth-oMask.offsetWidth)+'px';
oImg.style.top=t*(oBig.offsetHeight-oImg.offsetHeight)/
(oSmall.offsetHeight-oMask.offsetHeight)+'px';
}
}
</script>
</head>
<body>
<div id="small">
<img src="img/s.jpg" alt=""/>
<span id="mask"></span>
</div>
<div id="big">
<img src="img/b.jpg" alt="" id="bigimg"/>
</div>

</body>
</html>

js的小效果-图片放大镜效果的更多相关文章

  1. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  2. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  3. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  4. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. canvas知识02：图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

  9. 利用JS实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...

随机推荐

  1. JAVA中this用法小结

    Java关键字this只能用于方法方法体内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个指针的名字就是 this.因此,this只能在类中的非静态方法中使用,静 ...

  2. HDU5558 Alice's Classified Message(合肥区域赛 后缀数组)

    当初合肥区域赛的题(现场赛改了数据范围就暴力过了),可惜当初后缀数组算法的名字都没听过,现在重做下. i从1到n - 1,每次枚举rank[i]附近的排名,并记录当起点小于i时的LCP(rank[i] ...

  3. ORA-01041: 内部错误，hostdef 扩展名不存在

    在工作中打算将生产环境的数据库设置成归档模式时,遇到的问题. 一.重启数据库 Sql代码: shutdown immediate; startup mount; 也就是在我执行startup moun ...

  4. 5-04用Sql语句创建表

    用Sql语句创建表的基本语法: USE E_Market--指向当前所操作的数据库 GO CREATE TABLE CommoditySort--创建表的名字 { sortID int IDENTIT ...

  5. python生成RSS（PyRSS2Gen）

    既然能够用python解析rss,那么也顺带研究下生成rss. 其实很简单,只是生成一个比较特殊点的xml文档而已. 这里我使用了PyRss2Gen,用法很简单,看代码就知道了,如下: import ...

  6. Java生成验证码小工具

    无意中看到一个生成简易验证码的小工具类(保存学习): 工具类代码: import java.awt.BasicStroke; import java.awt.Color; import java.aw ...

  7. directive中的参数详解

    restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...

  8. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  9. hdu5438 Ponds dfs 2015changchun网络赛

    Ponds Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Sub ...

  10. 1140 分珠 dfs

    时间限制:500MS  内存限制:65536K提交次数:24 通过次数:18 题型: 编程题   语言: G++;GCC Description 如下图所示,有若干珠子,每颗珠子重量不同,珠子之间有一 ...