Remarks：
不知道為什么，漸變效果出不來。戈盈。等天亮了找大佬問問吧（已解決）元素中心放大原理：jQuery默認(rèn)放大是向下向右擴(kuò)大，這里對(duì)元素進(jìn)行定位谆刨，然后通過jQuery在元素放大的同時(shí)塘娶，向左向上移動(dòng)元素半徑的距離，實(shí)現(xiàn)從中心點(diǎn)放大
如有更好的方法希望可以告知痊夭，謝謝５蟀丁（同時(shí)希望路過的大佬幫忙簡(jiǎn)化一下代碼，再次感謝）
性感騷男生兆，在線筆芯.jpg
代碼如下
html
<body>
<div class="box">
<div class="imgage">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="index.js"></script>
</body>
css
*{
margin: 0;
padding: 0;
}
.box{
width: 590px;
height: 470px;
margin: 50px auto;
}
.imgage{
width: 590px;
height: 470px;
position: absolute;
}
/* div */
div img{
display: none;
}
div img:first-child{
display: block;
}
/* ul */
ul{
/* width: 215px; */
height: 15px;
list-style: none;
position: relative;
left: 50%;
top: 440px;
margin-left: -107.5px;
}
ul li{
width: 15px;
height: 15px;
border-radius: 50%;
/* background: #ffffff; */
border: 2px solid red;
float: left;
margin-left: 30px;
color: #ffffff;
text-align: center;
line-height: 30px;
cursor: pointer;
position: relative;
}
ul li:first-child{
margin-left: 0px;
}
js
$(function(){
$('ul li').mouseover(function(){
let i = $(this).index();
// let a = $('div img').index();
// a=i;
$(this).stop().animate({
width : '30',
height : '30',
left : '-7',
top : '-7'
},function(){
$('ul li').eq(i).text(i+1)
})
// console.log($('div img'))
$('div img').eq(i).fadeIn(1000).siblings().hide();
})
$('ul li').mouseout(function(){
let i = $(this).index();
$(this).stop().animate({
width : '15',
height : '15',
left : '',
top : ''
},function(){
$('ul li').eq(i).text('')
})
})
})
代碼很繁瑣难捌，后期會(huì)改進(jìn)膝宁，也希望看到文章的大佬們指點(diǎn)一下
