这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 JavaScript 实战 (原生 range 和自定义特效) 简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
今天我又码了两个特效:一个是用原生 input[type=range] 的,另一个完全自定义的;下面是完整代码和演示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #tip{
- position: absolute;
- top: 30px;
- left: 0;
- right: 0;
- width: 200px;
- height: 160px;
- margin: auto;
- border: 1px solid gray;
- background-color: cornsilk;
- }
- #tip div{
- position: relative;
- width: 100%;
- height: 80px;
- border-bottom: 1px solid gray;
- }
- .out{
- position: relative;
- left: 16%;
- display: inline-block;
- border: 2px solid royalblue;
- margin-top: 20px;
- width: 130px;
- height: 20px;
- background-color: lightgoldenrodyellow;
- }
- .in{
- display: block;
- height: 20px;
- line-height: 20px;
- text-align: right;
- color: white;
- width: 50%;
- background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 100%);
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- input[type="range"] {
- position: relative;
- left: 19%;
- top: 5px;
- box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;
- background-color: lightskyblue;
- border-radius: 15px;
- width: 60%;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- height:15px;
- }
- input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- height: 20px;
- width: 10px;
- background-color: coral;
- border-radius: 15px;
- -webkit-box-shadow: 0 -1px 1px black inset;
- -moz-box-shadow: 0 -1px 1px black inset;
- box-shadow: 0 -1px 1px black inset;
- }
- input[type="range"]:before{
- content: attr(value);
- color: white;
- border-radius: 5px 0 0 5px;
- background-color: lightskyblue;
- }
- input[type="range"]:after{
- content: attr(max);
- color: white;
- border-radius:0 5px 5px 0;
- background-color: lightskyblue;
- }
- .b{
- display: inline-block;
- width: 22px;
- padding: 0;
- }
- #outer2{left: 5px}
- #btn1{
- position: relative;
- left: 5px;
- }
- #btn2{
- position: relative;
- left: 5px;
- }
- </style>
- <script>
- window.onload = function(){
- //原生组件range
- var inner = document.getElementById('inner1');
- var range = document.getElementById('range');
- range.onclick = function(){
- inner.innerHTML = range.value;
- inner.style.width = range.value+'%';
- };
- range.onmousemove = function(){
- inner.innerHTML = range.value;
- inner.style.width = range.value+'%';
- };
- //自定义组件
- var outer2 = document.getElementById('outer2');
- var inner2 = document.getElementById('inner2');
- var btn1 = document.getElementById('btn1');
- var btn2 = document.getElementById('btn2');
- var id,id1;
- var value = parseInt(inner2.innerHTML);
- var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
- //减---
- btn1.onmousedown = function(){
- id1 = setTimeout(function change(){
- if(value>0) {
- value--;
- inner2.innerHTML = value;
- inner2.style.width = (value) * a + 'px';
- id = setTimeout(function(){
- clearTimeout(id);
- change();
- },16.7);
- }else{clearTimeout(id);}
- },500);
- };
- btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
- btn1.onclick = function(){
- console.log('a:'+a+','+'value:'+value);
- if(value>0){
- value--;
- inner2.innerHTML = value;
- inner2.style.width = (value)*a+'px';
- }
- };
- //加+++
- btn2.onmousedown = function(){
- id1 = setTimeout(function change(){
- if(value<100) {
- value++;
- inner2.innerHTML = value;
- inner2.style.width = value * a + 'px';
- id = setTimeout(function(){
- clearTimeout(id);
- change();
- },16.7);
- }else{clearTimeout(id);}
- },500);
- };
- btn2.onmouseup = function(){clearTimeout(id1);clearTimeout(id)};
- btn2.onclick = function(){
- if(value<100){
- value++;
- inner2.innerHTML = value;
- inner2.style.width = value*a+'px';
- }
- }
- }
- </script>
- </head>
- <body>
- <form id="tip">
- <div>
- <span id="outer1" class="out">
- <span id="inner1" class="in">50</span>
- </span>
- <input id="range" class="ran" type="range" min="0" max="100" step="1" value="50">
- </div>
- <div id="d2">
- <input id="btn1" class="b" type="button" value="<">
- <span id="outer2" class="out">
- <span id="inner2" class="in">50</span>
- </span>
- <input id="btn2" class="b" type="button" value=">">
- </div>
- 按住按钮0.5秒, 会持续变化!
- </form>
- </body>
- </html>
第一个的实现很简单,就不做解释了,自己看代码;
这里主要介绍第二个实例的实现:
在我们看到一个需求,或者别人的特效时,不急着去看别人的代码,先想想,要是你,该怎么实现?先把思路整理出来
该特效的实现原理:
1. 一个 span 内嵌套一个 span;
• 外面的 span:只显示宽、高、边框,背景无
• 里面的 span:高度和外面一样,宽度为默认的 50%,先设置好背景颜色为线性渐变
2. 按钮的 onclick 事件比较简单,点一下,就改变里面的 span 的宽度和显示数字
3. 当按钮的 onmousedown 时,启动计时器,等 500ms 后执行函数 change 函数,而 change 函数是一个用 setTimeout 回调自身的函数,他会没 16.7ms 回调一次,达到动画效果
难点解析:
1. 这一句 var a = parseFloat(window.getComputedStyle(outer2,null).width)/100; 用来获得初始值,如果你用 outer2.style.width 是得不到值得,当然你也可以将 a 设个固定值,比如这里可以设为 var a = 1.3, 注意 IE9 以下不支持 getComputedStyle 方法, IE 的 Element 对象有 currentStyle 属性;
2. 这一句 btn1.onmouseup = function(){clearTimeout(id1); clearTimeout(id)}; 很关键,没了它,在 onclick 触发之前,会先触发 onmosedown,在 500ms 后,开始执行,之后一直执行外层的计时器; 3. 其它的都不是难点;这个实例其实扩展到其它很多应用,比如可以把中间的显示部分替换为文章、图片等等,再把按钮换成自定义的,效果将会很酷的!
如果您觉得我有写的不好的地方,欢迎指出!
以上这篇 JavaScript 实战 (原生 range 和自定义特效) 简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0530/332434.html