简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用库即可完成，简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。
注意：打算提供在线例子的，但短时间内没有静态空间，所以例子的事情要稍等一阵子。已提供在线例子。
1、简易拖放效果
使用了 DOM 1 的方式登记事件，其实无必要 addEventListener，因为根据鼠标事件，同一时刻通常 document 只有一个 mousemove/mouseup 事件。点击查看例子。
<meta charset="utf-8" /> <title>拖放 DD</title> <script> SimpleDrag = function(el) { this.el = el; this._x = this._y = 0; el.onmousedown = delegate(this, this.start); this.move = delegate(this, this.move); function delegate(object, fn){ // 绑定当前 this，并且修正浏览器兼容问题 e || window.event return function(e) { return fn.call(object, (e || window.event)); } } }; SimpleDrag.prototype = { start : function(e) { this._x = e.clientX – this.el.offsetLeft; this._y = e.clientY – this.el.offsetTop; document.onmousemove = this.move; document.onmouseup = this.stop; }, // 拖动 move : function(e) { this.el.style.left = e.clientX – this._x + "px"; this.el.style.top = e.clientY – this._y + "px"; }, // 停止拖动 stop : function() { document.onmousemove = document.onmouseup = null; } }; </script> <style> .dragable{ background-color:#C4E3FD; width:50px; height:50px; position:absolute; left: 20px; cursor:move; } .dragEl_1{ top : 10px; border:5px solid blue; } .dragEl_2{ top : 80px; border:5px solid red; } </style> <div class="dragable dragEl_1">1</div> <div class="dragable dragEl_2">2</div> <script> new SimpleDrag(document.querySelector(".dragEl_1")); new SimpleDrag(document.querySelector(".dragEl_2")); </script> 2、上下滚动内容
原理是取出最尾元素放到前头。点击查看例子。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上下滚动内容</title> </head> <body> <ul id="scroll"><li>11111111111</li><li>22222222222</li><li>33333333333</li><li>44444444444</li><li>55555555555</li><li>66666666666</li><li>77777777777</li><li>88888888888</li><li>99999999999</li><li>00000000000</li> </ul><ol id="scrollA"><li>11111111111</li><li>22222222222</li><li>33333333333</li><li>44444444444</li><li>55555555555</li><li>66666666666</li><li>77777777777</li><li>88888888888</li><li>99999999999</li><li>00000000000</li> </ol><script>/** * @param {Element} el 列表元素 * @param {Number} interval 动画时间间隔 * @param {Boolean} canstop 是否可以鼠标移入时候暂停动画 */function ScrollContent(el, interval, canstop) {interval = interval || 3000;canstop = canstop || false;function scroll() {var lastEl = el.firstChild;while (lastEl.nodeType != 1) // 找到最后一个元素lastEl = lastEl.nextSibling;el.appendChild(el.removeChild(lastEl)); // 把最后一个元素放到前头}var t = window.setInterval(scroll, interval);if (canstop) {el.onmouseover = function() {if (t) window.clearInterval(t);}el.onmouseout = function() {t = window.setInterval(scroll, interval);}}}new ScrollContent(document.getElementById(‘scroll’), 1000);new ScrollContent(document.getElementById(‘scrollA’), 500, true);</script></body> </html> 3、左右滚动内容
原理跟前者一样，只不过是把元素换为字符串，应该是更简单的了。点击查看在线例子。
梦想，并不奢侈，只要勇敢地迈出第一步。
