一个javascript实现的slider效果

       每次写这些代码的时候我都是想谈一谈自己的感受，这里我也不免又想谈谈。我说过这里是我工作倾诉的地方，自己的空间畅所欲言虽然是自己的感想，但是网络上你并不认识我我也不怕你知道，因为在网络上去共享别人的思想，这是一件非常愉快的事情。至少我是怎么认为的。因为工作中难免会存在很多事情，如果大家都说出来，偶尔的被看到了，说不定也是遇到了这样情况，那么就会根据别人的感想而知道自己去怎么处理，很多的时候共享就是具有了超前的解决的问题的能力。

       半个月前跟我的一个女性的朋友借了300块钱，这里是女性朋友可不是女朋友唷，我很少跟女生借钱，这次真是没有办法所以就厚着脸皮跟她借了。借了就是要还的我答应她工资发了就马上还。所以昨天晚上我就请她吃了顿饭，顺便把钱还给她。吃饭的时候谈了好多，她比我早毕业了一年，而且她是学文科的，在一家贸易公司上班，我们是一个高中一个大学的同学，所以大概是这种关系吧，比较知己的朋友。很多的事情也是没有忌讳没有隐藏的聊着。因为这边的公司我已经辞职了，因为要一个月后离职的缘故，所以目前还是在公司上班，期间我跟她讨论起我下一步的打算，她本来以为我辞职已经找好了下家，没料到我根本就没有找而提出了辞职。她的言语中流露出了我的举动很草率的意思。其实说实话我也是真的很草率的决定，可能是自己才毕业了不要一年，总是那面有那么一些学生时代的理想气息，也很气胜，所以贸然我的决定辞职。我提出辞职老板也是很意外，因在事前我并没有要辞职的意思。很多事情想想就是自己去决定的事情。

     对公司还是比较有感情的毕竟在这个公司让我学会了很多编程方面的知识和技巧。这是我从事程序员工作的开始，给我了行业的指明灯，本来打算提出辞职就此快速离开公司，可能是目前项目真的没有人能够替代，也可能是我的贸然离开让目前的项目没有处理，所以老板提出了让我一个月后离职的要求。本着对公司的感情我答应了。昨天跟朋友谈起，她告诉我时间已经够了，想走就决定走，任何一个公司总有作不完的事情，离开你老板总是会想办法找人去做的，没有必要的去这样做了。因为毕竟是要离开，多做一些又有什么。因为我从提出离职并没有跟老板真正的谈过。所以我感觉她说的很有道理，我还是保有学生时代的别人围你转的思想，而一旦的踏上社会了，就是我围社会我围公司转，没有一个社会没有一个公司会与你真正的挂钩，没有你的存在社会生活继续，公司运行继续。是该给自己的路想想出路了。没有什么舍不得，没什么不能做。关键是要给自己一个规划才行。

      道理真的很简单，自己还是不成熟，年龄也不小了，总是这么任性妄为的去做事情，是自己对自己，自己对父母，自己对家人的不负责任。人要有责任感，没有责任感这个人充其量是社会的一个看客，匆匆的来匆匆的走。如今的自己不能就这样只考虑自己的快乐，父母的年龄在增大我要为家里人好好的想想了。不能这样妄为的去做一些傻事了，有时候自己的自制力就是很薄弱，如果连这些事情都不能搞定想想自己真的很失败，一个成功的人要具备的素质是很多的，不要以自己的个性来填充自己的成长，要一个个性去引导自己成功，在成功的素质中具备个性，这样才是最好的结局。是该给自己一点信心了，做事不能拖泥带水的。痛快解决，坦诚作人永远不会有错的。

    整理了一下工作日志发现其中还有这个代码，这是我当初來公司最初做cgi时让我修改的一个地方是一个slider效果的地方这里我把它贴出来。

 

 if (typeof getElementById!="function") {

 var getElementById = function (id) {

    if   (typeof(id)=="object") return id;

    if   (document.getElementById(id)) { return document.getElementById(id); }

    else { throw new Error(id +" argument error, can not find /"" +id+ "/" element"); }

 }

}

 

function getElCoordinate (e) {

 var t = e.offsetTop;

 var l = e.offsetLeft;

 var w = e.offsetWidth;

 var h = e.offsetHeight;

 while (e=e.offsetParent) {

    t += e.offsetTop;

    l += e.offsetLeft;

 }; return {

    top: t,

    left: l,

    width: w,

    height: h,

    bottom: t+h,

    right: l+w

 }

}

 

var neverModules = window.neverModules || {};

neverModules.modules = neverModules.modules || {};

 

neverModules.modules.slider = function (cfg) {

 if ((typeof cfg)!="object")

 throw new Error("config argument is not a object, err raise from slider constructor");

 

 this.targetId = cfg.targetId;

 this.hints      = cfg.hints?cfg.hints:"";

 this.sliderCss = cfg.sliderCss?cfg.sliderCss:"";

 this.barCss     = cfg.barCss?cfg.barCss:"";

 this.min        = cfg.min?cfg.min:0;

 this.max        = cfg.max?cfg.max:100;

  this.onstart    = null;

 this.onchange = null;

 this.onfinish = null;

 

 this._defaultInitializer.apply(this);

}

 

