JS实现拖动滚动条评分的效果代码分享


Posted in Javascript onSeptember 29, 2016

小编教你JS特效拖动滚动条可以评分效果,小编感觉挺不错,用时候可能需要ASP/PHP或其它语言配合取值并写入数据库,这是前台的实现。

直接上代码 看看JS的神奇吧!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JS实现拖动<a href="https://3water.com/zt/gundongtiao/" target="_blank" class="infotextkey">滚动条</a>评分的特效 (3water.com)</title>
<style>
body{
margin:50px; ; 
}
.scale_panel{
font-size:12px;
color:#999;
width:200px;
position:absolute; 
<a href="https://3water.com/article/15092.html" target="_blank" class="infotextkey">line-height</a>:18px; 
left:60px;
top:-0px;
}
.scale_panel .r{
float:right;
}
.scale span{
width:8px;
height:16px; 
position:absolute; 
left:-2px;
top:-1px;
cursor:pointer;
}
.scale{
border-left:1px #83BBD9 solid;
border-right:1px red solid;
width:200px;
height:10px; 
position:relative; 
font-size:0px;
}
.scale div{
width:0px; 
position:absolute; 
width:0;
left:0;
height:5px;
bottom:0;
}
li{
font-size:12px;
line-height:50px;
position:relative; 
height:50px; 
list-style:none;
}
</style>
</head>
<body>
<ul>
<li>爱情 <span id="title">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar">
<div></div>
<span id="btn"></span>
</div> 
</div> 
</li>
<li>事业 <span id="title2">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar2">
<div></div>
<span id="btn2"></span>
</div> 
</div> 
</li>
<li>家庭 <span id="title3">0</span>
<div class="scale_panel">
<span class="r">100</span>0
<div class="scale" id="bar3">
<div></div>
<span id="btn3"></span>
</div> 
</div> 
</li>
</ul>
</body>
<script>
scale=function (btn,bar,title){
this.btn=document.getElementById(btn);
this.bar=document.getElementById(bar);
this.title=document.getElementById(title);
this.step=this.bar.getElementsByTagName("DIV")[0];
this.init();
};
scale.prototype={
init:function (){
var f=this,g=document,b=window,m=Math;
f.btn.onmou<a href="https://3water.com/article/1141.html" target="_blank" class="infotextkey">sed</a>own=function (e){
var x=(e||b.event).clientX;
var l=this.offsetLeft;
var max=f.bar.offsetWidth-this.offsetWidth;
g.onmousemove=function (e){
var thisX=(e||b.event).clientX;
var to=m.min(max,m.max(-2,l+(thisX-x)));
f.btn.style.left=to+'px';
f.ondrag(m.round(m.max(0,to/max)*100),to);
b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
};
g.onmouseup=new Function('this.onmousemove=null');
};
},
ondrag:function (pos,x){
this.step.style.width=Math.max(0,x)+'px';
this.title.innerHTML=pos+'%';
}
}
new scale('btn','bar','title');
new scale('btn2','bar2','title2');
new scale('btn3','bar3','title3');
</script>
<br />
</html>

以上所述是小编给大家介绍的JS实现拖动滚动条评分的效果代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
javascript中的继承实例代码
Apr 27 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
javascript中常用编程知识
Apr 08 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
Angular 中 select指令用法详解
Sep 29 #Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 #Javascript
js仿小米官网图片轮播特效
Sep 29 #Javascript
基于jquery实现弹幕效果
Sep 29 #Javascript
js获取Get值的方法
Sep 29 #Javascript
js带闹铃功能的倒计时代码
Sep 29 #Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
You might like
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP 裁剪图片
2021/03/09 PHP
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Python迭代和迭代器详解
2016/11/10 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
如何真正的了解python装饰器
2020/08/14 Python
详解python polyscope库的安装和例程
2020/11/13 Python
办公室主任先进事迹
2014/01/18 职场文书
业务员的岗位职责
2014/03/15 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript