<!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. 如何一步一步用DDD设计一个电商网站（十四）—— 回顾与总结

    本系列所有文章 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念 如何一步一步用DDD设计一个电商网站(二)—— 项目架构 如何一步一步用DDD设计一个电商网站(三)—— 初涉核心域 如 ...

  2. Unity编程标准导引-2.2Unity中的基本概念

    2.2Unity中的基本概念 上述介绍提到了几个概念:游戏对象.场景.资源.相机,这个小节我们来深入了解,同时进行一些实践性操作.不过首先,我们需要大概了解一下Unity的工程文件夹. 2.2.1工程 ...

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

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

  4. iOS详解MMDrawerController抽屉效果(一)

      提前说好,本文绝对不是教你如何使用MMDrawerController这个第三方库,因为那太多人写了 ,也太简单了.这篇文章主要带你分析MMDrawerController是怎么实现抽屉效果,明白 ...

  5. 1.使用SignalR实现页面即时刷新（服务端主动推送）

    模块功能说明: 实现技术:sqlserver,MVC,WebAPI,ADO.NET,SignalR(服务器主动推送) 特殊车辆管理--->移动客户端采集数据存入数据库---->只要数据库数 ...

  6. JavaWeb验证码的使用

    在Java Web开发中,我们经常需要使用到验证码功能,一般情况下,我们可以将产生的验证码保存到服务器端中的session中,这种方式中,是使用服务器来保证验证码的功能.另外,我们也可以采用js产生验 ...

  7. 电脑机器刷BIOS

    http://www.51nb.com/forum/viewthread.php?tid=934570&page=1#pid13765036 [原创]hp笔记本刷新bios失败后真的可以恢复吗 ...

  8. BeautifulSoup简述

    网页解析器 从网页中提取有价值数据的工具 网页解析器种类 正则表达式 (模糊匹配) html.parser (结构化解析) BeautifulSoup第三方插件 (结构化解析,相对比较强大) lxml ...

  9. Linux SVN安装部署

    系统:centos6.3 svn: subversion-1.6.1 apache: httpd-2.2.29 //创建svn路径 [root@localhost /]# mkdir svn [roo ...

  10. IOS设备对position的支持性

    最近在开发一个网页. 要嵌套在微信里 大家都知道 IOS版微信和安卓版微信还是一定的差距 IOS版微信在打开网页的时候回调取自己的浏览器以及内核 但是安卓版微信不会,他会默认使用自己的QQ浏览器和X5 ...