jQuery實現(xiàn)的鼠標響應(yīng)緩沖動畫效果示例
更新時間：2018年02月13日 12:22:05 作者：lexie
這篇文章主要介紹了jQuery實現(xiàn)的鼠標響應(yīng)緩沖動畫效果,涉及jQuery事件響應(yīng)、數(shù)值運算及頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的鼠標響應(yīng)緩沖動畫效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!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>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
文檔離瀏覽器頂部的距離如何判斷，下面有個不錯的方法，感興趣的朋友可以參考下2014-01-01
jquery.validate.js是jquery下的一個驗證插件，功能比較強大，早就有所耳聞但是一只沒有動手用過，現(xiàn)在在于能夠研究一下了。2010-05-05
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
使用jquery datatable和bootsrap創(chuàng)建表格實例代碼
這篇文章主要介紹了使用jquery-datatable和bootsrap創(chuàng)建表格的實例代碼,需要的朋友可以參考下2017-03-03
jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
這篇文章主要介紹了jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新操作,使用jquery的ajaxform插件是一個比較不錯的選擇。具體實現(xiàn)工程大家參考下本文2018-01-01
jQuery的數(shù)組處理,便捷,功能齊全. 最近的項目中用到的比較多，最近時間緊迫,今天抽了些時間回過頭來看 jQuery中文文檔順便對jQuery數(shù)組做個總結(jié)2013-11-11
這篇文章主要為大家詳細介紹了完善的jquery處理機制的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了JQuery.get提交頁面不跳轉(zhuǎn)的解決方法,本文分析了不跳轉(zhuǎn)的原因同時給出了跳轉(zhuǎn)的方法,需要的朋友可以參考下2015-01-01
div陰影效果在以前都是采用圖片來實現(xiàn)的，而在本文大家將學(xué)會使用jquery來實現(xiàn)，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了jquery實現(xiàn)進度條狀態(tài)展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03