悬浮在页面左侧的鼠标感应图层隐藏效果

2个月前 (03-19 11:28)阅读41回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

加入网摘或分享js特效代码,也可以挂个客服在那,这个分享窗口始终悬浮在页面左侧跟随页面滚动显示,用户鼠标经过弹出移开后隐藏起来。

<!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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种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/20240319_www_wuming_ren_1.png) no-repeat
}
* HTML .main_head {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240319_www_wuming_ren_1.png",sizingMethod='crop'); BACKGROUND: none transparent scroll repeat 0% 0%
}
* + HTML .main_head {
BACKGROUND: url(/img/20240319_www_wuming_ren_1.png) no-repeat
}
.info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/20240319_www_wuming_ren_2.png) repeat-y; PADDING-TOP: 5px
}
* HTML .info {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240319_www_wuming_ren_2.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y
}
* + HTML .info {
PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/img/20240319_www_wuming_ren_2.png) repeat-y; PADDING-TOP: 5px
}
.down_kefu {
WIDTH: 157px; BACKGROUND: url(/img/20240319_www_wuming_ren_3.png) no-repeat; HEIGHT: 8px
}
* HTML .down_kefu {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240319_www_wuming_ren_3.png",sizingMethod='crop'); WIDTH: 157px; BACKGROUND-REPEAT: repeat-y; HEIGHT: 8px
}
* + HTML .down_kefu {
WIDTH: 157px; BACKGROUND: url(/img/20240319_www_wuming_ren_3.png) no-repeat; HEIGHT: 8px
}
.Obtn {
MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(/img/20240319_www_wuming_ren_4.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px
}
* HTML .Obtn {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/20240319_www_wuming_ren_4.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/20240319_www_wuming_ren_4.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="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<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/20240319_www_wuming_ren_5.png" alt="添加到收藏夹" border="0" height="16" width="16">添加收藏夹</a><br><a title="点击复制本贴地址" style="cursor:hand" onclick="copyToClipBoard()"><img src="/img/20240319_www_wuming_ren_6.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推荐给你的好友");
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</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/20240319_www_wuming_ren_7.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/20240319_www_wuming_ren_8.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/20240319_www_wuming_ren_9.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/20240319_www_wuming_ren_10.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/20240319_www_wuming_ren_11.gif" width="90" height="25"></a></td>
        </tr>
        <tr>
          <td align="middle">
            <div class="qun"><font color="#9b9b9b">武鸣人</font><br><span>wuming.ren</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()
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
if(parseInt(o.style.left)<maxWidth)
{
i = parseInt(o.style.left);
i += numInter;
o.style.left=i+"px";
if(i==maxWidth)
clearInterval(BigInter);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
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()
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
clearInterval(SmallInter);
clearInterval(BigInter);
SmallInter = setInterval(Small,InterTime);
}
</script>
</body>
</html>


0
0
收藏0
回帖

悬浮在页面左侧的鼠标感应图层隐藏效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息