原生js写的放大镜效果


Posted in Javascript onAugust 22, 2012

我的大体思路是:时时监听鼠标的坐标,当鼠标移动时,透明层随着鼠标移动,大图片相对透明层的移动而移动。不废话了,看代码。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>放大镜</title> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<style type="text/css"> 
/*重置{*/ 
html{color:#000;background:#fff;} 
body,div{padding:0;margin:0;} 
img{border:none;} 
/*}重置*/ 
.outer{width:200px;height:150px;position:relative;margin:20px auto;} 
.inner{width:80px;height:60px;background:#f55;position:absolute;opacity:0.5;filter:alpha(opacity=50);left:0;top:0;cursor:pointer;} 
.aa{width:320px;height:240px;position:relative;border:1px red solid;margin:20px auto;overflow:hidden;} 
.imgs{position:absolute;} 
.outer img{width:200px;height:150px;} 
</style> 
</head> 
<body> 
<div> 
<div class="outer" id="outer"> 
<img src="images/pobabyb.gif" alt="pobaby小图"/> 
<div class="inner" id="inner"></div> 
</div> 
<div class="aa" id="aa"> 
<div class="imgs" id="imgs" ><img src="images/pobabyb.gif" alt="pobaby大图"/></div> 
</div> 
</div> 
<script type="text/javascript"> 
var outer=document.getElementById("outer"); 
var inner=document.getElementById("inner"); 
var aa=document.getElementById("aa"); 
var imgs=document.getElementById("imgs"); 
var x,y,n=false; 
inner.onmousedown=test1;//如果把inner改为document,鼠标在窗口任意位置点击,图片都会跟随 
document.onmousemove=test2;//document如果改为outer,鼠标在outer内才起作用 
document.onmouseup=test3; 
function test1(event){//鼠标按下时方法 
var event=event || window.event;//调试兼容,各个浏览器认识event有差别. 
n=true;//当n=true(n的值可随便设定)时,假定为鼠标按下的事件 
x=event.clientX-inner.offsetLeft;//鼠标在透明层的相对横坐标=鼠标坐标-方块左边距 
y=event.clientY-inner.offsetTop;//鼠标在透明层的相对纵坐标=鼠标坐标-方块上边距 
} 
function test2(event){//鼠标移动时方法 
var event=event || window.event; 
if(n==true){ 
////////鼠标移动范围 
inner.style.left=event.clientX-x+"px"; 
inner.style.top=event.clientY-y+"px"; 
////////图片移动范围 
imgs.style.left=-4*parseInt(inner.style.left)+"px"; 
imgs.style.top=-4*parseInt(inner.style.top)+"px"; 
////////////////////////////限定鼠标移动的范围 
if(parseInt(inner.style.left)<0){ 
inner.style.left=0+"px"; 
} 
if(parseInt(inner.style.top)<0){ 
inner.style.top=0+"px"; 
} 
if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){ 
inner.style.left=outer.clientWidth-inner.clientWidth+"px"; 
} 
if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){ 
inner.style.top=outer.clientHeight-inner.clientHeight+"px"; 
} 
//////////////////////////////限定图片移动的范围 
if(parseInt(imgs.style.left)>0){ 
imgs.style.left=0+"px"; 
} 
if(parseInt(imgs.style.top)>0){ 
imgs.style.top=0+"px"; 
} 
if(parseInt(imgs.style.left)<-4*(outer.clientWidth-inner.clientWidth)){ 
imgs.style.left=-4*parseInt(outer.clientWidth-inner.clientWidth)+"px"; 
} 
if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){ 
imgs.style.top=-4*parseInt(outer.clientHeight-inner.clientHeight)+"px"; 
} 
} 
} 
function test3(){//鼠标松开时方法 
n=false; 
} 
</script> 
</body> 
</html>

原生js写的放大镜效果
Javascript 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
JavaSacript中charCodeAt()方法的使用详解
Jun 05 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
window.open不被拦截的实现代码
Aug 22 #Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 #Javascript
网页打开自动最大化的js代码
Aug 22 #Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 #Javascript
eval的两组性能测试数据
Aug 17 #Javascript
javascript五图轮播切换实用版
Aug 17 #Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
让焦点自动跳转
2006/07/01 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
法律专业推荐信范文
2013/11/29 职场文书
公司任命书模板
2014/06/06 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript