JS運(yùn)動框架之分享側(cè)邊欄動畫實例
更新時間：2015年03月03日 11:03:33 作者：mikyou
這篇文章主要介紹了JS運(yùn)動框架之分享側(cè)邊欄動畫,實例分析了javascript操作div及css的技巧,需要的朋友可以參考下
本文實例講述了JS運(yùn)動框架之分享側(cè)邊欄動畫實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<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: "微軟雅黑";
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(){//這里給整個div加鼠標(biāo)移入的事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>=0){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft<=-320){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft-speed+'px';
}
},1);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
<html>
<head>
<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: "微軟雅黑";
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(){//這里給整個div加鼠標(biāo)移入的事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>=0){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft<=-320){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft-speed+'px';
}
},1);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
優(yōu)化后的代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<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: "微軟雅黑";
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(){//這里給整個div加鼠標(biāo)移入的事件
move(0);
}
oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
move(-320);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
<html>
<head>
<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: "微軟雅黑";
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(){//這里給整個div加鼠標(biāo)移入的事件
move(0);
}
oDiv.onmouseout=function(){//這里給整個div加鼠標(biāo)移出事件
move(-320);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實現(xiàn)方法(js+jquery等)
- javascript實現(xiàn)動態(tài)側(cè)邊欄代碼
- JavaScript實現(xiàn)簡單的隱藏式側(cè)邊欄功能示例
- javascript 實現(xiàn)動態(tài)側(cè)邊欄實例詳解
- 利用js編寫響應(yīng)式側(cè)邊欄
- JS實現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果
- 基于slideout.js實現(xiàn)移動端側(cè)邊欄滑動特效
- JavaScript中實現(xiàn)無縫滾動、分享到側(cè)邊欄實例代碼
- JS實現(xiàn)京東商品分類側(cè)邊欄
- js實現(xiàn)淘寶固定側(cè)邊欄
相關(guān)文章
在非IE，事件對象Propagation之間的處理函數(shù)，或同dom節(jié)點觸發(fā)的多個函數(shù)之間的Event物件是全等的。與綁定形式[addEventListener/DOM0]無關(guān)。2011-04-04
這篇文章主要為大家詳細(xì)介紹了js通過Date對象實現(xiàn)倒計時動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
前端水印就是在網(wǎng)頁或應(yīng)用程序的前端界面上添加的一種標(biāo)記,通常是文本、圖標(biāo)或圖案等形式,下面小編就來和大家介紹四個常用的方法吧2025-03-03
組件是視圖層基本的組成單元，具備UI風(fēng)格樣式以及特定的功能效果。本文將通過示例詳細(xì)為大家介紹一下微信小程序中常用的視圖容器組件，需要的可以參考一下2022-03-03
JavaScript中出現(xiàn)了一個以前沒學(xué)過的概念——閉包。何為閉包？從表面理解即封閉的包，與作用域有關(guān)。所以，說閉包以前先說說作用域2012-06-06
瀏覽器不會拋出Error類型的exception異常，所以如果捕獲到Error類型的異常，可以確定這個異常是用戶代碼拋出的，不是瀏覽器拋出的。2009-06-06
一個JS實現(xiàn)的展開關(guān)閉來回切換的代碼。用于一段內(nèi)容的顯示與隱藏，點一次隱藏，再點一次就顯示，來回切換。2010-04-04
js隱藏與顯示回到頂部按鈕及window.onscroll事件應(yīng)用
現(xiàn)在大多數(shù)網(wǎng)站都會添加這種功能：當(dāng)滾動條滾動到頁面的下方時，頁面的右下角會顯示出來一個“回到頂部”的按鈕或連接;那么，如何控制“回到頂部”按鈕的顯示或隱藏呢;本文介紹詳細(xì)實現(xiàn)方法，感興趣的你可不要走開哦2013-01-01
IE6 彈出Iframe層中的文本框“經(jīng)?！睙o法獲得輸入焦點
IE6間歇性精神障礙 彈出Iframe層中的文本框“經(jīng)常”無法獲得輸入焦點的解決方法。2009-12-12
JavaScript使用addEventListener添加事件監(jiān)聽用法實例
這篇文章主要介紹了JavaScript使用addEventListener添加事件監(jiān)聽的方法,實例分析了addEventListener方法的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06