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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
javascript 闭包
Sep 15 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 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
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
全球虚拟主机商:HostGator
2017/02/06 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
简历中自我评价分享
2013/10/09 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
大学生评语大全
2014/04/18 职场文书
爱护公物标语
2014/06/24 职场文书
保险专业求职信
2014/07/07 职场文书
求职简历自我评价2015
2015/03/10 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python