原生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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
JavaScript实现栈结构详细过程
Dec 06 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 download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
PHP制作万年历
2015/01/07 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
jQuery 位置插件
2008/12/25 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
django中嵌套的try-except实例
2020/05/21 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Python实现简单的2048小游戏
2021/03/01 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
师德师风个人反思
2014/04/28 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
个人原因辞职信模板
2015/05/13 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
python处理json数据文件
2022/04/11 Python