この記事では、JSモーションフレームワークのサイドバーアニメーションを共有する実装方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> </title>
<style type = "text/css">
*{
マージン：0px;
パディング：0px;
}
＃div1 {
幅：319px;
高さ：340px;
ボーダー：1pxソリッド#fff;
位置：絶対;
トップ：100px;
左：-320px;
背景画像：url（images/1.png）;
バックグラウンドリピート：ノーリピート。
}
＃div1 span {
幅：30px;
高さ：130px;
ボーダー：1pxソリッドブルー;
位置：絶対;
右：-23px;
トップ：95px;
背景：赤;
フォントファミリー：「Microsoft Yahei」;
色：#ffffff;
テキストアライグ：センター;
Line-Height：40px;
Border-Radius：0px 200px 200px 0px;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var odiv = document.getElementById（ "div1"）;
var osospan = odiv.getelementsbytagname（ 'span'）[0];
var time = null;
var速度= 8;
odiv.onmouseover = function（）{//イベントでマウスを使用してdiv全体に追加します
ClearInterval（時間）;
time = setInterval（function（）{
if（odiv.offsetLeft> = 0）{clearInterval（time）;}
それ以外{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
}、1）;
}
odiv.onmouseout = function（）{// div全体に追加してイベントを削除します
ClearInterval（時間）;
time = setInterval（function（）{
if（odiv.offsetLeft <= -320）{clearInterval（time）;}
それ以外{
odiv.style.left = odiv.offsetleft speed+'px';
}
}、1）;
}
}
</script>
</head>
<body>
<div id = "div1">
<span>共有</span>
</div>
</body>
</html>
最適化されたコード：
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> </title>
<style type = "text/css">
*{
マージン：0px;
パディング：0px;
}
＃div1 {
幅：319px;
高さ：340px;
ボーダー：1pxソリッド#fff;
位置：絶対;
トップ：100px;
左：-320px;
背景画像：url（images/1.png）;
バックグラウンドリピート：ノーリピート。
}
＃div1 span {
幅：30px;
高さ：130px;
ボーダー：1pxソリッドブルー;
位置：絶対;
右：-23px;
トップ：95px;
背景：赤;
フォントファミリー：「Microsoft Yahei」;
色：#ffffff;
テキストアライグ：センター;
Line-Height：40px;
Border-Radius：0px 200px 200px 0px;
}
</style>
<script type = "text/javascript">
window.onload = function（）{
var odiv = document.getElementById（ "div1"）;
var osospan = odiv.getelementsbytagname（ 'span'）[0];
var time = null;
var spe = 8;
var速度= null;
関数ムーブ（ボード）{
ClearInterval（時間）;
time = setInterval（function（）{
if（odiv.offsetLeft> bord）{speed = -spe;}
else {speed = spe;}
if（odiv.offsetLeft == bord）{clearInterval（time）;}
それ以外{
odiv.style.left = odiv.offsetLeft+speed+'px';
}
}、1）;
}
odiv.onmouseover = function（）{//イベントでマウスを使用してdiv全体に追加します
移動（0）;
}
odiv.onmouseout = function（）{// div全体に追加してイベントを削除します
移動（-320）;
}
}
</script>
</head>
<body>
<div id = "div1">
<span>共有</span>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。