neverModules.modules.slider.prototype = {

 _defaultInitializer: function () {

    this._bar     = null;

    this._slider = null;

    this._wrapper = null;

    this._target = getElementById(this.targetId);

    if (this.min>this.max){var x=this.min;this.min=this.max;this.max=x;}

    this._value   = this.min;

 },

 

 create: function () {

    this._createSlider();

 },

 

 dispose: function () {

    //virtual function

 },

 

 createBar: function () { with(this) {

    //0.10 can not create mutilple bar

    //this interface is for next version

    //by never-online

    var _self = this;

    _bar = document.createElement("DIV");

    _wrapper.appendChild(_bar);

    _bar.title = hints;

    _bar.id = targetId + "_bar";

    _bar.className = barCss;

    _bar.style.position = "absolute";

 

    _bar.onmousedown = function (event) {

      _self._initHandle(event);

    }

 }},

 

 setValue: function (value) { with(this) {

    if (!_bar) return;

    value = Number(value);

    value = value>max?max:value<min?min:value;

    _bar.style.left = Math.round((value-min)*((_slider.offsetWidth-_bar.offsetWidth)/(max-min)))+"px";

    _value = value;

    onchange.call(this);

    onfinish.call(this);

 }},

 

 getValue: function () {

    return this._value;

 },

 

 _createSlider: function () { with(this) {

     var _self = this;

    _wrapper = document.createElement("DIV");

    _target.appendChild(_wrapper);

    _wrapper.id = targetId + "_wrapper";

    _wrapper.style.position = "relative";

 

    _slider = document.createElement("DIV");

    _wrapper.appendChild(_slider);

    _slider.id = targetId + "_slider";

    _slider.className = sliderCss;

    _slider.style.position = "absolute";

   

 

    this.createBar();

    _slider.onclick = function (event) { _self._moveTo(event); }

 }},

 

 _moveTo: function (evt) { with(this) {

    evt = evt?evt:window.event;

    var x = evt.clientX-getElCoordinate(_slider).left-Math.round(_bar.offsetWidth/2);

    x = x<=_slider.offsetLeft?_slider.offsetLeft:x>=_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth?_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth:x;

    _bar.style.left = x+"px"; _value = Math.round(x/((_slider.offsetWidth-_bar.offsetWidth)/(max-min))+min);

    onchange.call(this);

    onfinish.call(this);

 }},

 

 _initHandle: function (evt) { with(this) {

    evt = evt?evt:window.event; var _self = this;

    _bar.slider_x = evt.clientX-_bar.offsetLeft;

    document.onmousemove = function (event) { _self._changeHandle(event); }

    document.onmouseup   = function (event) { _self._stopHandle(event);   }

    onstart.call(this);

 }},

 

 _changeHandle: function (evt) { with(this) {

    evt = evt?evt:window.event; var x = evt.clientX-_bar.slider_x;

    x = x<=_slider.offsetLeft?_slider.offsetLeft:x>=_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth?_slider.offsetLeft+_slider.offsetWidth-_bar.offsetWidth:x;

    _bar.style.left = x+"px"; _value = Math.round(x/((_slider.offsetWidth-_bar.offsetWidth)/(max-min))+min);

    onchange.call(this);

 }},

 

 _stopHandle: function (evt) { with(this) {

    //Release event

    document.onmousemove = null;

    document.onmouseup   = null;

    onfinish.call(this);

 }}

}

这是一个js文件，保存成js文件就可以。接下来是htm  形式的测试代码

u      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">

      

 <head>

   <style type="text/css" media="all" title="Default">

  

      .imageSlider1 { margin:0;padding:0; height:20px; width:117px; background-image:url("images/scrollbg.gif"); }

     .imageBar1    { margin:0;padding:0; height:17px; width:10px; background-image:url("images/scrfloat.gif"); }

 

    </style>

    <meta http-equiv="ImageToolbar" content="no" />

   

   

    <script type="text/javascript" src="slider_extras.js"></script>

 </head>

 <body >

       

        <div style="height:100px; margin:10px; ">

          <div id="sliderDemo1" style="height:40px;"></div>

         

         

        </div>

        <script type="text/javascript">

        //<![CDATA[

          var sliderImage1 = new neverModules.modules.slider({targetId: "sliderDemo1",

                                                              sliderCss: "imageSlider1",

                                                              barCss: "imageBar1",

                                                              min: 0,

                                                              max: 20,

                                                              hints: "move the slider"

                                                              });

          sliderImage1.onstart = function () {

            getElementById("sliderDetail").innerHTML = "onstart: sliderImage1 Start value is " +sliderImage1.getValue();

          }

          sliderImage1.onchange = function () {

            getElementById("sliderDetail").innerHTML = "onchange: sliderImage1 Current value is " +sliderImage1.getValue();

          };

          sliderImage1.onfinish = function () {

            getElementById("sliderDetail").innerHTML += ", onfinish: The end the sliderImage1 value is " +sliderImage1.getValue();

          }

          sliderImage1.create();

          sliderImage1.setValue(sliderImage1.max/2);

 

          //--------------------------------------------------------------------------------

 

          var winSlider = new neverModules.modules.slider({targetId: "sliderDemo3",

                                                              sliderCss: "winSlider",

                                                              barCss: "winBar",

                                                              min: 0,

                                                              max: 10000,

                                                              hints: "move the slider"

                                                              });

 

          winSlider.onstart = function () {

            getElementById("sliderDetail").innerHTML = "onstart: winSlider Start value is " +winSlider.getValue();

          }

          winSlider.onchange = function () {

            getElementById("sliderDetail").innerHTML = "onchange: winSlider Current value is " +winSlider.getValue();

          };

          winSlider.onfinish = function () {

            getElementById("sliderDetail").innerHTML += ", onfinish: The end the winSlider value is " +winSlider.getValue();

          }

          winSlider.create();

          winSlider.setValue(5000);

        //]]>

        </script>

         

 </body>

</html>