Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
*{
margin:0;
padding:0;
List-style:none;
}
#box {
width:500px;
height:300px;
border:1px solid #000;
margin:100px Auto;
position:relative;
Overflow:hidden;
}
#box li{
width:500px;
height:300px;
Position:absolute;
}
#box Li img{
width:500px;
height:300px;
}
</style>
<script src= "Move.js" ></script>
<script>
Window.onload=function () {
var Obox=document.getelementbyid (' box ');
var Ali=obox.children;
var w=30;
for (Var i=1;i<ali.length;i++) {
ali[i].style.left=obox.offsetwidth-w* (ali.length-i) + ' px ';
}
for (Var i=0;i<ali.length;i++) {
Ali[i].index=i;
Ali[i].onmouseover=function () {
for (Var i=0;i<ali.length;i++) {
if (I<=this.index) {
Move (Ali[i],{left:w*i});
}else{
Move (ali[i],{left:obox.offsetwidth-w* (Ali.length-i)});
}
}
}
}
}
</script>
<body>
<ul id= "box" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
js-Small effect-accordion
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
