原生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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 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中常用数组处理方法实例分析
2008/08/30 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
简单的php文件上传(实例)
2013/10/27 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php格式文件打开的四种方法
2018/02/24 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
JavaScript闭包详解
2015/02/02 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python框架django基础指南
2016/09/08 Python
python实现百度语音识别api
2018/04/10 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python