前端工程师：JavaScript特效
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说前端工程师：JavaScript特效,希望能够帮助你!!!。
先来看看特效是什么样子的吧，鼠标滑过图片原地向四周扩大，鼠标离开图片缩小
再来看看源代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/move.js"></script>
<style>
#ul {
width: 300px;
height: 300px;
position: relative;
display: block;
margin: 0 auto;
}
li {
list-style: none;
width: 90px;
height: 90px;
margin: 10px 0 0 10px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
window.onload = function() {
var oUl = document.getElementById('ul');
var oLi = document.getElementsByTagName('li');
var arr = [];
for(var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
//提前保存好元素最开始的位置
arr.push({
left: oLi[i].offsetLeft,
top: oLi[i].offsetTop
})
}
for(var i = 0; i < oLi.length; i++) {
//定位后浮动效果就是失效了
oLi[i].style.position = 'absolute';
//重新设置li的位置
oLi[i].style.left = arr[i].left + 'px';
oLi[i].style.top = arr[i].top + 'px';
//因为元素保存后的位置就是偏移后的，所以要把外边距清除掉
oLi[i].style.margin = 0;
oLi[i].onmouseover = function() {
startMove(this, {
width: 150,
height: 150,
left: arr[this.index].left - 40,
top: arr[this.index].top - 40
});
}
oLi[i].onmouseout = function() {
startMove(this, {
width: 90,
height: 90,
left: arr[this.index].left,
top: arr[this.index].top
});
}
}
}
</script>
</body>
</html>
有什么建议或者疑问可以评论留言，如果小编的文章您觉得有用就给个关注啦~~
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
