js高级动画02--阻止事件冒泡，默认行为以及一些案例
2024-05-10 04:27:38
1.阻止事件冒泡：
<style>div {padding: 20px;background-color: crimson;}p {padding: 20px;background-color: pink;}</style>
</head>
<body><div><p><button>按钮</button></p></div><script>var div = document.querySelector('div');var p = document.querySelector('p');var btn = document.querySelector('button');div.onclick = function() {console.log('div');event.stopPropagation() //阻止冒泡，最终只打印div}p.onclick = function() {console.log('p'); //最终打印p,button 由于冒泡event.stopPropagation() //阻止冒泡，最终只打印p}btn.onclick = function() {console.log('button'); //由于冒泡,最终打印div,p,button event.stopPropagation() //阻止冒泡，最终打印btn}</script>
</body>
2.阻止事件默认行为：一般默认行为是a链接的跳转
<body><a href="http://www.baidu.con">点我跳转到百度</a><script>var a = document.querySelector('a');a.onclick = function() {console.log(1111);event.preventDefault();}</script>
</body>
3.获取浏览器的body兼容性问题
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 2000px;}</style>
</head><body><div></div><script>document.body.onscroll = function() {console.log(document.documentElement.scrollTop);console.log(document.body.scrollTop); }</script>
</body></html>
当滚动条向下滑动时，document.documentElement.scrollTop随着滚动条的变化而变化，而document.body.scrollTop则为0；如果把<!DOCTYPE html>去掉，则document.body.scrollTop会随着滚动条的变化而变化，而document.documentElement.scrollTop则为0；document.documentElement.scrollTop和document.body.scrollTop总有一个是随着滚动条的变化而变化，另一个为0；
4.返回顶部动画
<style>* {margin: 0;padding: 0;}div {height: 2000px;}.up {position: fixed;right: 10px;width: 100px;height: 100px;top: 800px;display: none;}</style>
</head><body><div></div><img class="up" src="data:images/up.jpg" alt=""><script>var up = document.querySelector('.up');var timer = null;document.body.onscroll = function() {if (document.documentElement.scrollTop || document.body.scrollTop > 0) {up.style.display = 'block'} else {up.style.display = 'none'}up.addEventListener('click', function() {clearInterval(timer)timer = setInterval(function() {//处理兼容性问题if (document.documentElement.scrollTop > 0) {document.documentElement.scrollTop--console.log(document.documentElement.scrollTop);if (document.documentElement.scrollTop == 0) {clearInterval(timer)}} else {if (document.body.scrollTop > 0) {document.body.scrollTop--console.log(document.body.scrollTop);if (document.body.scrollTop == 0) {clearInterval(timer)}}}}, 10)})}</script>
</body>
5.碰壁反弹动画
<style>.box {position: relative;width: 300px;height: 400px;background-color: pink;}.ball {position: absolute;width: 30px;height: 30px;border-radius: 50%;background-color: cyan;}#start,#end {width: 100px;font-size: 20px;margin-top: 10px;}</style>
</head><body><div class="box"><div class="ball"></div></div><button id='start'>开始</button><button id="end" disabled=true>结束</button><script>var box = document.querySelector('.box');var ball = document.querySelector('.ball');var start = document.querySelector('#start');var end = document.querySelector('#end');var timer = null;var ballLeft = 0;var ballTop = 0;//分别给小球运动距离上面和左面定义两个标志位，当小于父盒子临界值的时候，为true，当大于父盒子临界值的时候为false；var leftFlag = true;var topFlag = true;start.onclick = function() {console.log(this.style.disabled);this.disabled = true;end.disabled = false;timer = setInterval(function() {if (leftFlag) {ballLeft++;ball.style.left = ballLeft + 'px';console.log("ballLeft" + ballLeft);//判断小球左右移动时是否超出父盒子右边的临界值if (ball.offsetLeft > box.clientWidth - ball.clientWidth) {leftFlag = false;}} else {ballLeft--;ball.style.left = ballLeft + 'px';console.log("ballLeft" + ballLeft);//判断小球左右移动时是否超出父盒子上边的临界值if (ball.offsetLeft == 0) {leftFlag = true;}}if (topFlag) {ballTop++;ball.style.top = ballTop + 'px';//判断小球上下移动时是否超出父盒子下边的临界值if (ball.offsetTop > box.clientHeight - ball.clientHeight) {topFlag = false;}} else {ballTop--;ball.style.top = ballTop + 'px';//判断小球上下移动时是否超出父盒子上边的临界值if (ball.offsetTop == 0) {topFlag = true;}}}, 10)}end.onclick = function() {this.disabled = true;start.disabled = false;clearInterval(timer)}</script>
</body>
6.放大镜放大动画：
方法1：
最终的放大效果利用父元素scrollLeft和scrollTop属性
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.smallBox,.bigBox {float: left;width: 300px;height: 300px;border: 1px solid red;overflow: hidden;}.bigBox {width: 100px;height: 100px;}.smallBox {position: relative;margin-right: 100px;}.bigBox {position: relative;}#small {width: 300px;height: 300px;}#big {position: absolute;width: 600px;height: 600px;}#shandow {display: none;position: absolute;width: 50px;height: 50px;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);}</style>
</head><body><div class="smallBox"><div id="shandow"></div><img id='small' src="data:images/xiaoxin.jpg" alt=""></div><div class="bigBox"><img id="big" src="data:images/xiaoxin.jpg" alt=""></div><script>var smallBox = document.querySelector('.smallBox');var shandow = document.querySelector('#shandow');var bigBox = document.querySelector('.bigBox');var bigImg = document.querySelector('#big');var smallImg = document.querySelector('#small');//鼠标移入最外层盒子，里面的阴影盒子显示，移除隐藏smallBox.onmouseenter = function() {shandow.style.display = 'block';console.log(bigImg.clientHeight / smallBox.clientHeight);// console.log(event.clientX);}smallBox.onmouseleave = function() {shandow.style.display = 'none';}smallBox.onmousemove = function() {var boxLeft = event.clientX - shandow.offsetWidth / 2;var boxTop = event.clientY - shandow.offsetHeight / 2;shandow.style.top = boxTop + 'px';shandow.style.left = boxLeft + 'px';if (boxLeft > smallBox.clientWidth - shandow.clientWidth) {shandow.style.left = (smallBox.clientWidth - shandow.clientWidth) + 'px';}if (boxTop > smallBox.clientHeight - shandow.clientHeight) {shandow.style.top = (smallBox.clientHeight - shandow.clientHeight) + 'px';}if (boxTop < 0) {shandow.style.top = 0}if (boxLeft < 0) {shandow.style.left = 0}var bigTop = parseInt(shandow.style.top) * (bigImg.clientHeight / smallImg.clientHeight)var bigLeft = parseInt(shandow.style.left) * (bigImg.clientWidth / smallImg.clientWidth);// *(bigImg.clientHeight / shandow.clientHeight)// * (bigImg.clientWidth / shandow.clientWidth)bigBox.scrollLeft = bigLeft;bigBox.scrollTop = bigTop;}</script>
</body>
方法2:最后的放大效果利用的是给定位的子元素改变top和left的值，并且利用最终
在小图片里面阴影移动的距离/阴影移动的最大距离 = 大图片移动的距离/大图片最大的移动距离获得
大图片的移动距离 = 阴影移动的距离 * 大图片最大的移动距离 / 阴影移动的最大距离<style>* {margin: 0;padding: 0;}.smallBox,.bigBox {float: left;width: 300px;height: 300px;border: 1px solid red;overflow: hidden;}.bigBox {width: 100px;height: 100px;}.smallBox {position: relative;margin-right: 100px;}.bigBox {position: relative;}#small {width: 300px;height: 300px;}#big {position: absolute;width: 600px;height: 600px;}#shandow {display: none;position: absolute;width: 50px;height: 50px;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);}</style>
</head><body><div class="smallBox"><div id="shandow"></div><img id='small' src="data:images/xiaoxin.jpg" alt=""></div><div class="bigBox"><img id="big" src="data:images/xiaoxin.jpg" alt=""></div><script>var smallBox = document.querySelector('.smallBox');var shandow = document.querySelector('#shandow');var bigBox = document.querySelector('.bigBox');var bigImg = document.querySelector('#big');var smallImg = document.querySelector('#small');//鼠标移入最外层盒子，里面的阴影盒子显示，移除隐藏smallBox.onmouseenter = function() {shandow.style.display = 'block';console.log(bigImg.clientHeight / smallBox.clientHeight);// console.log(event.clientX);}smallBox.onmouseleave = function() {shandow.style.display = 'none';}smallBox.onmousemove = function() {var boxLeft = event.clientX - shandow.offsetWidth / 2;var boxTop = event.clientY - shandow.offsetHeight / 2;shandow.style.top = boxTop + 'px';shandow.style.left = boxLeft + 'px';//阴影部分最大的移动距离 ：var shandowLeftMax = smallBox.clientWidth - shandow.clientWidth;var shandowTopMax = smallBox.clientHeight - shandow.clientHeight;var bimgLeftMax = bigImg.clientWidth - bigBox.clientWidth;var bimgTopMax = bigImg.clientHeight - bigBox.clientHeight;if (boxLeft > shandowLeftMax) {shandow.style.left = (smallBox.clientWidth - shandow.clientWidth) + 'px';} else if (boxLeft < 0) {shandow.style.left = 0;}if (boxTop > shandowTopMax) {shandow.style.top = (smallBox.clientHeight - shandow.clientHeight) + 'px';} else if (boxTop < 0) {shandow.style.top = 0}//阴影部分移动的距离 / 阴影部分最大的移动距离 = 大图片移动的距离 / 大图片最大的移动距离//大图片移动的距离 = 阴影部分移动的距离 * 大图片最大的移动距离 / 阴影部分最大的移动距离var bigTop = shandow.offsetTop * bimgTopMax / shandowTopMax;var bigLeft = shandow.offsetLeft * bimgLeftMax / shandowLeftMax;bigImg.style.left = -bigLeft + 'px';bigImg.style.top = -bigTop + 'px';console.log(shandow.style.top);console.log(-bigTop + 'px');}</script>
</body>
7.手风琴动画：
<style>* {margin: 0;padding: 0;}div {width: 800px;height: 50px;color: white;font-size: 14px;line-height: 50px;text-align: center;background-color: black;margin-bottom: 2px;}p {width: 800px;display: none;color: white;text-indent: 2em;background-color: #167EA0;/* 当给p添加动画的时候，p里面的内容溢出掩盖下面的内容的时候，隐藏掉 */overflow: hidden;}</style>
</head><body><div class="box">1 《抉择》</div><p class="p1"></p><div class="box">2 《生命》</div><p class="p2"></p><div class="box">3 《大小》</div><p class="p3"></p><div class="box">4 《崇拜》</div><p class="p4"></p>
</body>
<script>// timer = setInterval(function(){// },10)var divList = document.querySelectorAll('.box');var pList = document.querySelectorAll('p');var strList = ["人的一生常处于抉择之中，如：念哪一间大学？选哪一种职业？娶哪一种女子？……等等伤脑筋的事情。一个人抉择力的有无，可以显示其人格成熟与否。倒是哪些胸无主见的人，不受抉择之苦。因为逢到需要决定的时候，他总是求询别人说：'嘿，你看怎么做？'大凡能够成大功业的人，都是抉择力甚强的人。他知道事之成败，全在乎已没有人可以代劳，更没有人能代你决定。在抉择的哪一刻，成败实已露出端倪。","生命，也许是宇宙之间唯一应该受到崇拜的因素。生命的孕育、诞生和显示本质是一种无比激动人心的过程。生命像音乐和画面一样暗自挟带着一种命定的声调或血色，当它遇到大潮的袭卷，当它听到号角的催促时，它会顿时抖擞，露出本质的绚烂和激昂。当然，这本质更可能是卑污、懦弱、乏味的;它的主人并无选择的可能。应当承认，生命就是希望。应当说，卑鄙和庸俗不该得意过早，不该误认为它们已经成功地消灭了高尚和真纯。伪装也同样不能持久，因为时间像一条长河在滔滔冲刷，卑鄙者、奸商和俗棍不可能永远戴着教育家、诗人和战士的桂冠。在他们畅行无阻的生涯尽头，他们的后人将长久地感到羞辱。","一位朋友谈到他亲戚的姑婆，一生从来没有穿过合脚的鞋子，常穿着巨大的鞋子走来走去。儿子晚辈如果问她，她就会说：'大小鞋都是一样的价钱，为什么不买大的？'每次我转述这个故事，总有一些人笑得岔了气。其实，在生活里我们会看到很多这样的'姑婆'。没有什么思想的作家，偏偏写着厚重苦涩的作品;没有什么内容的画家，偏偏画着超级巨画;经常不在家的商人，却有非常巨大的家园。许多人不断地追求巨大，其实只是被内在贪欲推动着，就好像买了特大号的鞋子，忘了自己的脚一样。不管买什么鞋子，合脚最重要，不论追求什么，总要适可而止。","我崇拜高尚的生命的秘密。我崇拜这生命在降生、成长、战斗、伤残、牺牲时迸溅出的钢花焰火。我崇拜一个活灵灵的生命在崇山大河，在海洋和大陆上飘荡的自由。是的，生命就是希望。它飘荡无定，自由自在，它使人类中总有一支血脉不甘于失败，九死不悔地追寻着自己的金牧场。"];var timer = null;for (let i = 0; i < divList.length; i++) {divList[i].onclick = function() {clearInterval(timer)for (var j = 0; j < divList.length; j++) {pList[j].style.display = 'none';}pList[i].style.display = 'block'pList[i].innerHTML = strList[i];var numHeight = 0;timer = setInterval(function() {numHeight++pList[i].style.height = numHeight + 'px';if (numHeight == 200) {clearInterval(timer)}}, 10)}}
</script>
js高级动画02--阻止事件冒泡，默认行为以及一些案例相关推荐
- JS——事件冒泡与阻止事件冒泡
文章目录 前言 一.DOM事件流 1.什么是事件流呢? 2.事件流的两种方式 2.1 事件冒泡 2.2 事件捕获 2.3 DOM事件的3个阶段 二.事件对象 1.什么是事件对象 2.事件对象的使用 3 ...
- JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的 事件代理）
事件对象概念 事件处理函数:事件发生时调用的函数 事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
- js阻止默认事件（a标签跳转），阻止事件冒泡
最近刚学习完js基础,今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记,于是写这篇文章算是做一个总结,也是加深一下印象. 1.阻止默认事件 在html中有很多自带默认事件的元素,很典型的例子:a ...
- Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
- JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
- js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
- JS阻止事件冒泡和默认行为
1.首先对事件冒泡和默认行为以及要用到的事件对象event有个认识 对事件冒泡的理解是当触发一个子元素的事件时,同时它的父元素的事件也会依次被触发.即事件从最低层元素依次向最外层元素触发 默认事件(行 ...
- Js阻止事件冒泡与阻止默认事件
1.event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行.不让事件向document上蔓延,但是默认 ...
最新文章
- MII 功能简介（论坛整理）
- 8.3 直接插入排序
- matlab概率论实验 分别掷硬币1,基于Matlab的概率论仿真实验
- 转android项目开发 工作日志 2011.10.8--bundle类使用
- Codeforces比赛规则梳理
- C语言字符串类型转换为整型,c语言中将一个字符串转换到整型数据类型的函数是什么？...
- MWD仪器组装和原理
- clickhouse初体验之create insert update select group by
- 【词库管理】新词提取小工具
- liunx下查看tomcat占用的端口号
- RNN实现股票预测(别当真)
- Hive 性能优化（全面）解决数据倾斜等问题
- java高并发实际处理简介
- 农场游戏的开发记录二
- C语言编译出现give arg types警告问题
- 【考试记录】Apsara Clouder云计算技能认证：网站建设：简单动态网站搭建
- 嵌入式桌面操作系统使用与制作攻略
- python中调用API的几种方式
- HTML静态分页（形如：首页，上一页，下一页，尾页）
- C语言练习题，从键盘任意输入一个整数，编程判断它的奇偶性