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="data:images/secNine-01.png" />
</div>
</div>
<div class="swiper-slide">
<div class="secNinePic">
<img src="data:images/secNine-02.png" />
</div>
</div>
<div class="swiper-slide">
<div class="secNinePic">
<img src="data: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、待续
JS/JQ动画效果的更多相关文章
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- js实现动画效果框架
RT,是参照慕课的教程做的.两个多小时的教程,看完了然后晚上的时候做了下,看的时候感觉明白了,但其实做的时候还是有很多小细节需要处理的. 上代码,思想什么的直接去慕课看教程就好了.点击这里 注释也比较 ...
- 有时候做JQ动画，鼠标经过，它会不停自己抖动不停，解决方法（此处，是兼容IE ，当鼠标经过，遮罩层从下移到上边的JQ动画效果）
<style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...
- animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法
$(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...
- jq动画效果慢慢滚动到固定位置
function contentTop(top){ $('body,html').animate({ scrollTop: top }, 500 ); } 获取元素top传入即可 contentTop ...
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
随机推荐
- 数据库中的ACID
参考链接:什么是ACID 数据库中的锁机制
- CI_CD 简单了解
- Switch语句的条件只能接受什么类型的值
switch语句只能针对基本数据类型使用,这些类型包括int.char.枚举.bool等.对于其他类型,则必须使用if语句. 在一个 switch 中可以有任意数量的 case 语句.每个 case ...
- TIME_WAIT 优化注意事项
不同时开启tcp_timestamps和tcp_tw_recycle的场景描述 FULL NAT下 FULL NAT 在client请求VIP 时,不仅替换了package 的dst ip,还替换了 ...
- IDEA中 mybatis-config、applicationContext.xml、log4j.properties、SpringMVC等文件没有图标标识符号，不是一个xml文件
1. 举例说明 mybatis-config.xml文件不显示图标,识别不出该xml文件 2. 解决办法 1)先点击 File -> Settings-,然后贴入下面代码 (2) 具体操作如下图 ...
- 简单的axios请求返回数据解构赋值
本地 data.json 文件 { "name": "大熊", "age": 18, "fnc": [ 1, 2, 3 ...
- String和int、long、double等基本数据类型的转换
学习目标: 掌握Java的基本数据类型与String的转换 学习内容: 1.转化规则 String 转 基本数据类型 基本数据类型 变量 = 包装类.Parse基本数据类型(String); // c ...
- CSS简单样式练习（三）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- 2021年Java后端技术知识体系
-----2021/1/22