js实例大全jsdemo,js基础案例
更新：2022-11-25 21:47
本文目录一览：
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法。分享给大家供大家参考，具体如下： 推荐一个图片旋转插件，用于浏览相册时，旋转图片。 运行效果截图如下： 点击此处查看在线演示效果。 具体代码如下：
$(document).ready(function() {
$("#images").rotate(45);
var value = $("#images1").rotate({
bind: {
mouseover: function() {
value += 90;
$(this).rotate({
animateTo: value
});
}
}
});
$('#button').click(function() {
$("#images1").rotate({ animateTo: parseInt($('#angel').val()) });
});
function rotation() {
$("#images2").rotate({
angle: 0,
animateTo: 360,
callback: rotation,
easing: function(x, t, b, c, d) {
return c * (t / d) + b;
}
});
}
rotation();
});
上面只是js代码，完整实例代码点击此处本站下载。 更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》 希望本文所述对大家jQuery程序设计有所帮助。
JS实现鼠标滑过链接改变网页背景颜色的方法
本文实例讲述了JS实现鼠标滑过链接改变网页背景颜色的方法。分享给大家供大家参考，具体如下： 这个小特效很不错，用链接改变网页背景色，鼠标放上链接文字上，网页背景就会跟着变换，想让你的主页更个性一点的朋友，这个代码一定能用上，其实你可在此基础上修改一下代码，改成鼠标放上文字切换样式表，这样整个网页就变了风格，是不是很实用？ 运行效果截图如下： 在线演示地址如下： 具体代码如下：
<head>
<title>鼠标放上链接改变网页背景颜色</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript">
function goHist(a) {
history.go(a);
}
</script>
</head>
<body>
<center>
<h2>鼠标放到相应链接上看看！</h2>
<table border="1" borderlight="green" style="border-collapse: collapse" cellpadding="5" cellspacing="0">
<tr>
<td align="center">
<a href="#" onMouseOver="document.bgColor='skyblue'">天空蓝</a>
<a href="#" onMouseOver="document.bgColor='red'">大红色</a>
<a href="#" onMouseOver="document.bgColor='#0066CC'">清新蓝</a>
</td>
</tr>
</table>
</center>
</body>
希望本文所述对大家JavaScript程序设计有所帮助。
js中的数组应用实例
比如说页面中有很多<input type='text' name='inp_txt'，以10个为例，你想要操作这些元素时就要把它们全部获取，不用数组来操作的话就要分别获取并操作10次。用数组获取：
var inp = document.getElementsByName("inp_txt");
for (var i = 0; i < inp.length; i++) {
document.write(inp[i].value); // 循环操作每个input
}
这样就可以一次获取并操作全部。 所以说：数组的好处是------可以方便的将一大堆数据进行重复操作。
JS基于面向对象实现的拖拽库实例
本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下： 这是一个面向对象的JS拖拽库，可设置水平锁定、垂直锁定、锁定位置、锁定范围等，设定这些范围后，只能在设定的模式下拖动，我觉得这是个挺不错的拖拽实例。 运行效果截图如下： 在线演示地址如下： 具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽库</title>
<style type="text/css">
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5 arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px solid #f60;}
#box .title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
</style>
<script type="text/javascript">
function Drag() {
this.initialize.apply(this, arguments);
}
Drag.prototype = {
initialize: function(drag, options) {
this.drag = this.$(drag);
this._x = this._y = 0;
this._moveDrag = this.bind(this, this.moveDrag);
this._stopDrag = this.bind(this, this.stopDrag);
this.setOptions(options);
this.handle = this.$(this.options.handle);
this.maxContainer = this.$(this.options.maxContainer);
this.maxTop = Math.max(this.maxContainer.clientHeight, this.maxContainer.scrollHeight) - this.drag.offsetHeight;
this.maxLeft = Math.max(this.maxContainer.clientWidth, this.maxContainer.scrollWidth) - this.drag.offsetWidth;
this.limit = this.options.limit;
this.lockX = this.options.lockX;
this.lockY = this.options.lockY;
this.lock = this.options.lock;
this.onStart = this.options.onStart;
this.onMove = this.options.onMove;
this.onStop = this.options.onStop;
this.handle.style.cursor = "move";
this.changeLayout();
this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag));
},
changeLayout: function() {
this.drag.style.top = this.drag.offsetTop + "px";
this.drag.style.left = this.drag.offsetLeft + "px";
this.drag.style.position = "absolute";
this.drag.style.margin = "0";
},
startDrag: function(event) {
var event = event || window.event;
this._x = event.clientX - this.drag.offsetLeft;
this._y = event.clientY - this.drag.offsetTop;
this.addHandler(document, "mousemove", this._moveDrag);
this.addHandler(document, "mouseup", this._stopDrag);
event.preventDefault && event.preventDefault();
this.handle.setCapture && this.handle.setCapture();
this.onStart();
},
moveDrag: function(event) {
var event = event || window.event;
var iTop = event.clientY - this._y;
var iLeft = event.clientX - this._x;
if (this.lock) return;
this.limit && (
iTop < 0 && (iTop = 0),
iLeft < 0 && (iLeft = 0),
iTop > this.maxTop && (iTop = this.maxTop),
iLeft > this.maxLeft && (iLeft = this.maxLeft)
);
this.lockY || (this.drag.style.top = iTop + "px");
this.lockX || (this.drag.style.left = iLeft + "px");
event.preventDefault && event.preventDefault();
this.onMove();
},
stopDrag: function() {
this.removeHandler(document, "mousemove", this._moveDrag);
this.removeHandler(document, "mouseup", this._stopDrag);
this.handle.releaseCapture && this.handle.releaseCapture();
this.onStop();
},
setOptions: function(options) {
this.options = {
handle: this.drag,
limit: true,
lock: false,
lockX: false,
lockY: false,
maxContainer: document.documentElement || document.body,
onStart: function(){},
onMove: function(){},
onStop: function(){}
};
for (var p in options) this.options[p] = options[p];
},
$: function(id) {
return typeof id === "string" ? document.getElementById(id) : id;
},
addHandler: function(oElement, sEventType, fnHandler) {
return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler);
},
removeHandler: function(oElement, sEventType, fnHandler) {
return oElement.removeEventListener ? oElement.removeEventListener(sEventType, fnHandler, false) : oElement.detachEvent("on" + sEventType, fnHandler);
},
bind: function(object, fnHandler) {
return function() {
return fnHandler.apply(object, arguments);
};
}
};
window.onload = function() {
var oBox = document.getElementById("box");
var oTitle = oBox.getElementsByTagName("h2")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oDrag = new Drag(oBox, { handle: oTitle, limit: false });
var aInput = document.getElementsByTagName("input");
aInput[0].onclick = function() {
oDrag.limit = !oDrag.limit;
this.value = oDrag.limit ? "取消锁定范围" : "锁定范围";
};
aInput[1].onclick = function() {
oDrag.lockX = !oDrag.lockX;
this.value = oDrag.lockX ? "取消水平锁定" : "水平锁定";
};
aInput[2].onclick = function() {
oDrag.lockY = !oDrag.lockY;
this.value = oDrag.lockY ? "取消垂直锁定" : "垂直锁定";
};
aInput[3].onclick = function() {
oDrag.lock = !oDrag.lock;
this.value = oDrag.lock ? "取消锁定位置" : "锁定位置";
};
oDrag.onStart = function() {
oSpan.innerHTML = "开始拖拽";
};
oDrag.onMove = function() {
oSpan.innerHTML = "left:" + this.drag.offsetLeft + ", top:" + this.drag.offsetTop;
};
oDrag.onStop = function() {
oSpan.innerHTML = "结束拖拽";
};
};
</script>
</head>
<body>
<div id="tool">
<input type="button" value="锁定范围" />
<input type="button" value="水平锁定" />
<input type="button" value="垂直锁定" />
<input type="button" value="锁定位置" />
</div>
<p>拖放状态：<span>未开始</span></p>
<div id="box">
<h2 class="title"></h2>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
