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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
vue2项目使用sass的示例代码
Jun 28 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
键盘控制事件应用教程大全
2006/11/24 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
Python制作钉钉加密/解密工具
2016/12/07 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
GWT都有什么特性
2016/12/02 面试题
致标枪运动员广播稿
2014/02/06 职场文书
售后客服个人自我评价
2014/09/14 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
茶花女读书笔记
2015/06/29 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python