javascript 悬浮在页面左侧的可显隐网摘收藏效果

作者：简简单单 2010-03-02

提示：您可以先修改部分代码再运行

javascript 悬浮在页面左侧的可显隐网摘收藏效果
<!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>javascript 悬浮在页面左侧的可显隐网摘收藏效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
BODY {
	MARGIN: 0px
}
A {
	COLOR: #333333; FONT-SIZE: 12px; TEXT-DECORATION: none
}
A:hover {
	COLOR: #FF0000; FONT-SIZE: 12px; TEXT-DECORATION: none
}
.main_head {
	BACKGROUND: url(https://img.111com.net/get_pic/20100302011946360.png) no-repeat
}
* HTML .main_head {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.111com.net/get_pic/20100302011946360.png",sizingMethod='crop'); BACKGROUND: none transparent scroll repeat 0% 0%
}
* + HTML .main_head {
	BACKGROUND: url(https://img.111com.net/get_pic/20100302011946360.png) no-repeat
}
.info {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(https://img.111com.net/get_pic/20100302011952802.png) repeat-y; PADDING-TOP: 5px
}
* HTML .info {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.111com.net/get_pic/20100302011952802.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y
}
* + HTML .info {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(https://img.111com.net/get_pic/20100302011952802.png) repeat-y; PADDING-TOP: 5px
}
.down_kefu {
	 BACKGROUND: url(https://img.111com.net/get_pic/2010030201195937.png) no-repeat; }
* HTML .down_kefu {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.111com.net/get_pic/2010030201195937.png",sizingMethod='crop');  BACKGROUND-REPEAT: repeat-y; }
* + HTML .down_kefu {
	 BACKGROUND: url(https://img.111com.net/get_pic/2010030201195937.png) no-repeat; }
.Obtn {
	MARGIN-TOP: 104px;  BACKGROUND: url(https://img.111com.net/get_pic/20100302012005843.png) no-repeat; FLOAT: left;  MARGIN-LEFT: -5px
}
* HTML .Obtn {
	FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://img.111com.net/get_pic/20100302012005843.png",sizingMethod='crop');  BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; }
* + HTML .Obtn {
	MARGIN-TOP: 104px;  BACKGROUND: url(https://img.111com.net/get_pic/20100302012005843.png) no-repeat; FLOAT: left;  MARGIN-LEFT: -5px
}
.qqtable span {
	PADDING-BOTTOM: 5px; LINE- PADDING-LEFT: 0px;  PADDING-RIGHT: 0px; COLOR: #ff6600; font-SIZE: 13px; font-WEIGHT: bold; PADDING-TOP: 5px
}
.qqtable A {
	TEXT-DECORATION: none
}
.qqtable A:hover {
	TEXT-DECORATION: none
}
.qun {
	BORDER-BOTTOM: #098A27 1px solid; BORDER-LEFT: #098A27 1px solid; PADDING-BOTTOM: 5px; LINE- BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px;  PADDING-RIGHT: 0px; font-SIZE: 12px; BORDER-TOP: #098A27 1px solid; BORDER-RIGHT: #098A27 1px solid; PADDING-TOP: 5px
}
.qun span {
	COLOR: #000000; FONT-SIZE: 13px; FONT-WEIGHT: bold
}
</style>
</head>
<body>

<div id="xixi" onmouseover="toBig()" onmouseout="toSmall()">
<table style="FLOAT: left" border="0" cellSpacing="0" cellPadding="0" width="157">
  <tr>
    <td class="main_head" height="39" vAlign="top"></td></tr>
  <tr>
    <td class="info" vAlign="top">
      <table class="qqtable" border="0" cellSpacing="0" cellPadding="0" width="120" align="center">
        <tr>
          <td align="middle"><a title="点击添加到收藏夹" href="javascript:window.external.AddFavorite(document.location.href,document.title)"><img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012012184.png" alt="添加到收藏夹" border="0" height="16" width="16">添加收藏夹</a><br><a title="点击复制本贴地址" style="cursor:hand" onclick="copyToClipBoard()"><img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012020389.png" alt="点击复制本站给好友" border="0" height="16" width="16">复制给好友</a>
<script language="javascript">
function copyToClipBoard()
{
	var clipBoardContent=this.document.title;
	clipBoardContent+=this.location.href;
	window.clipboardData.setData("Text",clipBoardContent);
	alert("复制成功，请通过QQ/MSN推荐给你的好友");
}
</script>
          </td>
        </tr>
        <tr>
          <td height="5"></td>
        </tr>
        <tr>
          <td height="30" align="middle"><span><a href="javascript:u=location.href;t=document.title;c=%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text);var url=%22http://cang.baidu.com/do/add?it=%22+encodeURIComponent(t)+%22&iu=%22+encodeURIComponent(u)+%22&dc=%22+encodeURIComponent(c)+%22&fr=ien#nw=1%22;window.open(url,%22_blank%22,%22scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes%22);void 0" title="分享到百度Baidu搜藏"><img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012026453.gif" alt="分享到百度Baidu搜藏" border="0" height="16" width="16">分享到百度</span></a></td>
        </tr>
        <tr>
          <td height="30" align="middle"><span><a title="分享到QQ书签" style="font-size:14px;" href="javascript:window.open('http://shuqian.qq.com/post?title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=960,height=600,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)"><img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012032542.png" alt="分享到QQ书签" border="0" height="16" width="16">分享QQ书签</a></span></td>
        </tr>
        <tr>
        <tr>
          <td height="30" align="middle"><span><a href="javascript:window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');void(0)" title="分享到新浪微博"><img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012039341.gif" alt="分享到新浪微博" border="0" height="16" width="16">分享新浪微博</a></span></td>
        </tr>
        <tr>
          <td height="30" align="middle"><span><a title="转贴到校内人人网" href="javascript:void((function(s,d,e){if(/renren.com/.test(d.location))return;var%20f='http://share.renren.com/share/buttonshare.do?link=',u=d.location,l=d.title,p=[e(u),'&title=',e(l)].join('');function%20a(){if(!window.open([f,p].join(''),'xnshare',['toolbar=0,status=0,resizable=1,width=626,height=436,left=',(s.width-626)/2,',top=',(s.height-436)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent));">
          <img  alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  src="https://img.111com.net/get_pic/20100302012045379.png" alt="分享到校内人人网" border="0" height="16" width="16">分享到校内网</a></span></td>
        </tr>
        <tr>
          <td height="5"></td></tr>
                <tr>
          <td height="38" vAlign="top" align="middle"><a href="#" target="_blank"><img alt="javascript 悬浮在页面左侧的可显隐网摘收藏效果"  border="0" src="https://img.111com.net/get_pic/20100302012051937.gif" width="90" height="25"></a></td>
        </tr>
        <tr>
          <td align="middle">
            <div class="qun"><font color="#9b9b9b">会员交流群</font><br><span>88888888</span></div></td>
        </tr>
        <tr>
          <td align="middle"></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td class="down_kefu" vAlign="top"></td>
  </tr>
</table>
<div class="Obtn"></div>
</div>
<script language="javascript">
客服=function (id,_top,_left){
	var me=id.charAt?document.getElementById(id):id, d1=document.body, d2=document.documentElement;
	d1.style.100%';me.style.top=_top?_top+'px':0;me.style.left=_left+"px";//[(_left>0?'left':'left')]=_left?Math.abs(_left)+'px':0;
	me.style.position='absolute';
	setInterval(function (){
		me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px';
	},10+parseInt(Math.random()*20));
	return arguments.callee;
};
window.onload=function (){
	客服
	('xixi',100,-152)
}
</script>
<script language="javascript"> 
lastScrollY=0; 
var InterTime = 1;
var maxWidth=-1;
var minWidth=-152;
var numInter = 8;
var BigInter ;
var SmallInter ;
var o =  document.getElementById("xixi");
var i = parseInt(o.style.left);
function Big()
{
	if(parseInt(o.style.left)<maxWidth)
	{
		i = parseInt(o.style.left);
		i += numInter;	
		o.style.left=i+"px";	
		if(i==maxWidth)
		clearInterval(BigInter);
	}
}
function toBig()
{
	clearInterval(SmallInter);
	clearInterval(BigInter);
	BigInter = setInterval(Big,InterTime);
}
function Small()
{
	if(parseInt(o.style.left)>minWidth)
	{
		i = parseInt(o.style.left);
		i -= numInter;
		o.style.left=i+"px";
		if(i==minWidth)
		clearInterval(SmallInter);
	}
}
function toSmall()
{
	clearInterval(SmallInter);
	clearInterval(BigInter);
	SmallInter = setInterval(Small,InterTime);
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

javascript 悬浮在页面左侧的可显隐网摘收藏效果

相关文章

精彩推荐