本文目錄一覽：
jQuery圖片旋轉插件jQueryRotate.js用法實例(附demo下載)
本文實例講述了jQuery圖片旋轉插件jQueryRotate.js用法。分享給大家供大家參考，具體如下：
推薦一個圖片旋轉插件，用於瀏覽相冊時，旋轉圖片。
運行效果截圖如下：
點擊此處查看在線演示效果。
具體代碼如下：
script
type=”text/javascript”
$(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();
});
/script
上面只是js代碼，完整實例代碼點擊此處本站下載。
更多關於jQuery插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
JS實現鼠標滑過鏈接改變網頁背景顏色的方法
本文實例講述了JS實現鼠標滑過鏈接改變網頁背景顏色的方法。分享給大家供大家參考，具體如下：
這個小特效很不錯，用鏈接改變網頁背景色，鼠標放上鏈接文字上，網頁背景就會跟着變換，想讓你的主頁更個性一點的朋友，這個代碼一定能用上，其實你可在此基礎上修改一下代碼，改成鼠標放上文字切換樣式表，這樣整個網頁就變了風格，是不是很實用？
運行效果截圖如下：
在線演示地址如下：
具體代碼如下：
html
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″
trtd
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
/html
希望本文所述對大家JavaScript程序設計有所幫助。
js中的數組應用實例
比如說頁面中有很多input type=’text’ name=‘inp_txt’，以10個為例吧你想要操作這些元素時就要把它們全部獲取，不用數組來操作的話就要分別獲取並操作10次。用數組獲取var inp=document.getElementsByName(“inp_txt”),for(var i=0;iinp.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
(iTop
=
0),
iLeft
(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]
},
//獲取id
$
:
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程序設計有所幫助。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/157363.html
微信掃一掃 
支付寶掃一掃 