js實現(xiàn)彩色條紋滾動條效果
更新時間：2017年03月15日 10:59:08 作者：shangpudxd
本文主要介紹了js實現(xiàn)彩色條紋滾動條效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
左側(cè)可用調(diào)色板選擇條紋顏色
效果圖：
代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
@-webkit-keyframes demo{
from{ left:0;}
to{ left:-113px;}
}
.box{ width:120px; height:400px; border:1px solid #000; margin:100px auto; position:relative; overflow:hidden;}
.bar{ position:absolute; left:0; top:0; width:500px; height:400px; background: -webkit-repeating-linear-gradient(-45deg , red 0px, red 20px, #fff 20px, #fff 40px, blue 40px, blue 60px, #fff 60px, #fff 80px); animation:demo 2s linear infinite; }
</style>
<script>
window.onload = function(){
var oC1 = document.querySelectorAll('input')[0];
var oC2 = document.querySelectorAll('input')[1];
var oBar = document.querySelector('.box .bar');
oC1.onchange = oC2.onchange = function(){
oBar.style.background = '-webkit-repeating-linear-gradient(-45deg , '+oC1.value+' 0px, '+oC1.value+' 20px, #fff 20px, #fff 40px, '+oC2.value+' 40px, '+oC2.value+' 60px, #fff 60px, #fff 80px)';
};
};
</script>
</head>
<body>
<input type="color" value="#ff0000" />
<input type="color" value="#0000ff" />
<div class="box">
<div class="bar"></div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)簡單的二維矩陣乘積運(yùn)算方法,涉及JavaScript基于數(shù)組操作實現(xiàn)矩陣運(yùn)算的功能,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JavaScript中數(shù)組添加值和訪問值常見問題的相關(guān)資料2016-02-02
uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例
很多列表頁總數(shù)量很大,一次性查詢加載會導(dǎo)致頁面有很長時間的空白期,自然體驗感極差,就會使用分頁加載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例的相關(guān)資料,需要的朋友可以參考下2022-08-08
單引號和雙引號之間可以相互嵌套。接下來通過本文給大家介紹JavaScript的單雙引號嵌套問題 ，感興趣的朋友一起看看吧2017-08-08
JS判斷不同分辨率調(diào)用不同的CSS樣式文件實現(xiàn)思路及測試代碼
最近看一個網(wǎng)站，發(fā)現(xiàn)顯示器不同的分辨率，樣式文件調(diào)用的也不一樣，于是很好奇研究并寫了一個,經(jīng)測試感覺還不錯，感興趣的你可以來看看哦2013-01-01
本篇文章小編為大家介紹，關(guān)于ExtJS4.1 快捷鍵支持的問題。需要的朋友參考下2013-04-04
json文件是一種輕量級的數(shù)據(jù)交互格式,下面這篇文章主要給大家介紹了關(guān)于Javascript讀取json文件方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單的吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
javascript instanceof 內(nèi)部機(jī)制探析
在 JavaScript 中，可以用 instanceof 來判斷一個對象是不是某個類或其子類的實例。2010-10-10
在將uniapp打包成APP端時,上架到應(yīng)用市場的時候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中設(shè)置隱私政策彈窗的相關(guān)資料,需要的朋友可以參考下2023-01-01