首頁 > 開發者 > JavaScript
jQuery實現的滑鼠響應緩衝動畫效果樣本，jquery樣本
本文執行個體講述了jQuery實現的滑鼠響應緩衝動畫效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>js動畫-緩衝動畫</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script><style>* { margin: 0; padding: 0; font-family:"微軟雅黑"}#box{ height:100px; width:100px; background-color:#0099CC; margin-top:200px; position:relative; /*速速、緩衝變化*/ left:-100px;}span{ display:block; color:blue; width:25px; height:100px; background-color:#FFFF99; position:absolute; left:100px;}</style></head><body> <div id="box"> <span>移動</span> </div><script>window.onload=function(){ var div1=document.getElementById("box"); div1.onmouseover=function(){ startMove(0); } div1.onmouseout=function(){ startMove(-100); }}var timer=null;function startMove(itarget){ clearInterval(timer); var div1=document.getElementById("box"); timer=setInterval(function(){ var speed=(itarget-div1.offsetLeft)/20; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(div1.offsetLeft==itarget){ clearInterval(timer); }else{ div1.style.left=div1.offsetLeft+speed+"px"; } },30)}</script></body></html>
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
