suchen

Heim >Web-Frontend >js-Tutorial >js-Floating-Layer-Effekt-Implementierungscode auf der rechten Seite (folgen Sie dem Scrollen)_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 15:30:451348Durchsuche

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>

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 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956-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>

2. Fügen Sie den folgenden Code nach dem Tag 36cc49f0c466276486e50c850b7e4956 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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Realisierung provinzieller und kommunaler Verknüpfungseffekte basierend auf jquery_jqueryNächster Artikel：Realisierung provinzieller und kommunaler Verknüpfungseffekte basierend auf jquery_jquery

In Verbindung stehende Artikel

Mehr sehen