打牌斗牛图片

書名： JavaScript前端開發(fā)模塊化教程
作者名：趙建保
本章字數(shù)： 659字
更新時間： 2019-12-20 19:23:38

4.4 任務實施

4.4.1 編寫頁面結構

在前端開發(fā)環(huán)境中新建項目文件夾“img-hover”，在該文件夾中新建“img-hover.html”文件，新建存放樣式表的文件夾“css”、存放腳本的文件夾“js”和存放圖片的文件夾“img”，打開“img-hover.html”文件，依據(jù)HTML5規(guī)范編寫頁面HTML結構，頁面字符集設置為UTF-8，頁面標題title設置為“圖片縮放特效”，頁面由一個類樣式為“wrap”的div包含，里面放置了頁面標題標簽h3和圖片項目容器ul，HTML代碼如下：

<!DOCTYPE html> 
<html> 
 
<head> 
      <meta charset="utf-8"> 
      <title>圖片縮放特效</title> 
      <link rel="stylesheet" type="text/css" href="css/img-hover.css"> 
</head> 
 
<body> 
      <!-- 頁面容器 --> 
      <div class="wrap"> 
            <!-- 標題 --> 
            <h3>圖片縮放特效</h3> 
            <!-- 圖片容器 --> 
            <ul class="stretch" id="stretch"> 
                  <!-- 圖片項目 --> 
                  <li> 
                        <a href=""> 
                              <img src="img/img1.jpg" alt=""> 
                        </a> 
                  </li> 
                  <li> 
                        <a href=""> 
                              <img src="img/img2.jpg" alt=""> 
                        </a> 
                  </li> 
                  <li> 
                        <a href=""> 
                              <img src="img/img3.jpg" alt=""> 
                        </a> 
                  </li> 
                  <li> 
                        <a href=""> 
                              <img src="img/img4.jpg" alt=""> 
                        </a> 
                  </li> 
                  <li> 
                        <a href=""> 
                              <img src="img/img5.jpg" alt=""> 
                        </a> 
                  </li> 
                  <li> 
                        <a href=""> 
                              <img src="img/img6.jpg" alt=""> 
                        </a> 
                  </li> 
          </ul> 
      </div> 
      <script src="js/img-hover.js"></script> 
</body> 
 
</html>

4.4.2 編寫CSS樣式

在項目“css”文件夾中建立樣式文件“img-hover.css”，打開該文件編寫樣式表，分別定義頁面容器類樣式wrap、標題h3樣式和圖片項目樣式，具體屬性及值代碼如下：

*  { 
  padding: 0; 
  margin: 0; 
} 
 
body, 
html { 
  background: url("../img/bg_pattern.jpg") repeat; 
  font-family: Verdana, Geneva, sans-serif; 
} 
 
.wrap { 
  width: 610px; 
  margin: 10px auto; 
} 
 
.wrap h3 { 
  margin: 20px 0; 
  font-size: 36px; 
  font-weight: bold; 
} 
 
.stretch { 
  position: relative; 
  overflow: hidden; 
} 
 
.stretch li { 
  position: relative; 
  width: 200px; 
  height: 200px; 
  float: left; 
  border: 1px solid #fff; 
  list-style-type: none; 
  overflow: hidden; 
} 
 
.stretch img { 
  border: none; 
  position: absolute; 
  top: -66.5px; 
  left: -150px; 
  height: 500px; 
}

4.4.3 編寫JavaScript

在項目“js”文件夾中新建“img-hover.js”文件，給圖片容器中的每張圖片綁定鼠標事件mouseover和mouseout，當mouseover事件發(fā)生時，執(zhí)行動畫函數(shù)startMov（element,styles），該函數(shù)內(nèi)部實現(xiàn)了樣式屬性的間隔性變化，從而形成圖片縮放的動畫效果，代碼如下：

//通過<img>標簽獲取所有圖片對象 
var imgs = document.getElementsByTagName("img"); 
//利用for 循環(huán)，對圖片綁定鼠標事件mouseover 和mouseout 
for (var i = 0; i < imgs.length; i++) { 
      imgs[i].onmouseover = function () { 
            startMov(this, { width: 200, height: 200, top: 0, left: 0 }); 
      } 
 
      imgs[i].onmouseout = function () { 
            startMov(this, { width: 200, height: 500, top: -66, left: -150 }); 
      } 
      //設置圖像計時器為空值 
      imgs[i].timer = null; 
} 
//定義startMov()函數(shù)，element為圖片對象，styles 為動畫對象的樣式屬性 
function startMov(element, styles) { 
      clearInterval(element.timer);  //執(zhí)行動畫之前清除動畫 
      //setInterval()函數(shù)以給定的時間間隔重復執(zhí)行一個函數(shù) 
      element.timer = setInterval(function () { 
            //for in 循環(huán)語句循環(huán)遍歷對象的屬性，attr 為屬性名 
            for (var attr in styles) { 
                  var icur = 0; 
                  if (attr == 'width') { 
                        //round()把對象四舍五入為最接近的整數(shù) 
                        icur  = Math.round(parseFloat(getStyle(element, attr))  *  
100); 
                  } else { 
                        //parseInt()函數(shù)可解析一個字符串，并返回一個整數(shù) 
                        icur = parseInt(getStyle(element, attr)); 
                  } 
 
                  //設置運動速度 
                  var speed = 0; 
                  speed = (styles[attr] - icur) / 8; 
                  //ceil() ，floor()分別為Math 的上舍入和下舍入函數(shù) 
                  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
                  if (attr == 'width') { 
                        element.style.width = (icur + speed) / 100; 
                  } else { 
                        element.style[attr] = icur + speed + 'px'; 
                  } 
            } 
      }, 30); 
} 
function getStyle(obj, attr) { 
      if (obj.currentStyle) { 
            return obj.currentStyle[attr];     //僅限IE兼容 
      } else { 
            return getComputedStyle(obj, false)[attr];   // 兼容FireFox 
      } 
}

4.4.4 測試頁面

可以直接在本地測試頁面，在資源管理器中定位到img-hover.html文件所在目錄，雙擊img-hover.html即可啟動瀏覽器進行測試，效果如圖4-2所示，用戶將鼠標移入圖片上將觸發(fā)mouseover事件，圖片縮放動畫開始執(zhí)行，當鼠標移離圖片上將觸發(fā)mouseout事件，圖片恢復初始樣式。

圖4-2 圖片縮放特效

官术网_书友最值得收藏!

JavaScript前端開發(fā)模塊化教程

4.4 任務實施

4.4.1 編寫頁面結構

4.4.2 編寫CSS樣式

4.4.3 編寫JavaScript

4.4.4 測試頁面