分別用JavaScript和jQuery寫了滑動效果的網站提示。
用jQuery很簡單,用 animate() 方法就可以了。
用JavaScript稍微復雜一點,需要用到定時器實現動畫效果,并且要考慮到鼠標多次移入“提示”時會開啟多個定時器,則要清除定時器的情況。
效果如圖:
收起時:
展開時:
HTML:
<div id="cue-hide"><span id="cue-show">小貼士 </span><p>用JavaScript和jQuery分別寫滑動效果的網站提示。</p></div>
JavaScript:
/*JavaScript*/ window.onload=function(){ var cdiv=document.getElementById("cue-hide"); cdiv.onmouseover=function(){ cueshow(); }; cdiv.onmouseout=function(){ cuehide(); }; } var timer=null; function cueshow(){ clearInterval(timer); var cdiv=document.getElementById("cue-hide"); timer=setInterval(function(){ if(cdiv.offsetLeft==0){ clearInterval(timer); }else{ cdiv.style.left = cdiv.offsetLeft+25+'px'; } },50); }; function cuehide(){ clearInterval(timer); var cdiv=document.getElementById("cue-hide"); timer=setInterval(function(){ if(cdiv.offsetLeft==-200){ clearInterval(timer); }else{ cdiv.style.left = cdiv.offsetLeft-25+'px'; } },50); };
jQuery:
$(document).ready(function(){ $("#cue-hide").mouseenter(function(){ $("#cue-hide").animate({left:"0px"},"slow"); }); $("#cue-hide").mouseleave(function(){ $("#cue-hide").animate({left:"-200px"},"slow"); }); });
浙公網安備 33010602011771號