JavaScript浮动对象+伸缩功能效果代码介绍
不久前写过一篇文章介绍一个效果不错浮动对象类库，具体阅读效果不错的浮动div，今天又做了一个效果，增加对象的伸缩功能，让需要的人点开来查看对象的信息，而不需要占用过多的控件，这对非宽屏显示器用户来说用户体验比较好点，不至于让浮动对象遮盖住内容。
需要注意的是，使用浮动对象类库时，只能将浮动对象浮动在最左边，绑定浮动对象时只能使用
伸缩类库暂时只支持绑定一个对象，而不同浮动类库，可以使用bind方法绑定多个多项，使其浮动。
测试代码如下，效果看本站的所有页面“在线咨询”浮动或者点击这里。完整代码下载点击这里
原创文章，转载请注明出处：JavaScript浮动对象+伸缩功能效果代码介绍
需要注意的是，使用浮动对象类库时，只能将浮动对象浮动在最左边，绑定浮动对象时只能使用
+展开
-JavaScript
floatDiv.bind('浮动对象ID'
,-1//此参数不能变动
,null//因为startX为-1，所以此参数随便，不会起作用
,100//可修改，垂直距离位置
,1//可修改，参数意义参考下面的类库说明
);
,-1//此参数不能变动
,null//因为startX为-1，所以此参数随便，不会起作用
,100//可修改，垂直距离位置
,1//可修改，参数意义参考下面的类库说明
);
伸缩类库暂时只支持绑定一个对象，而不同浮动类库，可以使用bind方法绑定多个多项，使其浮动。
测试代码如下，效果看本站的所有页面“在线咨询”浮动或者点击这里。完整代码下载点击这里
+展开
-HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{margin:0px;}
#ulService{list-style:none;padding:0px;margin:0px;height:150px;font-size:16px;}
#ulService li{float:left;background:url(images/qbg.gif) repeat-x;height:100%;text-align:center;}
#ulService li.lf{background:url(images/qb.gif) no-repeat;width:35px;}
#ulService li.rt{background:url(images/qt.gif) no-repeat;width:40px;font-weight:bold;padding-top:8px;cursor:pointer;}
#ulService li div{margin:20px auto;padding-top:20px;width:25px;float:left;}
#ulService li div.qq{background:url(images/qq.gif) no-repeat center top;}
#ulService li div.email{background:url(images/email.gif) no-repeat center top;}
#ulService li div.msn{background:url(images/msn.gif) no-repeat center top;}
#ulService li div.intro{color:white;background:#d29b5a;font-size:14px;width:120px;line-height:20px;height:119px;word-break:break-
all;padding:5px;color:white;margin:8px 0px 0px 10px;text-align:left;}
</style>
</head>
<body>
<ul id="ulService">
<li class="lf"></li>
<li><div class="email"><a href="mailto:shaobo@chinabn.org">电子邮件</a></div></li>
<li><div class="msn"><a href="msnim:chat?contact=showtime_bo@hotmail.com">M<br >S<br >N</a></div></li>
<li><div class="qq"><a target='blank' href='http://wpa.qq.com/msgrd?V=1&Uin=155132206&Site=在线咨询&Menu=no' title='在线即时交谈/留言'>技术人员</a></div></li>
<li><div class="qq"><a target='blank' href='http://wpa.qq.com/msgrd?V=1&Uin=275252338&Site=在线咨询&Menu=no' title='在线即时交谈/留言'>设计人员</a></div></li>
<li><div class="intro">承接各类平面设计，网页设计，<br >Asp.Net(C#)，Asp，JavaScript，Ajax系统修改，请注明来意。</div></li>
<li class="rt" title="点击展开/收缩在线咨询">在<br>线<br>咨<br>询</li>
</ul>
<div style="width:100%;height:2000px;background:#eee"></div>
<script type="text/javascript">
var floatDiv={//浮动div类库
isScrict:document.compatMode=='CSS1Compat'//判断渲染模式
,floatDivs:[]//存储浮动对象的数组
,timer:null//计时器
,wrapperObject:function(el){
if(!el.move){
el.move=function(){this.style.top=this.y+'px';}
el.style.position='absolute';
}
var startX=parseInt(el.getAttribute('startX'),10),horizontalPos=parseFloat(el.getAttribute('horizontalPos'),10)
,verticalPos=parseFloat(el.getAttribute('verticalPos'),10),startY=parseInt(el.getAttribute(verticalPos?'ostartY':'startY'),10)
,clientWidth=this.isScrict?document.documentElement.clientWidth:document.body.clientWidth
,clientHeight=this.isScrict?document.documentElement.clientHeight:document.body.clientHeight
,scrollTop=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop;
if(startX==0||startX==-1)el.style.left=(startX==-1?0:(startX==0?clientWidth-el.offsetWidth:startX))+'px';
else el.style.left=(horizontalPos==-1?startX:clientWidth-startX)+'px';
if(verticalPos){
startY=clientHeight-startY-el.offsetHeight;
el.setAttribute('startY',startY);
}
el.y=startY+scrollTop;
return el;
}
,holdPosition:function(){
var el,i,y=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop,startY;
for(i=0;i<this.floatDivs.length;i++){
el=this.floatDivs[i];
startY=parseInt(el.getAttribute('startY'),10);
el.y+=(y+startY-el.y)/8;
el.move();
}
}//===================================这里需要注意，由于增加收缩部分，所以窗体大小改变时不能修改浮动div位置
/* ,onResize:function(){
clearInterval(this.timer);
for(var i=0;i<this.floatDivs.length;i++)this.wrapperObject(this.floatDivs[i]);//窗体大小变化时更新水平位置
var me=this;
this.timer=setInterval(function(){me.holdPosition();},10);
}*/
//dvID：浮动div的Id
//startX：浮动div距离页面水平位置，传递-1则为最左边，传递0则最右边
//horizontalPos：指示水平距离【startX为非0，-1时】，01为距离左边，0为距离右边
//startY：浮动div距离页面垂直位置
//verticalPos：指示垂直位置startY是从页面顶部到div顶部【0】 或者 是从页面底部到div底部的距离【1】
,bind:function(dvID,startX,horizontalPos,startY,verticalPos){
var el=document.getElementById(dvID);
if(!el)throw "要绑定的浮动对象不存在！";
el.setAttribute('startX',startX);el.setAttribute('horizontalPos',horizontalPos);
el.setAttribute('startY',startY);el.setAttribute('verticalPos',verticalPos);
if(verticalPos==1)el.setAttribute('ostartY',startY);
this.floatDivs.push(this.wrapperObject(el));
if(this.timer==null){
var me=this;
this.timer=setInterval(function(){me.holdPosition();},10);
//同上面说的一样，不再添加窗体更改事件
/*if(window.addEventListener)window.addEventListener('resize',function(){me.onResize();},false);
else if(window.attachEvent)window.attachEvent('onresize',function(){me.onResize();});*/
}
}
}
var expand={//伸缩功能类库
ul:null
,ulLeft:0
,headWidth:35//浮动div露出页面的部分长度，可以在init方法中传递cfg参数修改
,timer:false//伸缩效果计时器
,step:10//计时器被触发时每次伸缩的距离，单位px，可通过init方法传递进入修改此参数
,init:function(id,cfg){//Id：要添加效果的对象，cfg：配置参数，可以产地headWidth及step
this.ul=document.getElementById(id);
if(cfg){
if(cfg.headWidth)this.headWidth=headWidth;
if(cfg.step)this.step=cfg.step;
}
this.ulLeft=this.headWidth-this.ul.offsetWidth;
this.ul.style.left=this.ulLeft+'px';
var lis=this.ul.getElementsByTagName('li'),
me=this;
lis[lis.length-1].onclick=function(){if(!me.timer){me.step=(parseInt(me.ul.style.left)<0?1:-1)*Math.abs(me.step);me.expand();}};
}
,expand:function(){
var me=this;if(!this.timer)this.timer=setInterval(function(){me.expand();},10);
var left=parseInt(this.ul.style.left)+this.step;
if((this.step<0&&left<=this.ulLeft)||(this.step>0&&left>=0)){clearInterval(this.timer);this.timer=null;left=this.step>0?0:this.ulLeft;}
this.ul.style.left=left+'px';}
}
floatDiv.bind('ulService',-1,null,100,1);//使对象浮动
expand.init('ulService');//增加浮动对象伸缩功能
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body{margin:0px;}
#ulService{list-style:none;padding:0px;margin:0px;height:150px;font-size:16px;}
#ulService li{float:left;background:url(images/qbg.gif) repeat-x;height:100%;text-align:center;}
#ulService li.lf{background:url(images/qb.gif) no-repeat;width:35px;}
#ulService li.rt{background:url(images/qt.gif) no-repeat;width:40px;font-weight:bold;padding-top:8px;cursor:pointer;}
#ulService li div{margin:20px auto;padding-top:20px;width:25px;float:left;}
#ulService li div.qq{background:url(images/qq.gif) no-repeat center top;}
#ulService li div.email{background:url(images/email.gif) no-repeat center top;}
#ulService li div.msn{background:url(images/msn.gif) no-repeat center top;}
#ulService li div.intro{color:white;background:#d29b5a;font-size:14px;width:120px;line-height:20px;height:119px;word-break:break-
all;padding:5px;color:white;margin:8px 0px 0px 10px;text-align:left;}
</style>
</head>
<body>
<ul id="ulService">
<li class="lf"></li>
<li><div class="email"><a href="mailto:shaobo@chinabn.org">电子邮件</a></div></li>
<li><div class="msn"><a href="msnim:chat?contact=showtime_bo@hotmail.com">M<br >S<br >N</a></div></li>
<li><div class="qq"><a target='blank' href='http://wpa.qq.com/msgrd?V=1&Uin=155132206&Site=在线咨询&Menu=no' title='在线即时交谈/留言'>技术人员</a></div></li>
<li><div class="qq"><a target='blank' href='http://wpa.qq.com/msgrd?V=1&Uin=275252338&Site=在线咨询&Menu=no' title='在线即时交谈/留言'>设计人员</a></div></li>
<li><div class="intro">承接各类平面设计，网页设计，<br >Asp.Net(C#)，Asp，JavaScript，Ajax系统修改，请注明来意。</div></li>
<li class="rt" title="点击展开/收缩在线咨询">在<br>线<br>咨<br>询</li>
</ul>
<div style="width:100%;height:2000px;background:#eee"></div>
<script type="text/javascript">
var floatDiv={//浮动div类库
isScrict:document.compatMode=='CSS1Compat'//判断渲染模式
,floatDivs:[]//存储浮动对象的数组
,timer:null//计时器
,wrapperObject:function(el){
if(!el.move){
el.move=function(){this.style.top=this.y+'px';}
el.style.position='absolute';
}
var startX=parseInt(el.getAttribute('startX'),10),horizontalPos=parseFloat(el.getAttribute('horizontalPos'),10)
,verticalPos=parseFloat(el.getAttribute('verticalPos'),10),startY=parseInt(el.getAttribute(verticalPos?'ostartY':'startY'),10)
,clientWidth=this.isScrict?document.documentElement.clientWidth:document.body.clientWidth
,clientHeight=this.isScrict?document.documentElement.clientHeight:document.body.clientHeight
,scrollTop=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop;
if(startX==0||startX==-1)el.style.left=(startX==-1?0:(startX==0?clientWidth-el.offsetWidth:startX))+'px';
else el.style.left=(horizontalPos==-1?startX:clientWidth-startX)+'px';
if(verticalPos){
startY=clientHeight-startY-el.offsetHeight;
el.setAttribute('startY',startY);
}
el.y=startY+scrollTop;
return el;
}
,holdPosition:function(){
var el,i,y=this.isScrict?document.documentElement.scrollTop:document.body.scrollTop,startY;
for(i=0;i<this.floatDivs.length;i++){
el=this.floatDivs[i];
startY=parseInt(el.getAttribute('startY'),10);
el.y+=(y+startY-el.y)/8;
el.move();
}
}//===================================这里需要注意，由于增加收缩部分，所以窗体大小改变时不能修改浮动div位置
/* ,onResize:function(){
clearInterval(this.timer);
for(var i=0;i<this.floatDivs.length;i++)this.wrapperObject(this.floatDivs[i]);//窗体大小变化时更新水平位置
var me=this;
this.timer=setInterval(function(){me.holdPosition();},10);
}*/
//dvID：浮动div的Id
//startX：浮动div距离页面水平位置，传递-1则为最左边，传递0则最右边
//horizontalPos：指示水平距离【startX为非0，-1时】，01为距离左边，0为距离右边
//startY：浮动div距离页面垂直位置
//verticalPos：指示垂直位置startY是从页面顶部到div顶部【0】 或者 是从页面底部到div底部的距离【1】
,bind:function(dvID,startX,horizontalPos,startY,verticalPos){
var el=document.getElementById(dvID);
if(!el)throw "要绑定的浮动对象不存在！";
el.setAttribute('startX',startX);el.setAttribute('horizontalPos',horizontalPos);
el.setAttribute('startY',startY);el.setAttribute('verticalPos',verticalPos);
if(verticalPos==1)el.setAttribute('ostartY',startY);
this.floatDivs.push(this.wrapperObject(el));
if(this.timer==null){
var me=this;
this.timer=setInterval(function(){me.holdPosition();},10);
//同上面说的一样，不再添加窗体更改事件
/*if(window.addEventListener)window.addEventListener('resize',function(){me.onResize();},false);
else if(window.attachEvent)window.attachEvent('onresize',function(){me.onResize();});*/
}
}
}
var expand={//伸缩功能类库
ul:null
,ulLeft:0
,headWidth:35//浮动div露出页面的部分长度，可以在init方法中传递cfg参数修改
,timer:false//伸缩效果计时器
,step:10//计时器被触发时每次伸缩的距离，单位px，可通过init方法传递进入修改此参数
,init:function(id,cfg){//Id：要添加效果的对象，cfg：配置参数，可以产地headWidth及step
this.ul=document.getElementById(id);
if(cfg){
if(cfg.headWidth)this.headWidth=headWidth;
if(cfg.step)this.step=cfg.step;
}
this.ulLeft=this.headWidth-this.ul.offsetWidth;
this.ul.style.left=this.ulLeft+'px';
var lis=this.ul.getElementsByTagName('li'),
me=this;
lis[lis.length-1].onclick=function(){if(!me.timer){me.step=(parseInt(me.ul.style.left)<0?1:-1)*Math.abs(me.step);me.expand();}};
}
,expand:function(){
var me=this;if(!this.timer)this.timer=setInterval(function(){me.expand();},10);
var left=parseInt(this.ul.style.left)+this.step;
if((this.step<0&&left<=this.ulLeft)||(this.step>0&&left>=0)){clearInterval(this.timer);this.timer=null;left=this.step>0?0:this.ulLeft;}
this.ul.style.left=left+'px';}
}
floatDiv.bind('ulService',-1,null,100,1);//使对象浮动
expand.init('ulService');//增加浮动对象伸缩功能
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：JavaScript浮动对象+伸缩功能效果代码介绍