有四个红色div，当鼠标移入时，让红色的div以缓冲速度变宽，鼠标移开时，让红色div以缓冲速度回到原来的宽度，且移入时位置发生变化，移出又回到原来的位置。
<style>
div{
width: 100px;
height: 100px;
background-color: red;
margin-top: 5px;
position: relative;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="animateAction.js"></script>
//引入的封装方法在文章最底下
<script>
//获取4个div
let divList = document.getElementsByTagName('div')
//遍历所有的div
for(let div of divList){
let w = div.offsetWidth //获取初始值
let left = parseFloat(getStyle(div,'left'))
let top = parseFloat(getStyle(div,'top'))
//给div加移入事件，控制宽度变化，变为400px
div.onmouseover = function(){
animatedChange(this,{"width":400,"left":100,"top":100})
}
//给div加入移出事件，控制div从400px变为本身的宽度
div.onmouseout = function(){
animatedChange(this,{"width":w,"left":left,"top":top})
}
}
</script>
引入封装的方法：
function animatedChange(element,targetObject){//element 变化的元素 传入目标对象 targetObject
clearInterval(element.timer)
var flag = true //默认已经完成了
//遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100}
element.timer = setInterval(()=>{
for(let key in targetObject){//width height
let styleAttr = parseFloat(getStyle(element,key)) //获取元素的属性样式值
//获取步长
let step = (targetObject[key]-styleAttr)/10
//设置div的宽度
element.style[key] = styleAttr+step+'px'
//判断是否到达终点
if(parseFloat(getStyle(element,key))!=targetObject[key]){
flag = false
}
}
if(flag){
clearInterval(element.timer)
}
},40)
}
//获取样式的值
function getStyle(element,attr){ //需要获取样式的对象 样式的名字
// window.getComputedStyle(element,null)[attr]
// element.currentStyle ie的兼容写法
//获取样式对象
var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
return style[attr]
}
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
