<!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. 笔记之《用python写网络爬虫》

    1 .3 背景调研 robots. txt Robots协议(也称为爬虫协议.机器人协议等)的全称是"网络爬虫排除标准"(Robots Exclusion Protocol),网站 ...

  2. C#操作XML方式

    前言 前一篇XML读取,现在咱们继续XML操作相关 C#中也有三种操作(增.删.改.查)XML文件方法如下: 使用 XmlDocument(DOM模式) 使用 XmlTextWriter(流模式) 使 ...

  3. DOM解析，取得XML文件里面的信息

    1 创建解析器工厂 DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); 2 解析器工厂对象创建解析器对象 Do ...

  4. LINQ查询表达式和LAMBDA点标记方法基础

    在上一篇文章中,我们介绍了LINQ的一些基本用法,这一篇我们来看下另一种更简洁更优雅的表达式,Lambda表达式,也可以叫做点标记方法. 相信大家在实际工作中都用到过这两种方式,下面我们还是用实例来看 ...

  5. mysql优化---订单查询优化:异步分页处理

    订单分页查询: 老的代码是顺序执行查询数据和计算总记录数,但是如果条件复杂的话(比如关联子表)查询的时间要超过20s种 public static PagedList<Map<String ...

  6. Java设计和实现方法

    方法签名 方法名是驼峰命名 方法名最好能说明该方法主要做什么 方法参数的名字最好能说明该参数的意义 方法参数个数最好低于6个 例如: public void setTitleVisible(int l ...

  7. （@WhiteTaken）设计模式学习——建造者模式

    Builder模式,也就是建造者模式或者生成器模式,是GoF提出的23种设计模式的一种. 这种模式是用来隐式的创建复合对象而提出来的. 创建复合对象的过程,不在主客户端显示. 下面直接上代码.以修建房 ...

  8. .NET Core中妙用unsafe减少gc提升字符串处理性能

    一.前言 昨天在群里讨论怎么样效率的把一个字符串进行反转,一般的情况我们都知道,只要对String对象进行操作,那么就会生成新的String对象,比如"1"+"2&quo ...

  9. 【openstack N版】——计算服务nova

    一.openstack计算服务nova 1.1nova介绍 Nova是openstack最早的两块模块之一,另一个是对象存储swift.在openstack体系中一个叫做计算节点,一个叫做控制节点.这 ...

  10. AIO75产品特征与优势

    第一章 系统一体化 AIO7的核心流程由供应链.生产制造.财务成本及自动化办公构成,是迄今为止国内最完善的ERP.OA .HR .MES一体化产品.通过CRM(客户关系)及DRP(分销)扩充出“营销通 ...