javascript點選元素實現當前輪換展現效果

admin發表於2017-04-05
原文網址 : https://www.softwhy.com/article-5935-1.html
JavaScript

本章節分享一段程式碼例項，它實現了點選元素實現當前展現效果，並且具有比較人性化的變換效果。

並且詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body,ul,li{
  margin:0; 
  padding:0;
  font:18px/1.5 arial; 
  color:#333;
}
#big_pic{
  width:500px; 
  height:400px;
  background:#ccc; 
  text-align:center;
  position:absolute;
}
#s_pic li{
  float:left; 
  width:100px;
  height:80px; 
  display:inline;
  background:#06c; 
  text-align:center;
  position:absolute; 
  top:310px;
}
</style>
<script>
window.onload = function(){
  var s_pic = document.getElementById("s_pic");
  var s_pic_li = s_pic.getElementsByTagName("li");
  var now = s_pic_li[0];
  for(var index=0; index<s_pic_li.length; index++){
    s_pic_li[index].onclick = function(){
      if(this == now) return false;
      var w = now.offsetWidth;
      var h = now.offsetHeight;
      var l = now.offsetLeft;
      var t = now.offsetTop;
      var w1= this.offsetWidth;
      var h1 = this.offsetHeight;
      var l1 = this.offsetLeft;
      var t1 = this.offsetTop;
      startrun(now,{width:w1,height:h1,left:l1,top:t1});
      startrun(this,{width:w,height:h,left:l,top:t});
      now=this;
    }
  }
}
 
function getstyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}
 
function startrun(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    var isall = true; 
    for(var attr in json){
      var cur=0;
      if(attr == "opacity"){
        cur = Math.round(parseFloat(getstyle(obj,attr))*100);
      }
      else{
        cur = parseInt(getstyle(obj,attr));
      }
      var speed = (json[attr] - cur)/8
      speed = speed>0?Math.ceil(speed):Math.floor(speed);
      if(cur != json[attr]){
        isall = false;
      }
      if(attr == "opacity"){
        obj.style.filter = "alpha(opacity="+(cur+speed)+")";
        obj.style.opacity = (cur+speed)/100;
      }
      else{
        obj.style[attr] = cur+speed+"px";
      }
    }
    if(isall){
      clearInterval(obj.timer);
      if(fn){
        fn();
      }
    }
  },30);
}
</script>
</head>
<body>
<ul id="s_pic">
 <li style="left:0; top:0; width:400px; height:300px">0</div>
 <li style="left:0;">1</li>
 <li style="left:110px;">2</li>
 <li style="left:220px;">3</li>
 <li style="left:330px;">4</li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去後自行函式中的程式碼。

（2）.var s_pic = document.getElementById("s_pic")，獲取ul元素物件。

（3）.var s_pic_li = s_pic.getElementsByTagName("li")，獲取ul下面的所有li元素物件集合。

（4）.var now = s_pic_li[0]，獲取集合中的第一個li元素，預設狀態先第一個li元素展現。

（5）.for(var index=0; index<s_pic_li.length; index++)，遍歷集合中的每一個元素。

（6）.s_pic_li[index].onclick = function(){}，為li元素註冊click事件處理函式。

（7）.if(this == now) return false，如果是點選的當前展現的元素,那麼直接跳出函式。

（8）.var w = now.offsetWidth，獲取當前展現元素的寬度。

（9）.var h = now.offsetHeight，獲取當前展現元素的高度。

（10）.var l = now.offsetLeft，獲取當前展現元素距離左側的尺寸。

（11）.var t = now.offsetTop，獲取當前展現元素距離上側的尺寸。

（12）.var w1= this.offsetWidth，獲取當前點選元素的寬度。

（13）.var h1 = this.offsetHeight，獲取當前點選元素的高度。

（14）.var l1 = this.offsetLeft，獲取當前點選元素距離左側的尺寸。

（15）.var t1 = this.offsetTop，獲取當前點選元素距離上側的尺寸。

（16）.startrun(now,{width:w1,height:h1,left:l1,top:t1}，將當前展現元素的尺寸和位置設定為當前點選元素的尺寸和位置。

（17）.startrun(this,{width:w,height:h,left:l,top:t})，將當前點選元素的尺寸和位置設定為當前展現元素的尺寸和位置。

（18）.now=this，將當前點選的元素的引用賦值給now。

（19）.function getstyle(obj,name){}，獲取指定元素指定樣式屬性的值，obj是元素物件，name樣式屬性名稱。

（20）.if(obj.currentStyle){

  return obj.currentStyle[name];

}，如果支援currentStyle,則使用currentStyle物件獲取。

（21）.else{

  return getComputedStyle(obj,false)[name];

}，使用getComputedStyle()方法獲取屬性值。

（22）.function startrun(obj,json,fn){}，此方法實現了相關資料的設定功能，第一個引數為元素物件，第二個引數是一個物件直接量，用來儲存一些資料，第三個引數為回撥函式。

（23）.clearInterval(obj.timer)，停止上一個定時器函式的執行，否則可能造成多個定時器函式同事執行的情況。

（21）.obj.timer = setInterval(function(){},30），每隔30毫秒執行一次回撥函式。

（22）.var isall = true，宣告一個變數並賦初值為true，用來作為是否已經完整展現替換效果。

（23）.for(var attr in json)，遍歷json物件中的每一個屬性。

（24）.var cur=0，宣告一個變數並賦初值0，用來儲存當前元素的指定樣式值。（25）.if(attr == "opacity"){

   cur = Math.round(parseFloat(getstyle(obj,attr))*100);

}，如果是透明度屬性，那麼就獲取元素的當前透明度並且乘以100，轉換為0-100之間的數值。

（26）.else{

  cur = parseInt(getstyle(obj,attr));

}，如果不是透明度屬性的話，直接獲取值。

（27）.var speed = (json[attr] - cur)/8，json[attr] - cur獲取的是目標值和當前值得差，然後再除以8.

（28）.speed = speed>0?Math.ceil(speed):Math.floor(speed)，一個數學問題了，這裡不用介紹。

（29）.if(cur != json[attr]){

  isall = false;

}，判斷當前值是否達到目標值，如果沒有達到，那麼就將isall的變數值修改為false。

（30）.if(attr == "opacity"){

  obj.style.filter = "alpha(opacity="+(cur+speed)+")";

  obj.style.opacity = (cur+speed)/100;

}，低版本IE瀏覽器和標準瀏覽器兩種動態設定透明度的方式。

（31）.else{

  obj.style[attr] = cur+speed+"px";

}，其他屬性不需要其他處理。

（32）.if(isall){

  clearInterval(obj.timer);

  if(fn){

    fn();

  }

}，如果完成展現替換效果，那麼就停止定時器函式的執行。

如果傳遞第三個引數，那麼將執行此回撥函式。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.offsetWidth屬性可以參閱js offsetWidth一章節。

（3）.offsetLeft屬性可以參閱js offsetLeft一章節。

（4）.獲取樣式值可以參閱getComputedStyle()和currentStyle屬性一章節。

（5）.setInterval()方法可以參閱setInterval()一章節。

（6）.Math.round()方法可參閱Math.round()一章節。

（7）.parseFloat()方法可以參閱javascript parseFloat()一章節。

（8）.Math.ceil()方法可以參閱javascript Math.ceil()一章節。

（9）.Math.floor()方法可以參閱javascript Math.floor()一章節。

相關文章