<!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. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. visual studio2010复制粘贴源代码到Word时乱码问题 分类： C# 2014-11-28 09:25 687人阅读 评论(0) 收藏

    问题描述: visual studio2010 拷贝源代码的时候,在windows自带的写字板和word2010上,粘贴的时候中文字符都会变成乱码. 如: "该用户已经被成功添加" ...

  3. python生成RSS（PyRSS2Gen）

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

  4. hdu 2897 巴什博弈变形 ***

    大意:一堆石子共有n个,A,B两人轮流从中取,每次取的石子数必须在[p,q]区间内,若剩下的石子数少于p个,当前取者必须全部取完.最后取石子的人输.给出n,p,q,问先取者是否有必胜策略? Bash博 ...

  5. PHP isset()与empty()的使用区别详解(转)

    通过对PHP语言的学习,应该知道它是基于函数的一款HTML脚本语言.庞大的函数库支持着PHP语言功能的实现.下面我们为大家介绍有关PHP函数isset()与empty()的相关用法.     PHP的 ...

  6. Android之Adapter用法总结（转）

    Android之Adapter用法总结 1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(List View,Grid Vie ...

  7. C# 指针操作图像 二值化处理

    /// <summary> /// 二值化图像 /// </summary> /// <param name="bmp"></param& ...

  8. this和super

    1.this * 每个类的每个非静态方法(没有被static修饰)都会隐含一个this引用名称,它指向调用这个方法的对象. * 当在方法中使用本类的属性时,都会隐含地使用this名称,当然也可以明确指 ...

  9. ThinkPHP3.2 volist嵌套循环显示原理

    php页面:$fatherList = $Document->where('pid=1')->select();        foreach($fatherList as $n=> ...

  10. HDU 3374 最小/大表示法+KMP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题意:给定一个串s,该串有strlen(s)个循环同构串,要求输出字典序最小的同构串的下标,字典 ...