简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

滑鼠響應緩衝動畫效果如何實現？

php中世界最好的语言
發布： 2018-03-14 17:25:01
原創
1616 人瀏覽過

這次帶給大家滑鼠響應緩衝動畫效果如何實現？實現滑鼠響應緩衝動畫效果的注意事項有哪些，以下就是實戰案例，一起來看一下。

先來看看運行效果：

具體程式碼如下：

<!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>
  <p id="box">
    <span>移动</span>
  </p>
<script>
window.onload=function(){
  var p1=document.getElementById("box");
  p1.onmouseover=function(){
    startMove(0);
  }
  p1.onmouseout=function(){
    startMove(-100);
  }
}
var timer=null;
function startMove(itarget){
    clearInterval(timer);
    var p1=document.getElementById("box");
    timer=setInterval(function(){
      var speed=(itarget-p1.offsetLeft)/20;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(p1.offsetLeft==itarget){
        clearInterval(timer);
      }else{
        p1.style.left=p1.offsetLeft+speed+"px";
      }
    },30)
}
</script>
</body>
</html>
登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

滑鼠響應式淘寶動畫效果的實現

滑鼠響應式透明度漸層效果的實作

如何實現滾動條滑到底部時自動載入更多內容

以上是滑鼠響應緩衝動畫效果如何實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
動畫 效果 緩衝
來源：php.cn
上一篇：JS內建物件實例詳解 下一篇：js滑動動畫效果實例分享
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PHP數組從URL參數中取得的行為不如預期 我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...
來自於 2024-04-06 22:09:02
0
1
1428
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
如何從結果集中僅顯示最低值（MYSQL） 我有以下聲明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
來自於 2024-04-06 21:44:19
0
1
603
使用具有 3 級層次結構的自訂分類法選擇 woocommerce 相關產品 我有一家woocommerce商店，其自訂分類為「運動」。此分類有三個等級-父級、子級、子級-例如：室內運動>競技場運動>籃球。如果使用者查看籃球項目，那麼我希望相關產...
來自於 2024-04-06 20:05:30
0
1
544
MySQL：'從......中選擇文字作為<此處變數或子查詢>” 我有下表，其中包含以下數據：id文本語言1德語文本德語2英文文本英語我想要的是獲得以下格式的結果：german="deutschertext"english=&...
來自於 2024-04-06 19:25:54
0
2
529
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！