在JS中如何改變單物體透明度

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:38:43

在JS中如何改變單物體透明度

在JS中如何改變單物體透明度:這篇文章主要介紹了JS運(yùn)動(dòng)改變單物體透明度的方法,結(jié)合實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下本文實(shí)例講述了JS運(yùn)動(dòng)改變單物體透明度的方法。分享給大家供大家參考，具體如下：除了通過(guò)改變物體的寬，高，letf,top位置或者

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀在JS中如何改變單物體透明度:這篇文章主要介紹了JS運(yùn)動(dòng)改變單物體透明度的方法,結(jié)合實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下本文實(shí)例講述了JS運(yùn)動(dòng)改變單物體透明度的方法。分享給大家供大家參考，具體如下：除了通過(guò)改變物體的寬，高，letf,top位置或者

這篇文章主要介紹了JS運(yùn)動(dòng)改變單物體透明度的方法,結(jié)合實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS運(yùn)動(dòng)改變單物體透明度的方法。分享給大家供大家參考，具體如下：

除了通過(guò)改變物體的寬，高，letf,top位置或者是運(yùn)動(dòng)方向來(lái)實(shí)現(xiàn)物體運(yùn)動(dòng)效果之外，改變物體的透明度，也是運(yùn)動(dòng)特效

<script>
 window.onload = function () {
 var op = document.getElementById('p1');
 op.onmousemove = function () {
 startMove(100);
 }
 op.onmouseout = function () {
 startMove(30);
 }
}
var timer = null;
function startMove(iTarget) {
 clearInterval(timer);
 var op = document.getElementById('p1');
 timer = setInterval(function(){
 if(op.offsetAlpha == iTarget){
 ....
 }
 },30);
}
</script>

但是在js中只有offsetLeft/Top ,offsetWidth/Height,這四個(gè)方法，并沒(méi)有offsetAlpha這個(gè)方法。

問(wèn)：那么我們?cè)趺磥?lái) 獲取當(dāng)前物體的透明度那？？

我們可以自己定義一個(gè)變量 var alpha = 30;通過(guò)判斷這個(gè)變量是否和目標(biāo)值是否相等，來(lái)繼續(xù)我們下一步的操作;

var alpha = 30; // 自定義一個(gè)變量

當(dāng)alpha 等目標(biāo)值得時(shí)候，清楚定時(shí)器，否則就改變透明度的值alpha

if(alpha == iTarget){
 clearInterval(timer);
}else{
 alpha += iSpeed;
 op.style.opacity = alpha/100;
 op.style.filter = 'alpha(opacity:'+alpha+')';
}

完整的代碼如下：

<p id="p1"></p>

css樣式部分：

<style>
 #p1{
 width: 100px;height: 100px;
 background: green;
 opacity:0.3;
 filter:alpha(opacity:30);/*兼容低版本IE*/
 }
</style>

js部分：

<script>
 window.onload = function () {
 var op = document.getElementById('p1');
 op.onmousemove = function () {
 startMove(100);
 }
 op.onmouseout = function () {
 startMove(30);
 }
 }
 var timer = null;
 var alpha = 30;
 function startMove(iTarget) {
 clearInterval(timer);
 var op = document.getElementById('p1');
 var iSpeed = 0;
 timer = setInterval(function(){
 if(alpha>iTarget){
 iSpeed = -10;
 }else{
 iSpeed = 10;
 }
 if(alpha == iTarget){
 clearInterval(timer);
 }else{
 alpha += iSpeed;
 op.style.opacity = alpha/100;
 op.style.filter = 'alpha(opacity:'+alpha+')';
 }
 },30);
 }
</script>

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在vue中將對(duì)象新增的屬性添加到檢測(cè)序列的方法有哪些？

在jQuery中實(shí)現(xiàn)碰到邊緣反彈的動(dòng)畫(huà)效果該如何做？

在vue cli webpack中如何使用sass（詳細(xì)教程）

在jQuery中實(shí)現(xiàn)標(biāo)簽子元素的添加和賦值方法

在JS中如何生成隨機(jī)數(shù)（詳細(xì)教程）

在JS中如何改變頁(yè)面顏色（詳細(xì)教程）

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com