版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
JQuery 动画
首先动画有几个重要的参数，分别是
-
动画执行速度
speed：有三个初始的，分别是fast、normal、slow，时常分别是200、400、600毫秒，默认是normal -
过度效果
easing：一种是swing，这个是有加速度的变化，先加速，在减速
另一种是linear，就是线性变化，匀速变化 -
成功回调函数
callback：当动画执行 完毕 之后才执行这个函数
多的知识点：还有一种函数叫做handler 处理函数，这个只要发生了，就开始执行，比方说点击事件callback：
隐藏
$("#div1").hide(5000,"linear",function () {
console.log(1);
});
演示如下
可以看到 hide 的变换是 宽和高都在变小，最后！！自动给他个 display:none;
如果hide里边没有参数，那么就是直接给他个 display:none;
显示
$("#div1").show();
总结
| 效果 | 方法 |
|---|---|
| 隐藏 | hide() |
| 显示 | show() |
| 滑入 | slideUp() |
| 滑出 | slideDown() |
国庆后的复习
两个数的置换
在算法里呢！
取整 （骚操作）
取反取反
var a = 1.999;
/*取整*/
console.log(~~a);
表格中插入
前提：body 中已经写好了 tr 和 td
重要知识点：
<script>
for(var i = 0;i < $("tr").length;i++){
var obj = Object.keys(arr[i]);
/*tr[0].children.length();这个是找到此节点中的所有元素*/
for(var j = 0;j < $("tr")[i].children.length;j++){
/*这个是Object.keys(obj) 这个是提取出来所有 key 并且是数组*/
$("tr")[i].children[j].innerText = arr[i][obj[j]];
}
}
</script>
iframe内嵌页
跟 a 标签相类似，最重要的属性还是 src
frameborder 规定是否显示框架周围的边框，值为 1 或 0
//这里做几个按钮切换网页的效果
<body>
<div class="one">
<button>change0</button>
<button>change1</button>
<button>change2</button>
</div>
<iframe src="" frameborder="0" width="100%" height="560"></iframe>
<div class="two"></div>
</body>
<script>
var btn = document.querySelectorAll("button");
var ifr = document.querySelector("iframe");
var arr = ["demo1.html","demo2.html","https://www.baidu.com"];
btn[0].onclick = function () {
ifr.src = arr[0];
};
btn[1].onclick = function () {
ifr.src = arr[1];
};
btn[2].onclick = function () {
ifr.src = arr[2];
}
</script>
旋转
有几个
<head>
<meta charset="UTF-8">
<title>旋转</title>
<style>
.box{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 10px;
transform: translate(-50%,-50%);
}
.item{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
/*背面隐藏*/
backface-visibility: hidden;
cursor: pointer;
/*只要变化的就能设置，比如：宽高透明度等
设置多个就用all*/
transition: transform 3s;
}
.div1{
background:-webkit-linear-gradient(orange,red) no-repeat;
transform: rotateY(180deg);
}
.div2{
background:-webkit-linear-gradient(#6441A5,#2a0845) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<div class="div1 item"></div>
<div class="div2 item"></div>
</div>
</body>
<script>
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
div1.onclick = function () {
div1.style.transform = "rotateY(180deg)";
div2.style.transform = "rotateY(0deg)";
};
div2.onclick = function () {
div2.style.transform = "rotateY(180deg)";
div1.style.transform = "rotateY(0deg)";
}
</script>