1.面向对象的拖拽----没有考虑IE，如果考虑IE，用setCamptrue 创建遮罩层即可；
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;position:absolute}
</style>
<script type="text/javascript">
var oDiv =null;
var disX=null;
var disY=null;
window.onload=function()
{
var obj = new startMove("div1")
}
function startMove(id)
{
var _this=this;
this.oDiv =document.getElementById(id);
this.disX=0;
this.disY=0;
this.oDiv.onmousedown=function(ev)
{
_this.fnDown(ev)
};
};
startMove.prototype.fnDown=function (ev)
{
var _this=this
var ev = ev || window.event
this.disX=ev.clientX-this.oDiv.offsetLeft;
this.disY=ev.clientY-this.oDiv.offsetTop;
document.onmousemove=function(ev)
{
_this.fnMove(ev)
}
document.onmouseup=function()
{
_this.fnUp()
}
return false//阻止火狐的bug
}
startMove.prototype.fnMove=function (ev)
{
var ev =ev || window.event;
this.oDiv.style.left=ev.clientX-this.disX+'px'
this.oDiv.style.top=ev.clientY-this.disY+'px'
}
startMove.prototype.fnUp=function ()
{
document.onmousemove=null;
document.onmouseup=null;
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
2.面向对象选项卡------有个bug问题，不知道怎么解决，求大牛解决办法！
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width:300px; height:200px;border:1px solid blue}
input{width:100px; height:20px;border:1px solid #333; float: left;}
#img{width:300px; height:180px;}
.active{background:red}
</style>
<script type="text/javascript">
var aInt=null;
var oImg=null
var iNum=0
var iTime=null;
window.onload=function()
{
var obj= new tab("input","img")
}
function tab(aInt,img)
{
var _this=this;
this.aInt =document.getElementsByTagName(aInt);
this.oImg=document.getElementsByTagName(img)[0];
this.iNum=0
for(var i=0;i<this.aInt.length;i++)
{
this.aInt[i].index=i;
this.aInt[i].onclick=function()
{
_this.oClick(this)
}
}
this.iTime=setInterval(function()
{
_this.oMove()
},500)
}
tab.prototype.oClick=function(abc)
{
var _this=abc
this.iNum=this.index
for(var i=0;i<this.aInt.length;i++)
{
this.aInt[i].className=""
}
_this.className="active"
this.oImg.src=_this.value+".jpg";
}
/*tab.prototype.startMove=function()
{
}*/
tab.prototype.oMove=function()
{
this.iNum++
if(this.iNum==this.aInt.length)
{
this.iNum=0
}
for(var i=0;i<this.aInt.length;i++)
{
this.aInt[i].className=""
}
this.aInt[this.iNum].className="active"
this.oImg.src=this.aInt[this.iNum].value+".jpg";
}
</script>
</head>
<body>
<div id="div1">
<input type="button"value='1' class='active'/>
<input type="button"value='2'/>
<input type="button"value='3'/>
<div id="img"><img src="1.jpg"/></div>
</div>
</body>
</html>
3.面向对象的无缝滚动，就写了一面，见谅！！！
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none}
#demo{width:800px; height:100px; border:1px solid blue;margin:0 auto;position:relative;overflow: hidden;}
#ul{position:absolute;top:0;left:0}
#ul li{float: left;}
</style>
<script type="text/javascript">
var oUl=null;
var aLi=null;
var iTime=null;
var iSpeed=null;
window.onload=function()
{
var obj=new startMove("ul","li")
}
function startMove(id,oClass)
{
var _this=this
this.oUl=document.getElementById(id);
this.aLi=this.oUl.getElementsByTagName(oClass)
this.oUl.innerHTML+=this.oUl.innerHTML;
this.oUl.style.width=this.aLi[0].offsetWidth*this.aLi.length+"px"
this.iSpeed = 4
this.iTime=setInterval(function()
{
_this.goMove()
},30)
}
startMove.prototype.goMove=function()
{
this.oUl.style.left=this.oUl.offsetLeft+(-this.iSpeed)+'px'
if(this.oUl.offsetLeft<-this.oUl.offsetWidth/2)
{
this.oUl.style.left=0
}
}
</script>
</head>
<body>
<div id="demo">
<ul id="ul">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
</div>
</body>
</html>
