Javascript仿京东放大镜的效果


Posted in Javascript onMarch 01, 2017

随便找一个图片吧。小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题。

话不多说,请看代码:

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body,div{margin: 0; padding: 0;}
#zhuti{ 
margin:50px;
position: relative;
}
#small{
width: 300px;
height: 187px;
border: 1px solid #000;
}
#big{
border: 1px solid #666;
overflow: hidden;
width: 300px;
height: 187px;
position: absolute;
left: 310px;
top: 0px;
display: none; /*默认隐藏*/
}
#jingtou{
width: 50px;
height: 50px;
background: #666;
opacity: 0.4;
position: absolute;
display: none; /*默认隐藏*/
}
#bigimg{
position: absolute;
}
</style>
</head>
<body>
<div id="zhuti">
<div id="small">
<div id="jingtou"></div>
<img src="img/ktm_small.jpg">
</div>
<div id="big">
<img src="img/ktm_big.jpg" id="bigimg">
</div>
</div>
<script type="text/JavaScript">
//封装一个函数(id形式参数)
function $(id) {
return document.getElementById(id);
}
var small =$('small');
var big =$('big');
var jingtou =$('jingtou');
var zhuti =$('zhuti');
var bigimg =$('bigimg');
//监视鼠标(镜头)
small.onmouseover = function(){
big.style.display='block';
jingtou.style.display='block';
}
small.onmouseout = function(){
big.style.display='none';
jingtou.style.display='none';
}
//挡鼠板移动的时候
small.onmousemove = function(event){
//获得当前坐标 //减去镜头宽度的一半
var left = event.clientX - zhuti.offsetLeft -jingtou.offsetWidth/2;
var top = event.clientY -zhuti.offsetTop - jingtou.offsetHeight/2;
//进行判断语句(固定0的位置)
//向左走
if(left<=0){
left =0;
}
//向上走
if(top<=0){
top =0;
}
//向右走
if(left >= small.offsetWidth-jingtou.offsetWidth){
left = small.offsetWidth-jingtou.offsetWidth;
}
//向下走
if(top >= small.offsetHeight-jingtou.offsetHeight){
top = small.offsetHeight-jingtou.offsetHeight;
}
//小图的比例
var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
//var smallX = left / (small.offsetWidth - jingtou.offsetWidth);
var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
//var smallY = top / (small.offsetHeight - jingtou.offsetHeight);
var bigX = -smallX * (bigimg.offsetWidth - big.offsetWidth); 
var bigY = -smallY * (bigimg.offsetHeight - big.offsetHeight);
//求a和b的值
bigimg.style.left = bigX + 'px';
bigimg.style.top = bigY + 'px';
//镜头距离左边的位置==鼠标距离左边的位置
jingtou.style.left = left +'px';
jingtou.style.top = top +'px';
}
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
JavaScript实现京东放大镜效果
Dec 03 Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
Angular1.x自定义指令实例详解
Mar 01 #Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 #Javascript
node.js实现回调的方法示例
Mar 01 #Javascript
You might like
php使用反射插入对象示例分享
2014/03/11 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
高中军训感言800字
2014/03/05 职场文书
优秀语文教师事迹
2014/05/18 职场文书
养成教育经验材料
2014/05/26 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
师德先进个人材料
2014/12/20 职场文书
办公室主任个人总结
2015/02/28 职场文书
结婚典礼主持词
2015/06/29 职场文书
话题作文之学会尊重
2019/12/16 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers