0顶

加入网摘悬浮左侧效果

稿源：互联网 2022-04-02 21:43:02 点击： 1333 撤稿纠错

加入网摘js特效代码，悬浮在页面左侧，带隐藏功能。

以下讨论的是和网摘悬浮相关的加入网摘悬浮左侧效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 悬浮在页面左侧的可显隐网摘收藏效果 站长特效网欢迎您</title>
<style type="text/css">
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(/img/img3-5_2.png) no-repeat
}
* HTML .main_head {
 FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/img3-5_2.png",sizingMethod='crop'); BACKGROUND: none transparent scroll repeat 0% 0%
}
* + HTML .main_head {
 BACKGROUND: url(/img/img3-5_2.png) no-repeat
}
.info {
 PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/img3-5_3.png) repeat-y; PADDING-TOP: 5px
}
* HTML .info {
 FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/img3-5_3.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y
}
* + HTML .info {
 PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/img3-5_3.png) repeat-y; PADDING-TOP: 5px
}
.down_kefu {
 WIDTH: 157px; BACKGROUND: url(/img/img3-5_4.png) no-repeat; HEIGHT: 8px
}
* HTML .down_kefu {
 FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/img3-5_4.png",sizingMethod='crop'); WIDTH: 157px; BACKGROUND-REPEAT: repeat-y; HEIGHT: 8px
}
* + HTML .down_kefu {
 WIDTH: 157px; BACKGROUND: url(/img/img3-5_4.png) no-repeat; HEIGHT: 8px
}
.Obtn {
 MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(/img/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
* HTML .Obtn {
 FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/img3-5_1.png",sizingMethod='crop'); WIDTH: 32px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; HEIGHT: 139px
}
* + HTML .Obtn {
 MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(/img/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
.qqtable span {
 PADDING-BOTTOM: 5px; LINE-HEIGHT: 20px; PADDING-LEFT: 0px; WIDTH: 100px; 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-HEIGHT: 20px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; WIDTH: 100px; 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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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 src="/img/cang.png" alt="添加到收藏夹" border="0" height="16" width="16">添加收藏夹</a><br><a title="点击复制本贴地址" style="cursor:hand" onclick="copyToClipBoard()"><img src="/img/copy.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推荐给你的好友");
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</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 src="/img/baidu.gif" alt="分享到百度Baidu搜藏" border="0" height="16" width="16">分享到百度</a></span></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 src="/img/qq.gif" 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 src="/img/sina.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 src="/img/renren.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 border="0" src="/img/img3-5-btn2.gif" width="90" height="25"></a></td>
        </tr>
        <tr>
          <td align="middle">
            <div class="qun"><font color="#9b9b9b">站长特效网</font><br><span>www.zzjs.net</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.height=d2.style.height='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()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 if(parseInt(o.style.left)<maxWidth)
 {
  i = parseInt(o.style.left);
  i += numInter;
  o.style.left=i+"px";
  if(i==maxWidth)
  clearInterval(BigInter);
 }
}//欢迎来到站长特效 网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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()
{//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 clearInterval(SmallInter);
 clearInterval(BigInter);
 SmallInter = setInterval(Small,InterTime);
}
</script>
</body>
</html>

关于加入网摘悬浮左侧效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564727.shtml方便下次再访问哦。

·上一篇： 兼容多种浏览器的返回顶部特效
·下一篇： 漂亮实用网页定制闹钟提醒功能

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

加入网摘悬浮左侧效果

文章分类LIST >>返回首页

最新游戏

最新新闻