简介：有自己写的，也有网上看到的，即使是别人写的也会对其改动，或添加注释，并保持统一的编码风格，便于阅读。目标是不用库即可完成，简单做，能够阐述逻辑和原理清楚即可，因此可能考虑不是最周详的，包括跨浏览器的问题，如果你打算使用在项目中使用最好测试清楚，还可能要进一步修改之。
注意：打算提供在线例子的，但短时间内没有静态空间，所以例子的事情要稍等一阵子。已提供在线例子。
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、左右滚动内容
原理跟前者一样，只不过是把元素换为字符串，应该是更简单的了。点击查看在线例子。
<meta charset="utf-8" />
<title>水平字幕滚动</title>
<div class="content1">这是一段滚动的文字11111111</div>
<div class="content2">这是一段滚动的文字22222222</div>
<script>
/**
* @param {Element} el 列表元素
* @param {Number} interval 动画时间间隔
* @param {Boolean} canstop 是否可以鼠标移入时候暂停动画
*/
function ScrollContent_Hoz(el, interval, canstop) {
interval = interval || 500;
canstop = canstop || false;
var arr = el.innerHTML.split("");
function scroll() {
arr.push(arr.shift());
el.innerHTML = arr.join("");
}
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_Hoz(document.querySelector(‘.content1‘));
new ScrollContent_Hoz(document.querySelector(‘.content2‘), null, true);
</script>
3、多级联动下拉菜单
联动本身并无多大难点，只是 onchange 事件的运用即可。值得一提的是这个演示了日历控件所涉及的日历生成算法——当然这是后话了。点击查看在线例子。
<meta charset="UTF-8">
<title>联动 Select 下拉</title>
<select id="year">
<option value="0">--请选择--</option>
</select>年
<select id="month">
<option value="0">--请选择--</option>
</select>月
<select id="day">
<option value="0">--请选择--</option>
</select>日
<script>
function initSelect(selectEl, i, end) {
selectEl.length = 1;
for (; i <= end; i++) {
try {
selectEl.add(new Option(i, i), null);
} catch (e) {
selectEl.add(new Option(i, i));
}
}
}
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
initSelect(year, 1970, 2012);
year.onchange = function() {
if (this.value != 0) {
initSelect(month, 1, 12);
} else {
month.length = 1;
day.length = 1;
}
}
month.onchange = function() {
if (this.value != 0) {
var m30 = {
2 : 1,
4 : 1,
6 : 1,
9 : 1,
11 : 1
};
if (this.value == 2) { // 二月份特别处理
if (isLeapYear(year.value))
initSelect(day, 1, 29);
else initSelect(day, 1, 28);
} else if (this.value in m30) // 三十天的月份
/*
因为2、4、6、9、11月份都是30天，如果把它们放在一个数组中，那么还要遍历来判断是否相等，则比较麻烦了，于是在这里把这些都当成对象来处理，使用 in 判断即可
*/
initSelect(day, 1, 30);
else initSelect(day, 1, 31);
} else day.length = 1;
}
// 判断闰年的条件：能被4整除且不能被100整除 或 能被100整除且能被400整除
function isLeapYear(y) {
return (y % 4 == 0 && y % 100 != 0)
|| (y % 100 == 0 && y % 400 == 0);
}
</script>
http://www.zgwlsc.net/lstore/static/src/widget/carousel/main.js
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-11-03 10:02:57