This paper illustrates the method of sharing side bar animation of JS motion frame. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
#div1 {
width:319px;
height:340px;
border:1px solid #FFF;
Position:absolute;
top:100px;
left:-320px;
Background-image:url (images/1.png);
Background-repeat:no-repeat;
}
#div1 span{
width:30px;
height:130px;
BORDER:1PX solid blue;
Position:absolute;
right:-23px;
top:95px;
background:red;
font-family: "Microsoft Ya Hei";
Color: #FFFFFF;
Text-align:center;
line-height:40px;
border-radius:0px 200px 200px 0px;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var Odiv=document.getelementbyid ("Div1");
var ospan=odiv.getelementsbytagname (' span ') [0];
var time=null;
var speed=8;
Odiv.onmouseover=function () {///Here is an event to move the entire Div mouse
Clearinterval (time);
Time=setinterval (function () {
if (odiv.offsetleft>=0) {clearinterval (time);}
else{
odiv.style.left=odiv.offsetleft+speed+ ' px ';
}
},1);
}
Odiv.onmouseout=function () {//here gives the entire div the mouse to move the event
Clearinterval (time);
Time=setinterval (function () {
if (odiv.offsetleft<=-320) {clearinterval (time);}
else{
odiv.style.left=odiv.offsetleft-speed+ ' px ';
}
},1);
}
}
</script>
<body>
<div id= "Div1" >
<span> Share to </span>
</div>
</body>
Optimized code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
#div1 {
width:319px;
height:340px;
border:1px solid #FFF;
Position:absolute;
top:100px;
left:-320px;
Background-image:url (images/1.png);
Background-repeat:no-repeat;
}
#div1 span{
width:30px;
height:130px;
BORDER:1PX solid blue;
Position:absolute;
right:-23px;
top:95px;
background:red;
font-family: "Microsoft Ya Hei";
Color: #FFFFFF;
Text-align:center;
line-height:40px;
border-radius:0px 200px 200px 0px;
}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var Odiv=document.getelementbyid ("Div1");
var ospan=odiv.getelementsbytagname (' span ') [0];
var time=null;
var spe=8;
var speed=null;
function Move (bord) {
Clearinterval (time);
Time=setinterval (function () {
if (Odiv.offsetleft>bord) {Speed=-spe;}
Else{speed=spe;}
if (Odiv.offsetleft==bord) {clearinterval (time);}
else{
odiv.style.left=odiv.offsetleft+speed+ ' px ';
}
},1);
}
Odiv.onmouseover=function () {///Here is an event to move the entire Div mouse
Move (0);
}
Odiv.onmouseout=function () {//here gives the entire div the mouse to move the event
Move (-320);
}
}
</script>
<body>
<div id= "Div1" >
<span> Share to </span>
</div>
</body>
I hope this article will help you with your JavaScript programming.
