JS/JQ动画效果
1、弹出框
<style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.6); } .mask .login { width: 500px; height: 350px; background: #fff; margin: 150px auto; } </style> <a href="#">登录</a> <div class="mask" id="mask"> <div class="login" id="login"> </div> </div> <script> var a = document.getElementsByTagName("a")[0]; var mask = document.getElementById("mask"); a.onclick = function(event) { mask.style.display = "block"; // 阻止冒泡 event = event || window.event; if (event || event.stopPropagation()) { event.stopPropagation(); } else { event.cancelBubble = true; } } document.onclick = function(event) { event = event || window.event; // 兼容获取触动事件时被传递过来的对象 var aaa = event.target?event.target:event.srcElement; if (aaa.id !== "login") { mask.style.display = "none"; } } </script>
冒泡事件：
cancalBubblt()和stopPropagation()：它们相同之处在于都是用来阻止浏览器默认的事件冒泡行为。不同之处在于stopPropagation（）属于W3C标准，适用于Firefox等浏览器，但不支持IE；cancelBubble不符合W3C标准，只支持IE，所以很多时候结合起来使用。
语法：e.stopPropagation（），e代表事件传递的参数，代表事件的状态。
jQuery中对冒泡和默认行为的阻止方法同样可以写成：
event.preventDefault()——> return false; event.stopPropagation()——> return false；
2、响应式设置元素高度
封装一个方法，调用该方法，并传入不同参数，响应式设置高度随宽度适应。
// 用于设置单个元素宽高设置，divName为元素名，rate为高和宽的比 // 调用方法：setHeight(".wrapper", 1);--正方形 // 写法1： function setHeight(divName, rate) { var w = $(divName).width(); $(divName).css("height", rate * w + "px"); $(window).resize(function() { var w = $(divName).width(); $(divName).css("height", rate * w + "px"); }) } // 写法2： function setHeight(obj, n) { $(obj).css("height", function() { var oWidth = $(this).width() * n; $(this).height(oWidth); }) } // 不同元素宽高关系：如对象1的高度等于对象2的n倍 // 调用方法：rateObj("#div2", "#div1", 2);h function rateObj(obj1, obj2, n) { var oHeight = $(obj2).height()*n; $(obj1).css("height", oHeight); }
3、input的判断
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <title>input的设置及提交判断</title> <script src="../../DG/dealer/js/jquery-3.1.0.min.js"></script> <style> label { display: inline-block; width: 80px; } .submitBtn { width: 100px; height: 30px; text-align: center; background: #ccc; } div.changeC { background: #F07203 !important; } </style> <script> $(function() { var userN = $(".userN"); var phone1 = $(".phone1"); var phone2 = $(".phone2"); var textArea = $(".area"); // 提交时的判断 $(".submitBtn").click(function() { userN.focus(); phone1.focus(); phone2.focus(); textArea.focus(); if(userN.val()=="" || phone1.val()=="" || phone2.val()=="" || textArea.val()=="") { alert("请确保信息完整"); } else { alert("提交成功"); } }); // 表格信息都不为空时改变按钮颜色 $("input, textarea").on("input", function() { if($.trim($(".userN").val()) !== "" && $.trim($(".phone1").val()) !== "" && $.trim($(".phone2").val()) !== "" && $.trim($(".area").val()) !== "") { $(".submitBtn").addClass("changeC"); } if($(this).val() == "") { $(".submitBtn").removeClass("changeC"); } }) }) </script> </head> <body> <header> <h1>关于inputde</h1> <!-- 1、focus()元素被鼠标点击或是被tab定位就获得焦点，再取这个元素的值才是最新的。如果不加focus，点击提交获取的输入信息可能不是最新的，如点提交再重新编辑输入框，再提交，提示信息或是之前的。 2、maxlength对type="text"的框输入的字数有限制，但值为number不行 3、onkeyup="this.value=this.value.replace(/\D/g, \'\')",input的值只允许数字。 --> </header> <section> <label>姓名：</label><input class="userN" type="text" /></br> <label>手机1：</label><input class="phone1" type="text" maxlength="11" /></br> <label>手机2：</label><input class="phone2" type="text" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g, \'\')" /></br></br> <label>需求：</label><textarea class="area"></textarea> <div id="submitBtn" class="submitBtn">提交</div> </section> </body> </html>
4、弹框关闭
<script> $(function() { // $(".openStyle").click(function() { // $("#choiceStyle").css({"height":"4.864rem", "box-shadow":"1px 1px 3px 1px #ccc"}); // }) // 用这种方式弹框而不用上面那种是因为：上面那种只能在页面初始化时有些，当关闭弹框后就无法弹出了 $(".openStyle").click(function() { showStyle(event) }) }); function showStyle(event) { $("#choiceStyle").css({"height":"4.864rem", "box-shadow":"1px 1px 3px 1px #ccc"}); // 控制点击除弹框内容外区域就关闭遮罩而导致不能正常弹出遮罩 event = event || window.event; if(event || event.stopPropagation()) { event.stopPropagation(); } else { event.cancelBubble = true; } } // 点击除弹框内容外区域就关闭遮罩 document.onclick = function(event) { event = event || window.event; var aaa = event.target?event.target:event.srcElement; if (aaa.id !== "choiceStyle") { $("#choiceStyle").css({"height":"0px", "box-shadow":"none"}); } } </script>
5、swiper轮播设置
设置轮播中间比较大的效果：
首先，三个swiper-slide的容器相同，在这swiper-slide中里面添加相同宽高的div，其中这个div的宽高都比swiper-slide中的小，然后设置其中选中的那个div的宽高同swiper-slide相同即可。
<style>
.sectionNine {
width: 1130px;
height: 247px;
margin: 0 auto 10%;
border: 1px solid #ccc;
}
这里如果设置了slidesPerView: 3, 那么swiper-slide的宽的会由整个容器的宽度除3所得。
.sectionNine .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.secNinePic {
width: 310px;
height: 210px;
overflow: hidden;
}
.secNinePic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide-active .secNinePic { -
width: 362px;
height: 247px;
}
</style>
<div class="swiper-container sectionNine"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="secNinePic"> <img src="images/secNine-01.png" /> </div> </div> <div class="swiper-slide"> <div class="secNinePic"> <img src="images/secNine-02.png" /> </div> </div> <div class="swiper-slide"> <div class="secNinePic"> <img src="images/secNine-03.png" /> </div> </div> </div> </div> <script> $(function() { var swiper = new Swiper(".sectionNine", { slidesPerView: 3, centeredSlides: true, // 设置这个，使得中间 项有个swiper-slide-active类，通过这个类去设置中间项与其余两项区别 autoplay: 3000, speed: 2000, loop: true, noSwiping: false, paginationClickable: false, pagination: \'.swiper-pagination .brandSwiper\', autoplayDisableOnInteraction: false, observer: true, observeParents: true }) }) </script>
6、swiper图片预加载、中间大两边小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale, maximum-scale=1, minimum-scale=1" /> <title>内容归类</title> <link href="css/swiper.min.css" rel="stylesheet" /> <script src="js/jquery-3.1.0.min.js"></script> <script src="js/flexible.js"></script> <!--http://dsdximg.dsdxo2o.com/ad/2020033118412644180712.js--> <script src="js/swiper.min.js"></script> <style> * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .swiper-container { height: 6.756rem; margin: 2.702rem auto; border: 1px solid #000; } .swiper-slide { width: 50%; height: 100%; padding: 0.54rem 0; margin: 0 auto; -moz-transition: all .5s; /*设置属性过渡效果，这里指padding值*/ -webkit-transition: all .5s; transition: all .5s; } .bigCenter { width: 96%; height: 100%; overflow: hidden; } .bigCenter img {width: 100%;height: 100%;object-fit: cover;} .swiper-container .swiper-slide-active.swiper-slide { padding: 0.27rem 0; /*设置选中后padding值和原来不一样，改变选中元素高度*/ } .forBg { background-repeat: no-repeat; background-position: center; background-clip: border-box; } </style> </head> <body> <!-- 作者：535143741@qq.com 时间：2020-03-31 描述：在这个例子里，将涉及到以下几个需求， 1、移动端rem的使用，flexible.js(设置1rem = 37px) 2、swiper组件，中间位置较高，和左右两边的中线在一个水平线上； 3、swiper预加载使用(img或背景图)。 --> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 懒加载方式一： 背景图片 --> <div class="swiper-slide"> <div class="bigCenter forBg swiper-lazy" data-background="http://dsdximg.dsdxo2o.com/goods/202003311827433739154.jpg"> <div class="swiper-lazy-preloader"></div> </div> </div> <!-- 懒加载方式二： 图片--> <div class="swiper-slide"> <div class="bigCenter"> <!--<img src="img/img01.jpg" /> 设置懒加载会改成下面这样，--> <img class="swiper-lazy" data-src="http://dsdximg.dsdxo2o.com/goods/2020033118272410156671.jpg" /> <div class="swiper-lazy-preloader"></div> </div> </div> <div class="swiper-slide"> <div class="bigCenter"> <img class="swiper-lazy" data-src="http://dsdximg.dsdxo2o.com/goods/2020033118275076284651.jpg" /> <div class="swiper-lazy-preloader"></div> </div> </div> <div class="swiper-slide"> <div class="bigCenter"> <img class="swiper-lazy" data-src="http://dsdximg.dsdxo2o.com/goods/202003311827397252206.jpg" /> <div class="swiper-lazy-preloader"></div> </div> </div> <div class="swiper-slide"> <div class="bigCenter"> <img class="swiper-lazy" data-src="http://dsdximg.dsdxo2o.com/goods/2020033118274722242062.jpg" /> <div class="swiper-lazy-preloader"></div> </div> </div> </div> </div> <script> var swiper = new Swiper(".swiper-container", { slidesPerView: \'auto\', centeredSlides: true, loop: true, autoplay: 3000, speed: 1000, lazyLoading: true, // 预加载 watchSlidesProgress: true, // 设置watchSlidesVisibility就要设置这个 watchSlidesVisibility: true, // 设置slidesPerView就要设置这个 lazyLoadingInPrevNext: true, // 提前预加载 lazyLoadingPrevNextAmount: 2 }) </script> </body> </html>
7、待续
版权声明：本文为L-xjco原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。