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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
js实现列表按字母排序
Aug 11 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
星际玩家的三大定律
2020/03/04 星际争霸
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php中autoload的用法总结
2013/11/08 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
laravel自定义分页效果
2017/07/23 PHP
javascript图片预加载完整实例
2015/12/10 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
党性分析自查总结
2014/10/14 职场文书
辩护词格式
2015/05/22 职场文书
草房子读书笔记
2015/06/29 职场文书
我的生日感言
2015/08/03 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书