Scalable 3D Range Sliders

Simple Range

Patterned Range

89%

Gradient Range with Indicator

function initInputs() {

var allInputs = document.body.querySelectorAll(".bar-input");

for (var i = 0; i < allInputs.length; i++) {

var input = allInputs[i];

var barId = input.parentNode.id;

var styleEl = document.head.appendChild(document.createElement("style"));

if (i == allInputs.length - 1) {

//set indicator

var indicator=input.parentNode.querySelector('.bar .indicator');

setBarIndicator(barId, input, styleEl, indicator);

input.oninput = setBarIndicator.bind(this, barId, input, styleEl, indicator);

input.onchange = setBarIndicator.bind(this, barId, input, styleEl, indicator);

} else {

setBar(barId, input, styleEl);

input.oninput = setBar.bind(this, barId, input, styleEl);

input.onchange = setBar.bind(this, barId, input, styleEl);

}

function setBar(barId, input, styleEl) {

styleEl.innerHTML =

"#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";

}

function setBarIndicator(barId, input, styleEl, indicatorEl) {

styleEl.innerHTML =

"#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";

indicatorEl.style.marginLeft = (input.value - 10) + '%';

indicatorEl.textContent = input.value + '%';

}

initInputs();

css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效相关推荐

css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
html5鼠标滑过图片图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法在页面中引入boot ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时图片爆炸开并切换到下一张图片依次循环首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...

css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效

Scalable 3D Range Sliders

css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效相关推荐

最新文章

热门文章