javascript放大镜效果的简单实现


Posted in Javascript onDecember 09, 2013

这个效果并不难,要点是位置和比例设置,

捕获鼠标位置、判断鼠标位置区域、还有onmouseover事件、onmousemove事件、onmouseout事件

设置显示大图的比例,小图上显示的切图比例都要弄准确点,最好是2倍啦,4倍啦。

主要注意宽度,我这里的图片m.jpg是1440X900的....

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>放大镜效果</title>
<style type="text/css">
*{margin:0;padding:0;}
#smallimg{width:360px;float:left;position:relative;border:1px solid red;}
#smallimg img{ width:360px;}
#bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}
#showimg{width:100px;height:100px;background:#fff;cursor:move; position:absolute;border:1px solid #666;opacity:0.5;filter:alpha(opacity=50);display:none;}
</style>
</head>
<body>
<div id="smallimg">
 <img src="jq/m.jpg" alt=""/>
 <div id="showimg"> </div>
</div>
<div id="bigimg"> </div>

<script type="text/javascript">
var $=function(id){return typeof id=="string"?document.getElementById(id):id}
var smallimg = $("smallimg");
var showimg = $("showimg");//滤镜图片
var bigimg = $("bigimg");
var small_url = smallimg.getElementsByTagName("img")[0].getAttribute("src");
var show_half = maxWidth = maxHeight = 0;
smallimg.onmouseover = function(){
 showimg.style.display = "block";
 bigimg.style.display = "inline";
 show_half = showimg.offsetHeight/2;
 maxWidth = smallimg.clientWidth - showimg.offsetWidth;
 maxHeight = smallimg.clientHeight - showimg.offsetHeight;
 //上面两个变量指明showimg允许活动的区域
};
smallimg.onmousemove = function(e){
 var e=window.event?window.event:e;
 var num=bigimg.clientWidth/showimg.clientWidth;
 var Top = e.clientY - smallimg.offsetTop - show_half;
 var Left = e.clientX - smallimg.offsetLeft - show_half;
 //获取当前移动的showimg位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 盒子的宽(高)的/2 
 Top = Top<0?0:Top>maxHeight?maxHeight:Top;
 Left = Left<0?0:Left>maxWidth?maxWidth:Left;
 showimg.style.top = Top + "px";
 showimg.style.left = Left + "px";
 bigimg.style.background = "url("+small_url+") -"+Left*num+"px -"+Top*num+"px no-repeat";
};
smallimg.onmouseout = function(){
 showimg.style.display="none";
 bigimg.style.background ="";
 bigimg.style.display="none"
};
</script>
</body>
</html>
Javascript 相关文章推荐
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 #Javascript
关于js内存泄露的一个好例子
Dec 09 #Javascript
JS连连看源码完美注释版(推荐)
Dec 09 #Javascript
解析Javascript中难以理解的11个问题
Dec 09 #Javascript
深入理解Javascript作用域与变量提升
Dec 09 #Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 #Javascript
jquery div拖动效果示例代码
Dec 08 #Javascript
You might like
php随机输出名人名言的代码
2012/10/07 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
简单谈谈favicon
2015/06/10 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
How TDD works
2012/09/30 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
公司节能减排倡议书
2014/05/14 职场文书
小学数学教研活动总结
2014/07/01 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
歌剧魅影观后感
2015/06/05 职场文书
红高粱观后感
2015/06/10 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL