js实现彩色条纹滚动条效果


Posted in Javascript onMarch 15, 2017

左侧可用调色板选择条纹颜色

效果图:

js实现彩色条纹滚动条效果

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
字太多用...代替的方法(两种)
Mar 15 #Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 #Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 #Javascript
js仿淘宝商品放大预览功能
Mar 15 #Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 #Javascript
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php 生成WML页面方法详解
2009/08/09 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python实现单链表的方法示例
2019/09/03 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
北京大学自荐信范文
2014/01/28 职场文书
12月红领巾广播稿
2014/02/13 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
预备党员自我评价范文
2015/03/04 职场文书
特此通知格式
2015/04/27 职场文书
班主任培训研修日志
2015/11/13 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
Vue全局事件总线你了解吗
2022/02/24 Vue.js
python开发制作好看的时钟效果
2022/05/02 Python