js-Floating-Layer-Effekt-Implementierungscode auf der rechten Seite (folgen Sie dem Scrollen)

js-Floating-Layer-Effekt-Implementierungscode auf der rechten Seite (folgen Sie dem Scrollen)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:30:45

Original

1321 Leute haben es durchsucht

Implementierungscode 1,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>无标题文档</title>
 <!--***********开始*************-->

 <script type="text/javascript">
  //<![CDATA[ 
  var tips; var theTop = 200/*这是默认高度,越大越往下*/; var old = theTop;
  function initFloatTips() {
   tips = document.getElementById('floatTips');
   moveTips();
  };
  function moveTips() {
   var tt = 50;
   if (window.innerHeight) {
    pos = window.pageYOffset
   }
   else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop
   }
   else if (document.body) {
    pos = document.body.scrollTop;
   }
   pos = pos - tips.offsetTop + theTop;
   pos = tips.offsetTop + pos / 10;
   if (pos < theTop) pos = theTop;
   if (pos != old) {
    tips.style.top = pos + "px";
    tt = 10;
   }
   old = pos;
   setTimeout(moveTips, tt);
  }
  //!]]> 
 </script>

 <style type="text/css">
  .floatTips
  {
   position: absolute;
   border: solid 1px #777;
   padding: 3px;
   top: 250px;
   right: 5px;
   width: 30px;
   height: 300px;
   background: #cccccc;
   color: white;
  }
  .showDiv
  {
   position: absolute;
   border: solid 1px #777;
   padding: 3px;
   top: 250px;
   right: 5px;
   width: 300px;
   height: 300px;
   background: #cccccc;
   color: white;
  }
 </style>
 <script type="text/javascript">
  function FunOnmouseUp() {
   var objFloatTips = $("floatTips");
   var objActivityContext = $("activityContext");
   objFloatTips.className = "showDiv";
   objActivityContext.style.display = "";
  }
  function FunMouseOut() {
   var objFloatTips = $("floatTips");
   var objActivityContext = $("activityContext");
   objFloatTips.className = "floatTips";
   objActivityContext.style.display = "none";
  }

  function $(objID) {
   return document.getElementById(objID);
  }
 </script>

</head>
<body onload="initFloatTips()">
 <div id="floatTips" onmouseover="FunOnmouseUp()" onmouseout="FunMouseOut()" class="floatTips">
  最新的活动
  <div id="activityContext" style="display: none">
   显示最新的活动
  </div>
 </div>
 <!--**********结束***************-->
 <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7">
  <tr>
   <td height="2101">
   </td>
  </tr>
 </table>
</body>
</html>

Nach dem Login kopieren

Wenn ich Zeit habe, werde ich es ein wenig verschönern und Animationseffekte hinzufügen. Es sollte eine gute schwebende versteckte Ebene sein.

Methode 2,

1. Fügen Sie den folgenden Code in das -Tag ein:

 <div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid;">
   浮动层示例：<br />
        <a target="_blank" href="tencent://message/&#63;uin=101535223&Site=http://www.jb51.net&Menu=yes"><img border="0" src="http://wpa.qq.com/pa&#63;p=1:101535223:3" alt="有事您说话"></a>
 </div>

Nach dem Login kopieren

2. Fügen Sie den folgenden Code nach dem Tag ein und legen Sie die Werte der vier Variablen MarginLeft, MarginTop, Width und Heigth fest

<script language="javascript" type="text/javascript">
var MarginLeft = 30; //浮动层离浏览器右侧的距离
var MarginTop = 50;  //浮动层离浏览器顶部的距离
var Width = 120;  //浮动层宽度
var Heigth= 45;  //浮动层高度

//设置浮动层宽、高
function Set()
{
 document.getElementById("FloatDIV").style.width = Width;
 document.getElementById("FloatDIV").style.height = Heigth;
}

//实时设置浮动层的位置
function Move()
{
 document.getElementById("FloatDIV").style.top = document.documentElement.scrollTop + MarginTop;
 document.getElementById("FloatDIV").style.left = document.documentElement.clientWidth - Width - MarginLeft;
 setTimeout("Move();",100);
}

Set();
Move();
</script>

Nach dem Login kopieren