js implémente le code publicitaire dans le coin inférieur droit avec un effet tampon qui défile avec les compétences screen

js implémente le code publicitaire dans le coin inférieur droit avec un effet tampon qui défile avec les compétences screen_javascript

WBOY

Libérer： 2016-05-16 15:40:55

original

1021 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation js du code publicitaire dans le coin inférieur droit avec effet buffer qui défile avec l'écran. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Un code publicitaire dans le coin inférieur droit qui défile automatiquement avec l'écran. Veuillez faire attention à quelques paramètres ici :

id L'identifiant du contenu que vous souhaitez faire défiler
Doit-on placer r à gauche ou à droite ? La valeur par défaut est à droite
t La position que vous souhaitez placer sur la page est par défaut sur le bord inférieur, 0 est sur le bord supérieur
f 1 signifie fixe, non écrit ou 0 signifie défilement (ie6 fixe n'est pas valide)
Est-ce très pratique ? Cette version a été révisée deux fois par l'auteur et présente une bonne compatibilité.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-right-buttom-float-follow-scroll-adv-codes/

Le code spécifique est le suivant :

<!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=gbk" />
<title>随屏幕滚动的带缓冲效果的右下角广告</title>
<style>
 html,body{
  height:2000px;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >拖动滚动条试试哦~</div>
</body>
</html>
<script>
 function scroll(p){
  var d = document,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent);
  if(o){
   o.style.cssText +=";position:"+(p.f&&!ie6&#63;'fixed':'absolute')+";"+(p.r&#63;'left':"right")+":0;"+(p.t!=undefined&#63;'top:'+p.t+'px':'bottom:0');
   if(!p.f||ie6){
    -function(){
    var t = 500,st = d.documentElement.scrollTop||d.body.scrollTop,c;
   c = st - o.offsetTop + (p.t!=undefined&#63;p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);//如果你是html 4.01请改成d.body,这里不处理以减少代码
    c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0&#63;-1:1) + 'px',t=10);
    setTimeout(arguments.callee,t)
   }() 
   }
  }
 }
 scroll({
  id:'aa'
 })
</script>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.