例子一:文字伸缩
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content" content="text/html charset=gb2312">
<title>slide文字框缩放伸展效果</title>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;}
.box{width:300px; margin:10px; border:1px solid #ccc; overflow:hidden; position:relative; font-size:12px;}
.oHx{height:30px; background:#eee; line-height:30px; font-size:14px; text-indent:14px; cursor:pointer;}
.fold{position:absolute; top:9px; right:12px;}
.box_content{line-height:18px; overflow:hidden; display:none;}
</style>
<script type="text/javascript">
function getElementsByClassName(className,id,tag){
tag = tag || "*";
if(id){
var id = typeof id == "string" ? $(id) : id;
}else{
var id = document.body;
}
var els = id.getElementsByTagName(tag),arr = [];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j]==className){
arr.push(els[i]);
break;
}
}
}
return arr;
};
function Slide(slideClass,slideBtn,slideCon,slideSpeed) {
this.oSlides = getElementsByClassName(slideClass);
this.oTimer = null;
this.slideBtn = slideBtn;
this.slideCon = slideCon;
this.slideSpeed = slideSpeed;
}
Slide.prototype = {
oTimer:null,
_init:function (){
this._slideEvent();
},
_slideEvent:function (){
var This = this;
for(var i = 0,n=This.oSlides.length;i<n;i++){
(function(n){
var oSlide = This.oSlides[n];
var oSlideBtn = getElementsByClassName(This.slideBtn,oSlide)[0];
var oSlideCon = getElementsByClassName(This.slideCon,oSlide)[0];
oSlideBtn.onclick = function (){
if(oSlideCon.style.display == "block" && This.oTimer == null){
This._slideClose(oSlideCon);
}else if(!(oSlideCon.style.display == "block" ) && This.oTimer == null){
This._slideOpen(oSlideCon);
}
}
})(i)
}
},
_slideOpen:function (slideCon){
var This = this;
slideCon.style.display = "block";
slideCon.style.height = "auto";
var slideHeight = slideCon.offsetHeight;
slideCon.style.height = 0 + "px";
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight < slideHeight){
slideCon.style.height = slideCon.offsetHeight + 2 + "px";
}else{
clearInterval(This.oTimer);
This.oTimer = null;
}
},This.slideSpeed);
},
_slideClose:function (slideCon){
var This = this;
This.oTimer = setInterval(function (){
if(slideCon.offsetHeight <= 0){
clearInterval(This.oTimer);
slideCon.style.display = "none";
This.oTimer = null;
}else{
slideCon.style.height =slideCon.offsetHeight - 2 + "px";
}
},This.slideSpeed);
}
}
</script>
</head>
<body>
<div class="box">
<div class="oHx slide">收缩2</div>
<div class="box_content">
<ul class="uft" style="padding:10px;">
<li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点,VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
</ul>
</div>
</div>
<div class="box">
<div class="oHx slide">收缩3</div>
<div class="box_content">
<ul class="uft"style="padding:10px;">
<li><a href="/soft/11215.shtml" target="_blank">scscms V1.0 阳光企业网站系统</a></li><li><a href="/soft/9686.shtml" target="_blank">24点,VC++游戏源码</a></li><li><a href="/soft/11002.shtml" target="_blank">可记录图像的C#数据库记录单程序</a></li><li><a href="/soft/11134.shtml" target="_blank">jQuery 1.4 参考指南的实例源代码</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var mySlide = new Slide("box","slide","box_content",10);
mySlide._slideEvent();
</script>
</body>
</html>
例子二、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head>
<title>据说是Google首页的网页模块拖动代码</title>
<script type="text/javascript">
var Common = {
getEvent: function() {//ie/ff
if (document.all) {
return window.event;
}
func = getEvent.caller;
while (func != null) {
var arg0 = func.arguments[0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func = func.caller;
}
return null;
},
getMousePos: function(ev) {
if (!ev) {
ev = this.getEvent();
}
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
if (document.documentElement && document.documentElement.scrollTop) {
return {
x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
};
}
else if (document.body) {
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
},
getElementPos: function(el) {
el = this.getItself(el);
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
},
getItself: function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
},
getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },
isIE: document.all ? true : false,
setOuterHtml: function(obj, html) {
var Objrange = document.createRange();
obj.innerHTML = html;
Objrange.selectNodeContents(obj);
var frag = Objrange.extractContents();
obj.parentNode.insertBefore(frag, obj);
obj.parentNode.removeChild(obj);
},
firstChild: function(parentObj, tagName) {
if (Common.isIE) {
return parentObj.firstChild;
}
else {
var arr = parentObj.getElementsByTagName(tagName);
return arr[0];
}
},
lastChild: function(parentObj, tagName) {
if (Common.isIE) {
return parentObj.lastChild;
}
else {
var arr = parentObj.getElementsByTagName(tagName);
return arr[arr.length - 1];
}
},
setCookie: function(name, value) {
document.cookie = name + "=" + value;
},
getCookie: function(name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (!arr[1]) {
return "";
}
if (arr[0] == name) {
return arr[1];
}
}
return "";
},
delCookie: function(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
///------------------------------------------------------------------------------------------------------
var Class = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
}
var Drag = Class.create();
Drag.prototype = {
init: function(titleBar, dragDiv, Options) {
//设置点击是否透明,默认透明60%
titleBar = Common.getItself(titleBar);
dragDiv = Common.getItself(dragDiv);
this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
if (Options) {
this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
if (Options.area) {
if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
}
}
else {
this.opacity = 60;
}
this.originDragDiv = null;
this.tmpX = 0;
this.tmpY = 0;
this.moveable = false;
this.dragArray = [];
var dragObj = this;
var dragTbl = document.getElementById("dragTable");
titleBar.onmousedown = function(e) {
var ev = e || window.event || Common.getEvent();
//只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0
if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
}
else {
return false;
}
//处理特殊情况:在最上/下面MOVE时不碰到现有DIV的情况下,又回到起始拖拽的列最上/下方
var tmpColId;
for (c = 0; c < dragTbl.rows[0].cells.length; c++) {
for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) {
if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {
tmpColId = c;
break;
}
}
}
var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };
//保存当前可拖拽各容器的所在位置
dragObj.dragArray = dragObj.RegDragsPos();
//插入虚线框
var dashedElement = document.createElement("div");
dashedElement.style.cssText = dragDiv.style.cssText;
dashedElement.style.border = " dashed 2px #aaa ";
dashedElement.style.marginBottom = "6px";
dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //减去boderWidth使虚线框大小保持与dragDiv一致
dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确
dashedElement.style.position = "relative";
if (dragDiv.nextSibling) {
dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);
}
else {
dragDiv.parentNode.appendChild(dashedElement);
}
//拖动时变为absolute
dragDiv.style.width = dragDiv.offsetWidth + "px";
dragDiv.style.position = "absolute";
dragObj.moveable = true;
dragDiv.style.zIndex = dragObj.GetZindex() + 1;
var downPos = Common.getMousePos(ev);
dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
dragObj.tmpY = downPos.y - dragDiv.offsetTop;
if (Common.isIE) {
dragDiv.setCapture();
} else {
window.captureEvents(Event.mousemove);
}
dragObj.SetOpacity(dragDiv, dragObj.opacity);
//FireFox 去除容器内拖拽图片问题
if (ev.preventDefault) {
ev.preventDefault();
ev.stopPropagation();
}
document.onmousemove = function(e) {
if (dragObj.moveable) {
var ev = e || window.event || Common.getEvent();
//IE 去除容器内拖拽图片问题
if (document.all) //IE
{
ev.returnValue = false;
}
var movePos = Common.getMousePos(ev);
dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";
dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";
var targetDiv = null;
for (var k = 0; k < dragObj.dragArray.length; k++) {
if (dragDiv == dragObj.dragArray[i]) {
continue;
}
if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth
&& movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight
) {
targetDiv = document.getElementById(dragObj.dragArray[k].DragId);
if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) {
//往上移
dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";
targetDiv.parentNode.insertBefore(dashedElement, targetDiv);
}
else {
//往下移
dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";
if (targetDiv.nextSibling) {
targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);
}
else {
targetDiv.parentNode.appendChild(dashedElement);
}
}
}
}
for (j = 0; j < dragTbl.rows[0].cells.length; j++) {
var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;
if (movePos.x > startLeft && movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) {
///列无DIV
if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {
dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";
dragTbl.rows[0].cells[j].appendChild(dashedElement);
}
else {
var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));
//处理特殊情况:在最上/下面MOVE时不碰到现有DIV的情况下,又回到起始拖拽的列最上/下方
var tmpUp, tmpDown;
if (tmpObj.colId == j) {
tmpUp = tmpObj.firstChildUp;
tmpDown = tmpObj.lastChildDown;
}
else {
tmpUp = posFirstChild.y;
tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;
}
if (movePos.y < tmpUp) {///从最上面插入虚线框
dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";
dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));
}
else if (movePos.y > tmpDown) {///从最下面插入虚线框
dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";
dragTbl.rows[0].cells[j].appendChild(dashedElement);
}
}
}
}
}
};
document.onmouseup = function() {
if (dragObj.moveable) {
if (Common.isIE) {
dragDiv.releaseCapture();
}
else {
window.releaseEvents(dragDiv.mousemove);
}
dragObj.SetOpacity(dragDiv, 100);
dragObj.moveable = false;
dragObj.tmpX = 0;
dragObj.tmpY = 0;
//务必写在此IF内
dragDiv.style.left = "";
dragDiv.style.top = "";
dragDiv.style.width = "";
dragDiv.style.position = "";
dashedElement.parentNode.insertBefore(dragDiv, dashedElement);
dashedElement.parentNode.removeChild(dashedElement);
}
};
}
},
SetOpacity: function(dragDiv, n) {
if (Common.isIE) {
dragDiv.filters.alpha.opacity = n;
}
else {
dragDiv.style.opacity = n / 100;
}
},
GetZindex: function() {
var maxZindex = 0;
var divs = document.getElementsByTagName("div");
for (z = 0; z < divs.length; z++) {
maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
}
return maxZindex;
},
RegDragsPos: function() {
var arrDragDivs = new Array();
var dragTbl = document.getElementById("dragTable");
var tmpDiv, tmpPos;
for (i = 0; i < dragTbl.getElementsByTagName("div").length; i++) {
tmpDiv = dragTbl.getElementsByTagName("div")[i];
if (tmpDiv.className == "dragDiv") {
tmpPos = Common.getElementPos(tmpDiv);
arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });
}
}
return arrDragDivs;
}
}
window.onload = function() {
var dragTbl = document.getElementById("dragTable");
if (Common.getCookie("configArr")) {
var configArr = eval("(" + Common.getCookie("configArr") + ")");
for (i = 0; i < dragTbl.rows[0].cells.length; i++) {
for (j = 0; j < configArr[i].length; j++) {
dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));
}
}
}
new Drag("titleBar1", "dragDiv1");
new Drag("titleBar2", "dragDiv2");
new Drag("titleBar3", "dragDiv3");
new Drag("titleBar4", "dragDiv4");
new Drag("titleBar5", "dragDiv5");
}
window.onunload = function() {
var dragTbl = document.getElementById("dragTable");
var configArr = "";
for (i = 0; i < dragTbl.rows[0].cells.length; i++) {
var tmpStr = "";
for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j++) {
tmpStr += (tmpStr == "" ? "" : ",") + "'" + dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id + "'";
}
configArr += (configArr == "" ? "" : ",") + "[" + tmpStr + "]";
}
//format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]
Common.setCookie("configArr", "[" + configArr + "]");
}
</script>
<style type="text/css">
.spanDiv{
position:relative;
width:5px;
height:5px;
}
.dragDiv,.nodragDiv{
position:relative;
filter:alpha(opacity=100);
opacity:1;
margin-bottom:6px;
background-color:#FFFFFF;
}
</style>
</head>
<body >
<script type="text/javascript">
</script>
<table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;">
<tr>
<td valign="top" style="width:30%">
<div class="dragDiv" id="dragDiv1" >
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on" >Title1</th>
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top" >
<td unselectable="on">这里的字比较长....我来了....中国....中国...外国.,看一下有没有溢出></td>
</tr>
</table>
</div>
<div class="dragDiv" id="dragDiv2">
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on" >Title2</th>
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top" >
<td unselectable="on">Content2...</td>
</tr>
</table>
</div>
</td>
<td valign="top" style="width:50%">
<div class="dragDiv" id="dragDiv3">
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on" >Title3</th>
</tr>
<tr style="height:230px;padding:3px;" align="left" valign="top" >
<td unselectable="on">Content3...</td>
</tr>
</table>
</div>
</td>
<td valign="top" style="width:20%">
<div class="dragDiv" id="dragDiv4">
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on" >Title4</th>
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top" >
<td unselectable="on">Content4...</td>
</tr>
</table>
</div>
<div class="dragDiv" id="dragDiv5">
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue">
<tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;">
<th align="left" unselectable="on" >Title5</th>
</tr>
<tr style="height:130px;padding:3px;" align="left" valign="top" >
<td unselectable="on">Content5...</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
例子三、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js层拖动 -
www.codefans.net</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#div2{
width:200px;
height:200px;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#div1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#div2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#div2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var zhezhao=document.getElementById("zhezhao");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
rightStart.x=right.offsetLeft;
if(right.setCapture)
{
right.onmousemove=doDrag1;
right.onmouseup=stopDrag1;
right.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag1,true);
document.addEventListener("mouseup",stopDrag1,true);
}
};
function doDrag1(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+rightStart.x;
var w=l+oDiv.offsetWidth;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
oDiv2.style.width=w+"px";
};
function stopDrag1()
{
if(right.releaseCapture)
{
right.onmousemove=null;
right.onmouseup=null;
right.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag1,true);
document.removeEventListener("mouseup",stopDrag1,true);
}
};
//往下拽
bottom.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
bottomStart.y=bottom.offsetTop;
if(bottom.setCapture)
{
bottom.onmousemove=doDrag2;
bottom.onmouseup=stopDrag2;
bottom.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag2,true);
document.addEventListener("mouseup",stopDrag2,true);
}
};
function doDrag2(ev)
{
var oEvent=ev||event;
var t=oEvent.clientY-mouseStart.y+bottomStart.y;
var h=t+oDiv.offsetHeight;
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.height=h+"px";
};
function stopDrag2()
{
if(bottom.releaseCapture)
{
bottom.onmousemove=null;
bottom.onmouseup=null;
bottom.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag2,true);
document.removeEventListener("mouseup",stopDrag2,true);
}
};
//往左右同时拽
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv.offsetLeft;
divStart.y=oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDrag;
oDiv.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='block';
};
function doDrag(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
var w=l+oDiv.offsetWidth;
var h=t+oDiv.offsetHeight;
if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}
oDiv2.style.width=w+"px";
oDiv2.style.height=h+"px";
};
function stopDrag()
{
if(oDiv.releaseCapture)
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='none';
};
//h2完美拖拽
h2.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv2.offsetLeft;
divStart.y=oDiv2.offsetTop;
if(h2.setCapture)
{
h2.onmousemove=doDrag3;
h2.onmouseup=stopDrag3;
h2.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag3,true);
document.addEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='block';
};
function doDrag3(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv2.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l+"px";
oDiv2.style.top=t+"px";
};
function stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}
zhezhao.style.display='none';
}
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%; height:100%; overflow:hidden;">
<h2>完美的拖拽</h2>
<p>体验不错的JavaScript网页拖动,除了拖动,还可拖动放大,像Windows窗口一样被放大或缩小,只要按住层的右下角,就可以收放自如的放大或缩小。想使用的朋友,可将代码里的Js封装成类,从外部引入想必更合理些。'</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html>
左右框架隐藏显示/打开/关闭的JS代码
例子四、左右框架隐藏显示
<HTML>
<HEAD>
<TITLE>框架显示/隐藏</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.navPoint {
COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt
}
</style>
<SCRIPT>
function switchSysBar(){
if (switchPoint.innerText==3){
switchPoint.innerText=4
document.all("frmTitle").style.display="none"
}
else{
switchPoint.innerText=3
document.all("frmTitle").style.display=""
}
}
</SCRIPT>
</HEAD>
<BODY bgColor=skyblue scroll=no style="MARGIN: 0px">
<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" width="100%">
<TBODY>
<TR>
<TD bgColor=#eeeeee align=middle id=frmTitle noWrap vAlign=center name="fmTitle"><IFRAME
frameBorder=0 id=left name=left src="about:blank"
style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 145px; Z-INDEX: 2"></IFRAME>
<TD style="WIDTH: 10pt"> <TABLE border=0 cellPadding=0 cellSpacing=0 height="100%">
<TBODY>
<TR>
<TD onclick=switchSysBar() style="HEIGHT: 100%"><SPAN class=navPoint
id=switchPoint title=关闭/打开左栏>3</SPAN></TD>
</TR>
</TBODY>
</TABLE></TD>
<TD style="WIDTH: 100%"><IFRAME frameBorder=0 id=frmright name=frmright
scrolling=no src="/" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"> </IFRAME></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>