<!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. 无限二等分[0,1]这个区间之后还剩下啥？what's left after dividing an unit interval [0,1] infinitely many times?

    Dividing an unit interval \([0,1]\) into two equal subintervals by the midpoint \(\dfrac {0+1} {2}=\ ...

  2. VS2015中VB.NET类(dLL)里下载并读取文件

    最近要从一个http上下载个文件,差点就直接telnet了,突然发现了这个: My.Computer.Network.DownloadFile("目标文件网址") 但是还得读取它, ...

  3. PHP文件上传处理

    web中,文件上传是一个很常用的功能.如:上传头像.上传图片.这些提交到后台的图片都要交给后端处理.php提供了几个上传处理的函数,我把它们封装成类,以便日后使用. 处理流程(可能有不合理的地方,用时 ...

  4. centos安装UCenter 和 UCenter_Home

    1.搭建lamp环境yum  –y  install  httpd  php  php-mysql  mysql  mysql-server 2启动服务   3.设置服务开机自动启动 4.上传UCEN ...

  5. JavaScript中国象棋程序（2） - 校验棋子走法

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第2节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  6. ReactJS的开发日常

    在用React框架开发的日子里,踩的坑真不少!今天就来说说这个关于组件的周期,说的可能不是很清楚,但是也给自己留下一个踩坑的纪念,如有不妥 还望大家指点一二 Warning: setState(... ...

  7. 关注云端搜索技术：elasticsearch，nutch，hadoop，nosql，mongodb，hbase，cassandra 及Hadoop优化

    http://www.searchtech.pro/ Hadoop添加或调整的参数: 一.hadoop-env.sh1.hadoop的heapsize的设置,默认1000 # The maximum ...

  8. 根据WaitType诊断故障

    在查询执行时,等待次数和等待时间在一定程度上指示查询的瓶颈,甚至非常有助于对系统进行诊断.偶尔一次的异常等待,不足以表明系统存在瓶颈,但是,SQL Server实例经常出现特定的等待类型,并且等待时间 ...

  9. 2017-02-23 switch case 循环语句

    另一个分支语句:switch..case.. switch(变量){    case 值:代码段;break;    case 值:代码段;break;    ...    default:代码段;b ...

  10. 配置apache，及mac下安装mysql

    先打开apache,在浏览器上输入  localhost     回车后会如果屏幕上显示:It works! 如下图: 这说明你的apache已开启 在window下配置apache: 1.找到apa ...