<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运动框架</title>
<style>
section{
width: 200px;
height: 200px;
background: red;
opacity: 0.3;
margin-top: 20px;
}
</style>
</head>
<body>
<section id="sec1"></section>
<section id="sec2"></section>
<section id="sec3"></section>
</body>
</html>
<script>
let sec=getName('section')
for(let i=0;i<sec.length;i++){
sec[i].move=null;
sec[i].opacity=30
sec[i].οnmοuseοver=function(){
Start(this,'width',400)
}
sec[i].οnmοuseοut=function(){
Start(this,'width',200)
}
}
let se=getId('sec1')
se.οnmοuseοver=function(){
Start(this,'height','500')
}
//封装获取id方法
function getId(id){
let ids=document.getElementById(id);
return ids
}
//封装获取name的方法
function getName(classname) {
let name=document.getElementsByTagName(classname)
return name
}
//封装获取样式表的函数
function getStyle(obj,attr) {
if(obj.getCurrentStyle){
return obj.getCurrentStyle[attr]
}else{
return getComputedStyle(obj,1)[attr]
}
}
//运动框架 obj标签 attr属性 itarg目标值
function Start(obj,attr,iTarg) {
//速度
let speed=0;
//清空当前标签的延迟函数
clearInterval(obj.move)
//重新开启当前标签的延迟函数
obj.move=setInterval(function () {
//如果等于透明度属性
if(attr=='opacity'){
//目标值-当前属性值
speed=iTarg-getStyle(obj,attr)
}else{
//缓冲运动公式 （目标值-元素当前位置）/运动速度
speed=(iTarg-parseInt(getStyle(obj,attr)))/6
//speed大于0向上取值 小于0向下取值
speed=speed>0?Math.ceil(speed):Math.floor(speed)
}
//目标值等等于获取元素的位置清除当前函数
if(iTarg==getStyle(obj,attr)){
clearInterval(obj.move)
}else{
//等等于透明度
if(attr=='opacity'){
obj.style.opacity=speed/100
}else{
//obj.style[attr] 使用中括号获取属性名
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px'
}
}
},30)
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
