Maison > Article > interface Web > Méthode JavaScript pour ajouter un formulaire défilant avec les compétences scroll bar_javascript

Méthode JavaScript pour ajouter un formulaire défilant avec les compétences scroll bar_javascript

WBOYoriginal: 2016-05-16 15:14:161152parcourir

L'exemple de cet article décrit comment ajouter un formulaire défilant avec une barre de défilement en JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Deux méthodes de mise en œuvre :

Premier type :

<script type=/"text/javascript/">
function scrollImg(){
 var posX,posY;
 if (window.innerHeight) {
 posX = window.pageXOffset;
 posY = window.pageYOffset;
 }
 else if (document.documentElement && document.documentElement.scrollTop) {
 posX = document.documentElement.scrollLeft;
 posY = document.documentElement.scrollTop;
 }
 else if (document.body) {
 posX = document.body.scrollLeft;
 posY = document.body.scrollTop;
 }
 var ad=document.getElementById(/"ad/");
ad.style.top=(posY+500)+/"px/";
// ad.style.left=(posX+500)+/"px/";
ad.style.left=/"90%/";
 setTimeout(/"scrollImg()/",100);
}
</script>
<div id=/"ad/" style=/"position:absolute;background:#606060;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center; left: 103px; top: 911px;/">此广告位招租</div>
<script type=/"text/javascript/">
scrollImg();
</script>

Deuxième type :

<html>
<head>
 <meta http-equiv=/"Content-Type/" content=/"text/html; charset=gb2312/">
 <title>Drag and Drop example</title>
 <script language=/"javascript/">
function picsize(obj,MaxWidth){
img=new Image();
img.src=obj.src;
if (img.width>MaxWidth)
{
 return MaxWidth;
}
else
{
 return img.width;
}
}
function CloseQQ()
{
divStayTopleft.style.display=/"none/";
return true; 
}
var online= new Array();
 </script>
</head>
<body>
 <div id=/"divStay/" style=/"position: absolute/">
 <table cellspacing=/"0/" cellpadding=/"0/" width=/"100%/" border=/"0/">
  <tbody>
  <tr>
   <td valign=/"top/" width=/"7%/">
   </td>
  </tr>
  </tbody>
 </table>
 </div>
 <div id=/"divStayTopleft/" style=/"position: absolute/">
 <table cellspacing=/"0/" cellpadding=/"0/" width=/"109/" border=/"0/">
  <tr>
  <td colspan=/"3/">
   <a onclick=/"CloseQQ()/" href=/"javascript:;/" shape=/"circle/" coords=/"91,16,12/">
   <img height=/"34/" src=/"images/qq_top.gif/" width=/"109/" usemap=/"#Map/"
    border=/"0/"></a></td>
  </tr>
  <tr>
  <td width=/"6/">
   <img height=/"100/" src=/"images/qq_life.gif/" width=/"6/"></td>
  <td valign=/"top/" width=/"96/" background=/"sto/qq_bg.gif/">
   <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" align=/"center/" border=/"0/">
   <tr>
    <td height=/"30/">
    <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" border=/"0/">
     <tr>
     <td>
      <img height=/"13/" src=/"images/qq_ico1.gif/" width=/"16/"><span
      class=/"font_12/"> <span style=/"font-size: 9pt/">客户服务</span></span></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table47/">
     <tr>
     <td width=/"15/" valign=/"top/" height=/"23/">
      <img border=/"0/" src=/"images/qq_v01.gif/" width=/"16/" height=/"16/"></td>
     <td valign=/"bottom/">
      <script>document.write(/"<a target=blank href=tencent://message/&#63;uin=178010108&Site=脚本之家&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa&#63;p=1:615050000:10 alt=[脚本之家]></a>/");</script>
     </td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    </td>
   </tr>
   <tr>
    <td>
    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table1/">
     <tr>
     <td width=/"15/" valign=/"top/" height=/"23/">
      <img border=/"0/" src=/"images/qq_n01.gif/" width=/"16/" height=/"16/"></td>
     <td valign=/"bottom/">
      <script>document.write(/"<a target=blank href=tencent://message/&#63;uin=251922268&Site=网页特效&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa&#63;p=1:43486831:10 alt=[QQQQQ]></a>/");</script>
     </td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    </td>
   </tr>
   </table>
  </td>
  <td width=/"7/">
   <img height=/"100/" src=/"images/qq_right.gif/" width=/"7/"></td>
  </tr>
  <tr>
  <td colspan=/"3/">
   <img height=/"30/" src=/"images/qq_bottom1.gif/" width=/"109/"></td>
  </tr>
  <tr>
  <td colspan=/"3/">
   <img height=/"33/" src=/"images/qq_logo.gif/" width=/"109/"></td>
  </tr>
 </table>
 </div>
 <script type=/"text/javascript/">
function FloatTop()
{
var startX1 =document.body.offsetWidth-125 ,startY1 = 5;
var startX2 =0,startY2 = 95;
var ns = (navigator.appName.indexOf(/"Netscape/") != -1);
var d = document;
function ml(id,startX,startY)
{
var el=d.getElementById&#63;d.getElementById(id):d.all&#63;d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns &#63; pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY1 - ftlObj.y)/8;
ftlObj1.y += (pY + startY2 - ftlObj1.y)/8;
ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-125, ftlObj.y);
ftlObj1.sP(ftlObj1.x, ftlObj1.y);
setTimeout(/"stayTopLeft()/", 30);
}
// ftlObj = ml(/"divStay/",document.body.scrollLeft+document.body.offsetWidth-125,0);
// ftlObj1 = ml(/"divStayTopLeft/",0,30);
ftlObj = ml(/"divStay/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,0);
ftlObj1 = ml(/"divStayTopLeft/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,30);
stayTopLeft();
}
FloatTop();
 </script>
</body>
</html>

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets et techniques spéciaux d'animation JavaScript ", "Résumé des erreurs JavaScript et des techniques de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé mathématique JavaScript de l'utilisation des opérations》

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery implémente le retour en haut function_jqueryArticle suivant：jQuery implémente le retour en haut function_jquery

Articles Liés

Voir plus