Maison > Article > interface Web > Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)
Comment faire en sorte que les images semblent flotter librement sur une page Web ? (exemple de code js)
- 藏色散人original
- 2018-08-10 14:55:222806parcourir
Parfois, lorsque nous ouvrons certains sites Web, une image de style publicitaire flottera immédiatement devant vous. Bien sûr, pour les webmasters, cela permet aux utilisateurs de voir leurs publicités ou informations importantes le plus rapidement possible, etc. , il est naturellement plus important de pouvoir visualiser de manière sélective ces informations d'image. Ainsi, l'article d'aujourd'hui présente principalement la démonstration spécifique du code flottant de page Web (le flottement d'image peut être désactivé de manière sélective). J'espère que cela aidera ceux qui sont intéressés.
L'exemple spécifique de code d'annonce flottant js est le suivant :
<body>
<div id="img1" onmouseover="pause_resume()" onmouseout="pause_resume()">
<div><a href="javascript:void(0);" onclick="closediv()" title="点击关闭">关闭</a></div>
<a href=" " target="_blank"><img src="2.png" alt="可关闭的自由漂浮的图片广告特效代码"></a>
</div>
<p>网站漂浮代码测试</p>
<script type="text/javascript">
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var divid = img1; //浮动DIV的ID.
divid.style.top = yPos;
function changePos(){
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = divid.offsetHeight;
Woffset = divid.offsetWidth;
divid.style.left = xPos + document.body.scrollLeft;
divid.style.top = yPos + document.body.scrollTop;
if(yon){yPos = yPos + step;}else{yPos = yPos - step;}
if(yPos < 0){yon = 1;yPos = 0;}
if(yPos >= (height - Hoffset)){yon = 0; yPos = (height - Hoffset);}
if(xon){xPos = xPos + step;}else{xPos = xPos - step;}
if(xPos < 0){xon = 1;xPos = 0;}
if(xPos >= (width - Woffset)){xon = 0; xPos = (width - Woffset);}
}
function start(){
divid.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pause_resume(){
if(pause){
clearInterval(interval);
pause = false;}
else{
interval = setInterval('changePos()',delay);
pause = true;
}
}
function closediv(){
clearInterval(interval);
divid.style.display = "none";
}
start();
</script>
</body>le code de style est le suivant :
<style type="text/css">
#img1{width:59px;height:61px;position:absolute;top:43px;left:2px;z-index:10;}
#img1 div{width:80px;text-align:right;font-size:12px;}
#img1 div a:link{text-decoration:none;}
#img1 div a:hover{color:red;text-decoration:none;}
#img1 img{width:80px;height:80px;border:1px solid black;}
p{margin-top:50px;text-align:center;}
</style>Le Le test de code ci-dessus est la capture d'écran suivante :
L'article ci-dessus présente principalement la méthode de js pour obtenir un effet flottant d'image et analyse le techniques de js pour obtenir un effet flottant d'image avec des exemples, qui ont une certaine valeur, les amis dans le besoin peuvent s'y référer, de tels effets spéciaux peuvent avoir un effet d'accentuation !
[Articles connexes recommandés]
Résumé des exemples de JavaScript implémentant du code publicitaire flottant
5 pages Web recommandées, pratiques et esthétiques, codes QR flottants à effets spéciaux
Mise en œuvre JS de partage d'effet flottant au centre de l'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!