<!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. java多线程四种实现模板

    假设一个项目拥有三块独立代码块,需要执行,什么时候用多线程? 这些代码块某些时候需要同时运行,彼此独立,那么需要用到多线程操作更快... 这里把模板放在这里,需要用的时候寻找合适的来选用. 总体分为两 ...

  2. php新建数据库对象 基础知识

    数据访问 结合html 数据库 PHP面向对象的方式函数的方式 1建立通道 MySQLi 类通过构造函数造出 连接数据库地址 uesername 连接用户名 passwd dbname port so ...

  3. Git建空白分支

    先执行以下命令从当前分支建一个分支,NEWBRANCH为新分支名字. git checkout --orphan NEWBRANCH 执行上面命令后,会切换到新分支.再执行命令下面命令,清空该分支(注 ...

  4. java后端学习流程

    首先,我个人比较推崇的学习方法是:先学java前段,也就是HTML,css,js,因为学习java以后肯定是往java ee方向发展的,学习完前端,在学习后端很多东西比计较容易理解! 其中J2SE是关 ...

  5. 【CNMP系列】CentOS7.0下安装MySql5.6服务

    接上一回的话,CentOS7.0下安装好了Nginx服务,对于我们的CNMP,我们可以开始我们的M啦,就是传统意义上的MySql服务 MySql简介 MySQL是一个关系型数据库管理系统,由瑞典MyS ...

  6. 简学Python第四章__装饰器、迭代器、列表生成式

    Python第四章__装饰器.迭代器 欢迎加入Linux_Python学习群  群号:478616847 目录: 列表生成式 生成器 迭代器 单层装饰器(无参) 多层装饰器(有参) 冒泡算法 代码开发 ...

  7. 概念 : 用户>角色>权限 的管理（Role-Based Access Control）

    RBAC 用户管理规范 概念:每个user有多个accounts,每个account 有一个account binding,有多个roles和多个tasks 举个例子:某个用户现在manager,这是 ...

  8. Material Design学习-----FloatingActionButton

    FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...

  9. Zookeeper + Kafka 集群搭建

    第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. 安装包 kafka_2.12-0.10.2.0.tgz zookeeper-3.4.9.tar.gz ...

  10. C++ 11 学习2：空指针(nullptr) 和 基于范围的for循环(Range-based for loops)

    3.空指针(nullptr) 早在 1972 年,C语言诞生的初期,常数0带有常数及空指针的双重身分. C 使用 preprocessor macroNULL 表示空指针, 让 NULL 及 0 分别 ...