<!DOCTYPE html><html lang=
"en"
><head>
<meta charset=
"UTF-8"
>
<title></title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 350px;
height: 350px;
margin: 100px auto;
cursor: pointer;
}
.box ul li {
float: left;
width: 80px;
height: 80px;
text-align: center;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 2px;
}
.box>ul>li>span {
display: block;
width: 24px;
height: 24px;
background: url(
"images/bg.png"
) 0 -24px no-repeat;
margin: 10px auto;
}
</style></head><body>
<p
class
=
"box"
>
<ul>
<li><span></span>百度</li>
<li><span></span>淘宝</li>
<li><span></span>新浪</li>
<li><span></span>网易</li>
<li><span></span>搜狐</li>
<li><span></span>腾讯</li>
<li><span></span>优酷</li>
<li><span></span>京东</li>
</ul>
</p><script type=
"text/javascript"
src=
"lib/jquery-3.3.1.js"
></script><script type=
"text/javascript"
>
$(
function
() {
var
$li
= $(
'.box>ul>li'
);
$li
.each(
function
(index, value) {
$(this).children(
'span'
).css({
'background'
:
' url("images/bg.png") 0 -'
+ index * 24 +
'px no-repeat'
})
});
$li
.hover(
function
() {
shake(this);
},
function
() {
stopShake(this);
});
function
shake(ele) {
$(ele).css({
'position'
:
'relative'
});
var
animateLeft = $(ele).css(
'left'
) ===
'10px'
?
'-10px'
:
'10px'
;
$(ele).animate({
left: animateLeft }, 100,
function
() {
shake(ele);
});
}
function
stopShake(ele) {
$(ele).stop(true, false).css({
left:
'0'
})
}
});</script></body></html>