原生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 相关文章推荐
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
javascript操作excel生成报表示例
May 08 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
Smarty安装配置方法
2008/04/10 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
解密效果
2006/06/23 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python elasticsearch环境搭建详解
2019/09/02 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
Java面试笔试题大全
2016/11/23 面试题
测量实习生自我鉴定
2013/09/19 职场文书
关于打架的检讨书
2014/01/17 职场文书
清扬洗发水广告词
2014/03/14 职场文书
优秀团队申报材料
2014/12/26 职场文书
学校少先队工作总结
2015/08/12 职场文书
环保建议书作文500字
2015/09/14 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS