以動畫方式設定元素的透明度
設定元素的透明度非常的簡單,具體可以參閱js動態設定元素透明度程式碼例項一章節。
但是上面的程式碼有點粗暴,很多時候我們需要一種動畫方式的過渡設定。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body { margin: 0; padding: 0; } div { margin: 0; padding: 0; } .odiv { width: 200px; height: 200px; background: #f00; position: relative; left: 0px; top: 100px; opacity: 0.3; filter: alpha(opacity:30); float: left; margin: 10px; } </style> <script language="javascript"> window.onload = function () { var odiv = document.getElementsByTagName('div'); for (var index = 0; index < odiv.length; index++) { (function () { odiv[index].onmouseover = function () { startOP(this, 100); } odiv[index].onmouseout = function () { startOP(this, 30); } odiv[index].timer = null; odiv[index].alpha = null; })(index) } } function startOP(obj, utarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = 0; if (obj.alpha > utarget) { speed = -10; } else { speed = 10; } obj.alpha = obj.alpha + speed; if (obj.alpha == utarget) { clearInterval(obj.timer); } obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; obj.style.opacity = parseInt(obj.alpha) / 100; }, 30); } </script> </head> <body> <div id="odiv" class="odiv"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function () {},當文件內容完全載入完畢再去執行函式中程式碼。
(2).var odiv = document.getElementsByTagName('div'),的獲取div元素集合。
(3).for (var index = 0; index < odiv.length; index++) {},遍歷集合中的每一個元素。
(4).(function () {
odiv[index].onmouseover = function () {
startOP(this, 100);
}
odiv[index].onmouseout = function () {
startOP(this, 30);
}
odiv[index].timer = null;
odiv[index].alpha = null;
})(index),以閉包的方式為元素註冊時間處理函式和為元素新增一些自定義屬性。
(5).function startOP(obj, utarget) {},此函式實現了透明度動畫效果,第一個引數是元素物件,第二個是透明度目標值。
(6).clearInterval(obj.timer),防止多個定時器函式疊加執行。
(7).obj.timer = setInterval(function () {},30),每隔30毫秒執行一次匿名函式。
(8).var speed = 0,宣告一個變數並賦值為0,後面會用到。
(9).if (obj.alpha > utarget) { speed = -10;
}
else {
speed = 10;
},如果如果大於目標值,那麼將speed設定為-10,否則設定為10,這個就是透明度變化的幅度。
(10).obj.alpha = obj.alpha + speed,每次執行為obj.alpha值加上透明度變化值。
(11).if (obj.alpha == utarget) {
clearInterval(obj.timer);
},如果達到目標值,那麼就停止定時器函式的執行。
(12).obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
obj.style.opacity = parseInt(obj.alpha) / 100;
上面兩個是為了相容瀏覽器。
二.相關閱讀:
(1).onmouseover事件可以參閱javascript mouseover事件一章節。
(2).onmouseout事件可以參閱javascript mouseout事件一章節。
(3).clearInterval()可以參閱clearInterval()一章節。
(4).setInterval()可以參閱setInterval()一章節。
(5).閉包可以參閱javascript閉包概念介紹一章節。
(6).相容透明度可以參閱CSS如何設定div背景透明度且相容性良好一章節。
相關文章
- jQuery以動畫方式設定元素的透明度jQuery動畫
- svg以動畫方式設定透明度SVG動畫
- jQuery動畫方式設定元素的透明度jQuery動畫
- JavaScript 動畫方式設定元素尺寸和透明度JavaScript動畫
- JavaScript設定元素透明度JavaScript
- 使用jquery設定元素的透明度jQuery
- 利用jquery設定div元素的透明度jQuery
- JavaScript漸變方式設定透明度JavaScript
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- opacity設定元素透明度程式碼例項
- CSS3漸變方式設定透明度CSSS3
- js動態設定元素透明度程式碼例項JS
- 相容所有瀏覽器js設定元素透明度效果瀏覽器JS
- js style方式設定元素的樣式JS
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- javascript使用style方式設定元素的樣式JavaScript
- jQuery元素動畫方式滑動效果jQuery動畫
- js移入和離開動畫方式改變透明度JS動畫
- canvas 設定透明度Canvas
- canvas設定透明度Canvas
- jQuey設定透明度
- CSS 透明度設定CSS
- jquery設定元素css樣式的幾種方式jQueryCSS
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- iOS專案開發實戰——設定檢視的透明度改變動畫iOS動畫
- javascript相容所有瀏覽器設定元素透明度程式碼例項JavaScript瀏覽器
- jQuery設定透明度效果jQuery
- CSS3動畫方式改變div元素的尺寸CSSS3動畫
- 使用javascript設定圖片的透明度JavaScript
- Android 之 View透明度的設定AndroidView
- CSS 設定邊框透明度CSS
- Android 設定TextView透明度AndroidTextView
- XamarinAndroid元件教程設定自定義子元素動畫(二)NaNAndroid元件動畫
- XamarinAndroid元件教程設定自定義子元素動畫(一)NaNAndroid元件動畫
- JavaScript動畫方式控制div元素的隱藏和顯示JavaScript動畫
- JavaScript動畫方式改變元素寬度和高度JavaScript動畫
- 簡單的動畫方式實現的元素下拉和上卷效果動畫
- JavaScript獲取元素透明度JavaScript