这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家基于 js 实现拖动滚动条评分效果,在项目开发中经常可以用到的,大家可以更加需要适当的添加修改,对 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.phperz.com/zt/gundongtiao/" target="_blank" class="infotextkey">
- 滚动条
- </a>
- 评分的特效 (www.phperz.com)
- </title>
- <style>
- body{ margin:50px; ; } .scale_panel{ font-size:12px; color:#999; width:200px;
- position:absolute;
- <a href="http://www.phperz.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 = "http://www.phperz.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 实现拖动滚动条评分的效果代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0522/331480.html