JS实现拖动滚动条评分的效果代码分享
小编教你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="http://www.jb51.net/zt/gundongtiao/" target="_blank" class="infotextkey">滚动条</a>评分的特效 (www.jb51.net)</title>
<style>
body{
margin:50px; ;
}
.scale_panel{
font-size:12px;
color:#999;
width:200px;
position:absolute;
<a href="http://www.jb51.net/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="http://www.jb51.net/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实现拖动滚动条评分的效果代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
jsp中为表格添加水平滚动条的方法
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r
-
jsp中为表格添加水平滚动条的实现方法
首先,本项目中使用的是bootstrap框架,因此有些人会说,给表格设置自适应属性就可以了 这里要申明的是 bootsrtap自适应是针对当浏览器不占满整个屏幕,而是一半的时候才会出现横向的滚动条 而当我们将浏览器最大化的时候,如果列数增多了呢?会出现什么效果 答案就是会出现挤压的效果,横向并不会出现滚动条 查看网上的教程,很多人都说将什么父div设置100%,table添加scrool属性均不可 这里,解决的方法很简单,设置<th>标签的属性即可,让其不要自动换行 $(document).r
-
js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig
-
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
小知识点,废话不多说,直接上代码 css: 复制代码 代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码 代码如下: &l
-
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
复制代码 代码如下: /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.w
-
jsp中实现带滚动条的table表格实例代码
如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width
-
JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容.起始这个组件,完全可以自己利用javascript的滚动事件window.onscroll与position:fixed手写.IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在<[CSS]IE6中的position:fixed问题与随滚动条滚动的效果>(点击打开链接)介绍过了. 下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件.
-
原生JS绑定滑轮滚动事件兼容常见浏览器
滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a
-
JS实现拖动滚动条评分的效果代码分享
小编教你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>
-
js实现div拖动动画运行轨迹效果代码分享
本文实例讲述了js div拖动动画运行轨迹效果.分享给大家供大家参考.具体如下: 这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码.可以选择[记住轨迹]与[不记住轨迹]两种拖动显示模式,从而显示出不同的拖动效果. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能
-
js淡入淡出焦点图幻灯片效果代码分享
本文实例讲述了javascript淡入淡出焦点图幻灯片效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码,可以自定义标题,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js淡入淡出焦点图幻灯片效果代码如下 <head> <meta http-equiv="Content-Ty
-
js实现的tab标签切换效果代码分享
这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea
-
js钢琴按钮波浪式图片排列效果代码分享
本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能
-
js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文本框走动跑马灯代码</title> </
-
原生JS封装拖动验证滑块的实现代码示例
前言 星期六闲着没事,就想着写写原生js玩玩,在网上看了几个效果后决定做这个效果,并且使用了prototype和eventEmitter封装成了库. 最终效果 分析 看到这个效果我们首先应该想到和拖动有关的api: onmousedown, onmousemove, onmouseup 其次要支持用户传入放置这个组件的dom元素和完成的回调事件. 最终如何使用? 我们先来看下使用方式,再来决定我们怎么编写这个库 具体使用就是这样的,我们还想用户能通过import等方式使用,所以我们就要支持esM
-
JS实现状态栏跑马灯文字效果代码
本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T
-
JS实现的不规则TAB选项卡效果代码
本文实例讲述了JS实现的不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款采用菱形的选项卡效果,一改选项卡中规中矩的风格,效果非常不错,奉献给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-bgz-tab-cha-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="