122 lines
3.7 KiB
HTML
122 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
.box {
|
|
width: 1250px;
|
|
height: 460px;
|
|
border: 1px #eee solid;
|
|
margin: 50px auto;
|
|
}
|
|
.box ul li {
|
|
float: left;
|
|
width: 250px;
|
|
height: 460px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="box" id="box">
|
|
<!-- <ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul> -->
|
|
</div>
|
|
<script type='text/javascript'>
|
|
function my$(id) {
|
|
return document.getElementById(id)
|
|
}
|
|
var boxW = my$('box').scrollWidth
|
|
var targetW = 1000
|
|
|
|
//初始化DOM 根据数据生成li
|
|
var imgs = ['https://img13.360buyimg.com/babel/s590x470_jfs/t1/70490/39/14464/79762/5dbbe411E99f36c58/f36b525a1665151d.jpg.webp',
|
|
'https://img10.360buyimg.com/pop/s590x470_jfs/t1/90587/22/1566/47968/5dc0de42Edf9b7386/c90e8c11df7a6dec.jpg.webp',
|
|
'https://img12.360buyimg.com/pop/s590x470_jfs/t1/97859/1/1227/110519/5dbbdd0cEf6137bd6/1073886511f333d5.jpg.webp',
|
|
'https://img30.360buyimg.com/pop/s590x470_jfs/t1/84717/13/1222/70971/5dbb9eccEab2e574e/e9993d5d21bbc566.jpg.webp',
|
|
'https://img11.360buyimg.com/pop/s590x470_jfs/t1/81946/8/14162/78156/5db97b05Eea300353/7c0dc5a35715b144.jpg.webp']
|
|
var averageW = (boxW - targetW) / (imgs.length -1)
|
|
//生成ul
|
|
var ul = document.createElement('ul')
|
|
//批量生成li
|
|
for(var i in imgs) {
|
|
var li = document.createElement('li')
|
|
//添加背景图片
|
|
li.style.background = 'url('+ imgs[i] +') no-repeat left top'
|
|
li.setAttribute('index',i);
|
|
li.onmouseover = function() {
|
|
index = this.getAttribute('index')
|
|
for(var i in imgs) {
|
|
if (i !== index)
|
|
changeAnimation(lis[i],{'width':averageW},1)
|
|
}
|
|
changeAnimation(this,{'width':targetW},1)
|
|
}
|
|
li.onmouseout = function() {
|
|
index = this.getAttribute('index')
|
|
for(var i in imgs) {
|
|
if (i !== index)
|
|
changeAnimation(lis[i],{'width':250},1)
|
|
}
|
|
changeAnimation(this,{'width':250},1.5)
|
|
}
|
|
ul.appendChild(li)
|
|
}
|
|
my$('box').appendChild(ul)
|
|
var lis = my$('box').children[0].children
|
|
function changeAnimation(ele,json,isFast) {
|
|
clearInterval(ele.timer)
|
|
ele.timer = setInterval(function() {
|
|
var flag = true
|
|
for( var attr in json) {
|
|
if(attr == 'opacity') {
|
|
var current = getStyle(ele,attr)*100
|
|
var target = json[attr]*100
|
|
var step = (target - current)/10
|
|
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
|
current += step
|
|
if(target != current ) {
|
|
flag = false
|
|
}
|
|
ele.style[attr] = current/100
|
|
}else if(attr == 'zIndex') {
|
|
ele.style[attr] = json['zIndex']
|
|
}else {
|
|
var current = parseInt(getStyle(ele,attr))
|
|
var target = parseInt(json[attr])
|
|
var step = (target - current) / 100 * isFast
|
|
step = step > 0 ? Math.ceil(step) : Math.floor(step)
|
|
current += step
|
|
if( target != current) {
|
|
flag = false
|
|
}
|
|
ele.style[attr] = current + 'px'
|
|
}
|
|
}
|
|
if(flag) {
|
|
clearInterval(ele.timer)
|
|
ele.timer = null
|
|
fn && fn()
|
|
}
|
|
}, 10)
|
|
}
|
|
function getStyle(ele, attr) {
|
|
return window.getComputedStyle ? window.getComputedStyle(ele, null)[attr] : ele.currentStyle[attr] || 0
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |