本文實例講述了jQuery實現橫向帶緩沖的水平運動效果。分享給大家供大家參考,具體如下:
這里使用jQuery生成橫向帶緩沖的水平運動,用鼠標點一下才能激活,點一下以后可看到Div層在做水平運動,由此可派生出諸多的其它形式的動畫效果。
點擊此處查看在線演示效果。
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>水平移動</title><style type="text/css">*{margin:0;padding:0;}body { padding: 60px }#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"}, 3000); })})</script></head><body><div id="panel"></div></body></html>
完整實例代碼點擊此處本站下載。
更多關于jQuery特效相關內容感興趣的讀者可查看本站專題:《jQuery動畫與特效用法總結》及《jQuery常見經典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答