JS基础-特效篇（事件对象）03-放大镜

1.案例：
小盒子移动，大盒子装图片；显微镜放大作用！
显微镜的小黄色块，有地图比例尺的同样作用，就是大盒子和小盒子的比例！
有分页的时候使用pageX/pageY。
https://www.cnblogs.com/shirleysblog/p/13405584.html
本来想全部都回忆一下呢！结果什么都学不会！！时间紧，任务重！先学，慢慢以后再复习吧！

页面元素

<div id="box"><div id="small_box"><img src="data:images/phone01.jpg"><span id="mask"></span></div><div id="big_box"><img src="data:images/phone0001.jpg" alt=""></div><div id="list"><ul><li><img src="data:images/phone001.jpg" alt=""></li><li><img src="data:images/phone002.jpg" alt=""></li><li><img src="data:images/phone003.jpg" alt=""></li></ul></div>
</div>

样式

<style>* {margin: 0;padding: 0;list-style: none;border: none;}#box {width: 600px;height: 600px;margin: 100px 0 0 100px;position: relative;}#small_box {width: 100%;height: 100%;border: 1px solid #cccccc;box-sizing: border-box;position: relative;}#small_box img {width: 100%;height: 100%;}#mask {width: 100px;height: 100px;background-color: rgba(255, 255, 0, .4);position: absolute;left: 0;top: 0;cursor: move;/*隐藏*/display: none;}#big_box {width: 600px;height: 600px;border: 1px solid #cccccc;/*定位*/position: absolute;left: 600px;top: 0;overflow: hidden;display: none;}#big_box img {position: absolute;left: 0;top: 0;}#list {margin: 20px 0 0;}#list ul li {float: left;margin: 5px;}#list ul li img {width: 190px;height: 190px;cursor: pointer;}</style>

JS函数

<script>window.addEventListener('load', function (ev) {//1.获取标签var box = document.getElementById('box');var s_box = box.children[0];var b_box = box.children[1];var mask = s_box.children[1];var b_img = b_box.children[0];var list_lis = document.getElementById('list').getElementsByTagName('li');//2.监听鼠标进入小盒子s_box.addEventListener('mouseover', function () {//2.1显示隐藏内容mask.style.display = 'block';b_box.style.display = 'block';//2.2监听鼠标光标移动s_box.addEventListener('mousemove', function (ev1) {var e = ev1 || window.event;//2.3求出鼠标的坐标var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;//2.4边界检测if (pointX < 0) {pointX = 0;} else if (pointX >= s_box.offsetWidth - mask.offsetWidth - 2) {pointX = s_box.offsetWidth - mask.offsetWidth - 2;//边框尺寸}if (pointY < 0) {pointY = 0;} else if (pointY >= s_box.offsetHeight - mask.offsetHeight - 2) {pointY = s_box.offsetHeight - mask.offsetHeight - 2;//边框尺寸}//2.5让放大镜走起来mask.style.left = pointX + 'px';mask.style.top = pointY + 'px';//2.6大盒子的图片走起来/*smallX/bigX = sBox.width/大盒子的宽度bigX = smallX/(sBox.width/大盒子的宽度)*/b_img.style.left = -pointX / (s_box.offsetWidth / b_box.offsetWidth) + 'px';b_img.style.top = -pointY / (s_box.offsetHeight / b_box.offsetHeight) + 'px';});});//3.监听鼠标离开小盒子s_box.addEventListener('mouseout', function () {//3.1隐藏内容mask.style.display = 'none';b_box.style.display = 'none';});//4.遍历列表图片for (var i = 0; i < list_lis.length; i++) {(function (i) {var li = list_lis[i];li.addEventListener('mouseover', function() {s_box.children[0].src = 'images/phone0'+ (i+1) +'.jpg';b_img.src = 'images/phone000'+ (i+1) +'.jpg';});})(i)}})
</script>

听到一头雾水！但是除了熟能生巧以外，我觉得还是应该坚持，动手动脑！学会动脑！

JS基础-特效篇（事件对象）03-放大镜相关推荐

JS基础-特效篇-随机点名册
如上图效果 1.页面: <button id="begin">开始点名</button> <button id="end"> ...
vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘欢迎私信第一章:过滤器过滤器是对数据进行处理并返回结果的函数. 1.语法语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS基础入门篇（一）
1.JS存放在代码中的位置 1.JS写在行间 <div style="background-color: red;" onclick="alert(1)" ...
JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性脱离文档流行内 ...
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
文章目录 1. 点击事件参数(click) 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件说明示例 2. 点击事件修饰符 2.1 .stop (阻止冒泡) 使用说明使用示例 2.2 c ...
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
1.this的使用 thisjs中的关键字js内部已经定义好了,可以不声明直接使用 this的指向问题1. 在函数外部使用this指向的是window2. 在函数内部使用有名函数直接调用函数 thi ...
vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

JS基础-特效篇（事件对象）03-放大镜

JS基础-特效篇（事件对象）03-放大镜相关推荐

最新文章

热门文章