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 相关文章推荐
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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
初探PHP5
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
许愿墙中用到的函数
2006/10/07 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
九种原生js动画效果
2015/11/11 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python和bash统计CPU利用率的方法
2015/07/10 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
如何在python中实现随机选择
2019/11/02 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python