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 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
基于vue.js实现的分页
2018/03/13 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python删除某个字符
2018/03/19 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
工作态度不好检讨书
2015/05/06 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL