JS實現(xiàn)拖拽進度條改變元素透明度
更新時間:2021年10月19日 16:30:41 作者:aiguangyuan
這篇文章主要為大家詳細介紹了JS實現(xiàn)拖拽進度條改變元素透明度,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
今天要分享的是運用原生JS拖拽進度條改變元素透明度,效果如下:
以下是代碼實現(xiàn),歡迎大家復(fù)制粘貼。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS拖拽進度條改變元素透明度</title> <style> #parent { width: 400px; height: 20px; background: #CCC; position: relative; margin: 20px auto; } #div1 { width: 20px; height: 20px; background: red; cursor: pointer; position: absolute; } #div2 { width: 300px; height: 300px; margin: 0 auto; filter: alpha(opacity:0); opacity: 0; background: yellow; } </style> <script> window.onload = function () { var oDiv = document.getElementById('div1'); var oParent = document.getElementById('parent'); var oDiv2 = document.getElementById('div2'); oDiv.onmousedown = function (ev) { var oEvent = ev || event; //計算鼠標相對滑塊上的位置 var disX = oEvent.clientX - oDiv.offsetLeft; document.onmousemove = function (ev) { var oEvent = ev || event; //計算滑塊的動態(tài)left值 var l = oEvent.clientX - disX; //限制拖拽范圍 if (l < 0) { l = 0; } else if (l > oParent.offsetWidth - oDiv.offsetWidth) { l = oParent.offsetWidth - oDiv.offsetWidth; } oDiv.style.left = l + 'px'; //計算拖拽移動距離與可拖動總范圍的比例 var scale = l / (oParent.offsetWidth - oDiv.offsetWidth); //讓Div2跟隨鼠標的拖動逐漸顯示與隱藏 oDiv2.style.filter = 'alpha(opacity:' + 100 * scale + ')'; oDiv2.style.opacity = scale; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; }; }; }; </script> </head> <body> <div id="parent"> <div id="div1"></div> </div> <div id="div2"></div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使兩個iframe的高度與內(nèi)容自適應(yīng),且相等
使兩個iframe的高度與內(nèi)容自適應(yīng),且相等...2006-11-11學(xué)習(xí)Javascript閉包(Closure)知識
這篇文章主要介紹了學(xué)習(xí)Javascript閉包(Closure)知識的相關(guān)資料,需要的朋友可以參考下2016-08-08JavaScript實現(xiàn)扯網(wǎng)動畫效果的示例代碼
這篇文章主要為大家詳細介紹了如何利用JavaScript語言實現(xiàn)扯網(wǎng)動畫效果,文中的示例代碼講解詳細,對我們學(xué)習(xí)JS有一定的幫助,需要的可以參考一下2022-06-06JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析
本文是腳本之家小編日常整理些關(guān)于js兼容性問題,及IE與Firefox等常用瀏覽器的兼容性分析,對js瀏覽器兼容性相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03JavaScript+Canvas實現(xiàn)文字粒子流特效
看到大師級的canvas文字粒子動畫,要10個jq幣才能下載啊,我內(nèi)心的小鹿蠢蠢欲動,我也要寫一個。所以本文就來用Canvas實現(xiàn)簡單的文字粒子流特效,希望對大家有所幫助2023-01-01JS字符串false轉(zhuǎn)boolean的方法(推薦)
下面小編就為大家?guī)硪黄狫S字符串false轉(zhuǎn)boolean的方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03