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脚本实现Web页面信息交互
Dec 21 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
js实现带有动画的返回顶部
Aug 09 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过滤危险html代码
2008/08/18 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js 通用订单代码
2013/12/23 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
物流专员岗位职责
2014/02/17 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
MySQL 字符集 character
2022/05/04 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android