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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
计数器详细设计
2006/10/09 PHP
我的论坛源代码(三)
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
各种快递查询--Api接口
2016/04/26 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jquery等待效果示例
2014/05/01 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python下载图片实现方法(超简单)
2017/07/21 Python
python模块之paramiko实例代码
2018/01/31 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
治超工作实施方案
2014/05/04 职场文书
关于旅游的活动方案
2014/08/15 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
MySQL中varchar和char类型的区别
2021/11/17 MySQL