Web前端------缓动框架的封装、行内样式与内嵌样式等的获取
2018-05-24 本文已影响31人
Peak_One
之前版本的缓动框架
原有的方法：div.style.width :这个方法比较固定，不能用变量或者字符串的形式更换属性，不方便我传值获取属性，和给属性赋值。
属性值的获取和属性的赋值
div.style["width"] = "5000px";
可以通过传字符串或者变量的方式获取和赋值属性。
缺点：它的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是，获取值的时候有问题了。
之前版本的缓动动画框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>运动到200</button>
<button>运动到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
animate(div,200);
}
btnArr[1].onclick = function () {
animate(div,400);
}
//缺点：1.只能获取行内式，不能获取内嵌和外链样式。导致我们获取left值的时候,用offsetLeft模拟
//2.只能放入一个属性。（一个方法只能操作一个属性）
//3.一次性放入多个属性值。
function animate(ele,target){
//清除定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部：
//获取步长
var step = (target - ele.offsetLeft)/10;
//二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
//赋值
ele.style.left = ele.offsetLeft + step + "px";
//清除定时器
console.log(1);
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
</script>
</body>
</html>
获取行内样式、内嵌样式、外链样式的方法介绍
只能获取行内式：（既能获取又能赋值）
- div.style.width 单个赋值
- div.style[“width”] 变量赋值
获取任意类型的CSS样式的属性值：（只能获取）
- div.currentStyle.width; 单个获取 (IE678)
- window.getComputedStyle(div,null).width;
example：
div.currentStyle[“width”]; 变量获取 (IE678)
window.getComputedStyle(div,null)[“width”];
参数1：获取属性的元素。
参数2：伪元素，C3学习。
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
/*border: 1px solid #000;*/
padding: 10px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
<script>
//赋值：div.style.....
var div = document.getElementsByTagName("div")[0];
div.style.width = "1000px";
//获取值：
// console.log(div.offsetWidth);
// console.log(div.style.width);
// console.log(div.style.border);
//获取行内式和内嵌式
// console.log(typeof window.getComputedStyle(div,null));
// console.log(window.getComputedStyle(div,null).border);
// console.log(window.getComputedStyle(div,null)["background-color"]);
// console.log(div.currentStyle.padding);
// console.log(div.currentStyle["background-color"]);
console.log(getStyle(div,"padding"));
console.log(getStyle(div,"background-color"));
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
修改后的多个版本的缓动框架
- 单个属性的缓动框架封装
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>运动到400</button>
<button>宽度变为400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
animate(div,"left",400);
}
btnArr[1].onclick = function () {
animate(div,"width",400);
}
//参数变为3个
function animate(ele,attr,target){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//四部
var leader = parseInt(getStyle(ele,attr)) || 0;
//1.获取步长
var step = (target - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[attr] = leader + "px";
//4.清除定时器
if(Math.abs(target-leader)<=Math.abs(step)){
ele.style[attr] = target + "px";
clearInterval(ele.timer);
}
},25);
}
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 多个属性的缓动框架的封装（例子为：大小和距离）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>运动到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json = {"left":10,"top":200,"width":300,"height":200};
animate(div,json);
}
//参数变为3个
function animate(ele,json){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
console.log(1);
//4.清除定时器
// if(Math.abs(json[k]-leader)<=Math.abs(step)){
// ele.style[k] = json[k] + "px";
// clearInterval(ele.timer);
// }
}
},25);
}
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 缓动动画（清除定时器版）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>运动到400</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json = {"left":10,"top":200,"width":300,"height":200};
animate(div,json);
}
//参数变为3个
function animate(ele,json){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
}
},25);
}
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
- 实现回调函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
top: 40px;
left: 10px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button>运动到400然后回来</button>
<div></div>
<script>
var btnArr = document.getElementsByTagName("button");
var div = document.getElementsByTagName("div")[0];
btnArr[0].onclick = function () {
var json1 = {"left":300,"top":200,"width":300,"height":200};
var json2 = {"left":10,"top":30,"width":100,"height":100};
animate(div,json1, function () {
animate(div,json2, function () {
animate(div,json1);
});
});
}
//参数变为3个
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader = parseInt(getStyle(ele,k)) || 0;
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
ele.style[k] = leader + "px";
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},25);
}
//兼容方法获取元素样式
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
</script>
</body>
</html>
手风琴案例(图片资源请自行配置)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul{list-style: none}
*{margin:0; padding:0;}
div{
width: 1150px;
height: 400px;
margin:50px auto;
border:1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
<script src="../jquery1.0.0.1.js"></script>
<script>
window.onload = function () {
//需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，回复原样。
//步骤：
//1.给li添加背景
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
//3.移开大盒子，回复原样
var div = document.getElementsByTagName("div")[0];
var liArr = div.getElementsByTagName("li");
//1.给li添加背景
for(var i=0;i<liArr.length;i++){
liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
//2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
liArr[i].onmouseover = function () {
//排他思想
for(var j=0;j<liArr.length;j++){
//引用框架实现宽度变窄
animate(liArr[j],{"width":100});
}
//剩下他自己
animate(this,{"width":800})
}
}
//3.移开大盒子，回复原样
div.onmouseout = function () {
for(var j=0;j<liArr.length;j++){
//引用框架实现宽度变窄
animate(liArr[j],{"width":240});
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
效果如下：
手风琴.gif
360开机动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 322px;
position: fixed;
bottom:0;
right:0;
}
span{
position: absolute;
top:0;
right:0;
width:30px;
height: 20px;
cursor: pointer;
}
</style>
<script src="../jquery1.0.0.1.js"></script>
<script>
window.onload = function () {
//需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
var guanbi = document.getElementById("guanbi");
var box = guanbi.parentNode;
var b = document.getElementById("b");
guanbi.onclick = function () {
//下面的盒子高度变为0，然后大盒子的宽在变为0.
animate(b,{"height":0}, function () {
animate(box,{"width":0});
});
}
}
</script>
</head>
<body>
<div class="box">
<span id="guanbi"></span>
<div class="hd" id="t">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="b">
<img src="images/b.jpg" alt=""/>
</div>
</div>
</body>
</html>
效果如下：
360开机.gif
素材：
t.jpg
b.jpg
走马灯效果
Html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
<script src="js/jquery1.0.0.1.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<!--五张图片-->
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<!--左右切换按钮-->
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>
</body>
</html>
css.css
@charset "UTF-8";
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
width:1200px;
margin:10px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(../images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(../images/next.png);
}
index.js
/**
* Created by Lenovo on 2016/9/13.
*/
window.onload = function () {
//需求：点击足有按钮实现旋转木马。
//原理：点击右侧按钮，让3号盒子的样式赋值给2号盒子，然后2->1,1->5,5->4,4->3。。。
//左侧同理。
//步骤：
//1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
//2.让页面加载出所有的盒子的样式。
//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
//4.书写函数。
// (操作数组。正向旋转：删除数组中第一个样式，添加到数组中的最后一位)
// (操作数组。反向旋转：删除数组中最后一个样式，添加到数组中的第一位)
var json = [
{ // 1
width:400,
top:70,
left:50,
opacity:20,
z:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:80,
z:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:80,
z:3
},
{ //5
width:400,
top:70,
left:750,
opacity:20,
z:2
}
];
//0.获取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children;
//设置一个开闭原则变量，点击以后修改这个值。
var flag = true;
//1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
slide.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":0});
}
//2.让页面加载出所有的盒子的样式。
//for(var i=0;i<liArr.length;i++){
// //利用animate()框架让指定的属性，缓慢运动到指定位置。
// animate(liArr[i],{
// "width":json[i].width, //第一个li，必须对应第一个数组元素中的第一个的指定属性
// "top":json[i].top,
// "left":json[i].left,
// "opacity":json[i].opacity,
// "zIndex":json[i].z
// });
// //liArr[i].style.width = json[i].width+"px";
// //liArr[i].style.top = json[i].top+"px";
// //liArr[i].style.left = json[i].left+"px";
// //liArr[i].style.opacity = json[i].opacity/100;
// //liArr[i].style.zIndex = json[i].z;
//}
move();
//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
//arrowChildren[0].
//arrowChildren[1].
//利用for...in...绑定事件。绑定后利用元素的className属性知道是前一个还是后一个，然后调用函数。
for(var k in arrowChildren){
arrowChildren[k].onclick = function () {
if(this.className === "prev"){
if(flag === true){
flag = false;
move(true);
//点击一次立刻修改为false，这样儿别人就不能在点击。（点击也不执行move()）
}
}else{
if(flag){
flag = false;
move(false);
}
}
}
}
//4.书写函数。
// (操作数组。正向旋转：删除数组中第一个样式，添加到数组中的最后一位)
// (操作数组。反向旋转：删除数组中最后一个样式，添加到数组中的第一位)
function move(bool){
//判断：如果等于undefined,那么就不执行这两个if语句
//if(bool === true || bool === false){
if(bool !== undefined){
if(bool){
// (操作数组。反向旋转：删除数组中最后一个元素，添加到数组中的第一位)
//json.push();//在最后添加
//json.pop();//删除最后一位
//json.unshift();//在最前面添加
//json.shift();//删除第一位
//var ele = json.pop();
//json.unshift(ele);
json.unshift(json.pop());
}else{
// (操作数组。正向旋转：删除数组中第一个元素，添加到数组中的最后一位)
//var ele = json.shift();
//json.push(ele);
json.push(json.shift());
}
}
//在次为页面上的所有li赋值属性，利用缓动框架
for(var i=0;i<liArr.length;i++){
//利用animate()框架让指定的属性，缓慢运动到指定位置。
animate(liArr[i],{
"width":json[i].width, //第一个li，必须对应第一个数组元素中的第一个的指定属性
"top":json[i].top,
"left":json[i].left,
"opacity":json[i].opacity,
"zIndex":json[i].z
}, function () {
//回调函数，所有程序执行完毕，在初始化flag的值为true
flag = true;
});
}
}
}
jquery1.0.0.1.js
/**
* Created by Lenovo on 2016/9/11.
*/
function show(ele){
ele.style.display = "block";
}
/**
* 获取元素样式兼容写法
* @param ele
* @param attr
* @returns {*}
*/
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
//参数变为3个
//参数变为3个
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
//四部
var leader;
//判断如果属性为opacity的时候特殊获取值
if(k === "opacity"){
leader = getStyle(ele,k)*100 || 1;
}else{
leader = parseInt(getStyle(ele,k)) || 0;
}
//1.获取步长
var step = (json[k] - leader)/10;
//2.二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//3.赋值
//特殊情况特殊赋值
if(k === "opacity"){
ele.style[k] = leader/100;
//兼容IE678
ele.style.filter = "alpha(opacity="+leader+")";
//如果是层级，一次行赋值成功，不需要缓动赋值
//为什么？需求！
}else if(k === "zIndex"){
ele.style.zIndex = json[k];
}else{
ele.style[k] = leader + "px";
}
//4.清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},25);
}
//获取屏幕可视区域的宽高
function client(){
if(window.innerHeight !== undefined){
return {
"width": window.innerWidth,
"height": window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
}else{
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
js.js
/**
* Created by Lenovo on 2016/9/13.
*/
window.onload = function () {
var arr = [
{ // 1
width:400,
top:70,
left:50,
opacity:20,
zIndex:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:80,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:80,
zIndex:3
},
{ //5
width:400,
top:70,
left:750,
opacity:20,
zIndex:2
}
];
//0.获取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children;
//设置一个开闭原则变量，点击以后修改这个值。
var flag = true;
//1.鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
slide.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":0});
}
move();
//3.把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
arrowChildren[0].onclick = function () {
if(flag){
flag = false;
move(true);
}
}
arrowChildren[1].onclick = function () {
if(flag){
flag = false;
move(false);
}
}
//4.书写函数。
function move(bool){
//判断：如果等于undefined,那么就不执行这两个if语句
if(bool === true || bool === false){
if(bool){
arr.unshift(arr.pop());
}else{
arr.push(arr.shift());
}
}
//在次为页面上的所有li赋值属性，利用缓动框架
for(var i=0;i<liArr.length;i++){
animate(liArr[i],arr[i], function () {
flag = true;
});
}
}
}
其中图片素材自己配置
效果展示：
走马灯.gif
欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！
0.jpg
