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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript  Error 对象 错误处理
May 18 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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
PHP开发过程中常用函数收藏
2009/12/14 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
python妙用之编码的转换详解
2017/04/21 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python框架flask表单实现详解
2019/11/04 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
快速查找Python安装路径方法
2020/02/06 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis