<!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">

<head>

<style type="text/css">

#div1 { width:304px; height:222px; position:relative; margin:30px auto 0px;}

#div1 img{width:304px; height:222px;}

#div1 span { width:100px; height:100px; background:red; left:0px;top:0px; position:absolute; display:none; filter:alpha(opacity:20); opacity:0.2;}

.show { width:100%; height:100%; background:red; position:absolute; z-index:10px; filter:alpha(opacity:10); opacity:0.1; left:0px; top:0px; }

#div2 {width:304px; height:222px; position:relative; display:none; overflow:hidden; margin:0px auto 0px;}

#img1 { position:absolute;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Javascript 图片放大代码</title>

<script type="text/javascript">

window.onload=function ()

{

var oDiv=document.getElementById('div1');

var oShow=oDiv.getElementsByTagName('div')[0];

var oSpan=oDiv.getElementsByTagName('span')[0];

var oImg=document.getElementById('img1');

oShow.onmouseover=function()

{

oSpan.style.display='block';

oImg.parentNode.style.display='block';

};

oShow.onmouseout=function()

{

oSpan.style.display='none';

oImg.parentNode.style.display='none';

};

oShow.onmousemove=function(ev)

{

var oEvent=ev||event;

var x=oEvent.clientX-oDiv.offsetLeft-oSpan.offsetWidth/2;

var y=oEvent.clientY-oDiv.offsetTop-oSpan.offsetHeight/2; 

if(x<0)

{

x=0;

}

else if(x>oShow.offsetWidth-oSpan.offsetWidth)

{

x=oShow.offsetWidth-oSpan.offsetWidth;

}

if(y<0)

{

y=0;

}

else if(y>oShow.offsetHeight-oSpan.offsetHeight)

{

y=oShow.offsetHeight-oSpan.offsetHeight

} 

oSpan.style.left=x+'px';

oSpan.style.top=y+'px';

var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth);

var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight);

var oImgparent=oImg.parentNode;

oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px';

oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px';

};

};

</script>

</head>

<body>

<div id="div1">

<img src="http://files.jb51.net/demoimg/201102/11_2_2.jpg" />

<span></span>

<div class="show"></div>

</div>

<div id="div2">

<img id="img1" src="http://files.jb51.net/demoimg/201102/11_2_2.jpg" />

</div>

</body>

</html>

js放大镜的更多相关文章

  1. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  2. js放大镜代码

    js原生放大镜 <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta char ...

  3. js放大镜特效

    在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子                                 ...

  4. jS放大镜效果

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...

  5. JS放大镜特效（兼容版）

    原理 1.鼠标在小图片上移动时,通过捕获鼠标在小图片上的位置,定位大图片的相应位置 设计 1.页面元素:小图片.大图片.放大镜 2.技术点:事件捕获.定位 1)onmouseover:会在鼠标指针移动 ...

  6. 最全js 放大镜效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js 放大镜用法bug解决

    <img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /> ...

  8. JS——放大镜

    放大镜: 1.比例系数要恒定:在系数为4的情况下,若原图是820*512,那么小图必须是205*128,放大镜若是50,原图显示区域必须200 2.计算鼠标在小图中的坐标 3.放大镜需要在鼠标中间位置 ...

  9. 原生js放大镜效果

    效果: 1.  鼠标放上去会有半透明遮罩.右边会有大图片局部图 2.  鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...

随机推荐

  1. block之---内存管理

    首先简单说下MRC和ARC MRC: 手动管理内存,需要自己去释放内存, 如果对象的引用计数器为0时对象就会被释放. 属性修饰策略:assign, retain, copy ARC: ARC是编译器特 ...

  2. webkit 渲染机制

    最近看了< webkit技术内幕 >,虽然并不能完全看懂,但是对浏览器的渲染机制也算是有了一个比较完整的认识. 我们从浏览器地址栏输入网址开始到web页面被完整的呈现在眼前,大概的经过了这 ...

  3. java测试之文件操作

    package filestream; import java.io.File; public class FileTester { public static void main(String [] ...

  4. [Linux] - Linux下安装jdk，tar方式

    下载jdk的linux下版本,下载页面http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.ht ...

  5. JAVA设计模式：代理模式&& 装饰模式区别

    在前面学习了代理模式和装饰模式后,发现对两者之间有时候会混淆,因此对两者进行了区别和理解: 装饰模式你可以这样理解,就像糖一样,卖的时候商家大多要在外面包一层糖纸,其实原本还是糖. public in ...

  6. [编织消息框架][rpc]使用篇

    rpc 分两部份,一个是调用者,另一方是服务提供者 调用者只关心那个服务,传相应参数,返回内容就可以 而提供者根据调用相应服务同参数,工作处理后响应内容即可 根据他们的关系可以用JAVA 接口同实现类 ...

  7. 【JSON学习之道】js操作JSON

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...

  8. 【转】Python 中 Iterator和Iterable的区别

    Python中 list,truple,str,dict这些都可以被迭代,但他们并不是迭代器.为什么? 因为和迭代器相比有一个很大的不同,list/truple/map/dict这些数据的大小是确定的 ...

  9. GCD浅析

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } span.s1 { } 1.关于GCD ...

  10. Java体系结构---垃圾回收

    1 垃圾回收 1.1 JVM的体系结构 1.1.1  JVM 相当与JAVA 的操作系统,是运行JAVA Class文件的程序. 1.1.2  JVM体系 监控调优,运行时内存结构,类加载,calss ...