IT工程師數位筆記本

前些日子看了個視頻所以就模仿它的技術來為大家做出幾個簡單的JS小特效

一：運動特效（主要是通過改變元素的left,right,height,width,opacity來達到運動的效果）

我們今天做一個利用計時器來創建一個勻速運動的效果，代碼很簡單。

1:首先我們先寫出HTML的結構

<div id="div1">
<span id="share">share</span>
</div>

2：給出樣式

<style type="text/css">  
body{margin: 0;padding: 0;}
span{background: blue;width: 50px;height: 60px;position: absolute;right:-48px;color: #fff;top: 47px;}
div{background: red;width: 200px;height: 150px;position: relative;left: -200px;}
</style>

3：然后到了我們的JS部分

<script type="text/javascript">
window.onload=function(){ 頁面內容完全載入的時候執行這個匿名函數
var div=document.getElementById("div1");  獲取div
div.onmouseover=function(){  
當鼠標經過這個這個div的時候執行里面的函數showDiv();
showDiv();
}
div.onmouseout=function(){
當鼠標離開這個這個div的時候執行里面的函數hidDiv();
hidDiv();
}
}
var timer; 定義一個定時器ID
function showDiv(){ 創建showDiv函數
clearInterval(timer); 每次觸發該函數的時候都清空一下以前有的定時器若有的話。
var div=document.getElementById("div1"); 獲取div

timer=setInterval(function(){ 創建一個定時器
if(div.offsetLeft==0){ 判斷下是否到了目標值 
clearInterval(timer);  是的話就清空定時器
}
else{
div.style.left=div.offsetLeft+10+"px";} 
還沒到目標值的話就把div的left屬性改為本身Left 的值加10，在還沒到目標值的時候，這地方都一直進行而且每次都在之前的基礎上加10一直到達目標值清空

},50) 開始定時器后每隔50毫秒執行定時器里的代碼
}

function hidDiv(){
clearInterval(timer);
var div=document.getElementById("div1");
timer=setInterval(function(){
if(div.offsetLeft==-200){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft-10+"px";}
},50)
}

</script>

4:我們來優化下javascript代碼

我們都知道當兩個代碼功能很相似的時候我們就可以把不同的地方提取出來作為參數傳入。

分析上面兩個代碼，我們發現整體很多地方相似，主要不同的地方是目標值和速度，現在我們把它們都提取出來作為參數傳入，整合為一個函數。

<script type="text/javascript">
window.onload=function(){ /*頁面內容完全載入的時候執行這個匿名函數*/
var div=document.getElementById("div1");  /*獲取div*/
div.onmouseover=function(){  
// 當鼠標經過這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(0,+10);
}
div.onmouseout=function(){
// 當鼠標離開這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定義一個定時器ID*/
function showHidDiv(divTarget,speed){
clearInterval(timer);
var div=document.getElementById("div1");

timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}


},50)
}


</script>

5：最后優化

當一個函數需要傳參的時候，傳的參數越小越好。

分析下上面的代碼，我們發現速度的正反可以根據目標值的大少來確定的，所以我們現在就把參數速度干掉，把它整合到代碼中。

<script type="text/javascript">
window.onload=function(){ /*頁面內容完全載入的時候執行這個匿名函數*/
var div=document.getElementById("div1");  /*獲取div*/
div.onmouseover=function(){  
// 當鼠標經過這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(0,+10);
}
div.onmouseout=function(){
// 當鼠標離開這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定義一個定時器ID*/
function showHidDiv(divTarget){
var speed;
clearInterval(timer);
var div=document.getElementById("div1");
if(divTarget>div.offsetLeft){
speed=10;
}
else{
          speed=-10;
}

timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}
},50)
}
</script>

速度的地我們改一下，讓它不做勻速運動，改為緩沖運動

<script type="text/javascript">
window.onload=function(){ /*頁面內容完全載入的時候執行這個匿名函數*/
var div=document.getElementById("div1");  /*獲取div*/
div.onmouseover=function(){  
// 當鼠標經過這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(0,+10);
}
div.onmouseout=function(){
// 當鼠標離開這個這個div的時候執行里面的函數showHidDiv();
showHidDiv(-200,-10);
}
}
var timer; /*定義一個定時器ID*/
function showHidDiv(divTarget){
var speed;
clearInterval(timer);
var div=document.getElementById("div1");
speed=(divTarget-div.offsetLeft)/30;//越接近目標值 速度越慢，數值可能為小數點
speed=speed>0?Math.ceil(speed):Math.floor(speed);//speed大于0向上取整，<0就向下取整
timer=setInterval(function(){
if(div.offsetLeft==divTarget){
clearInterval(timer);
}
else{
div.style.left=div.offsetLeft+speed+"px";}
},50)
}
</script>