求一个js让图片飘落效果

发布网友发布时间：2022-05-03 11:54

共4个回答

懂视网时间：2022-05-14 21:04

有时候我们在打开某些网站时，会立即飘出一个广告式的图片在你面前晃悠，当然对于站长来说这是为了让用户能够第一时间看到他们的广告或者重要信息等，对于用户来说，可选择性观看这些图片信息，自然是更重要的。那么今天这篇文章主要介绍关于网页漂浮代码（图片漂浮可选择性关闭）的具体演示。希望对感兴趣的朋友有所帮助。

js漂浮广告代码具体示例如下：

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

style样式代码如下：

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

以上代码测试如下截图：

以上文章主要介绍了js实现图片漂浮效果的方法,实例分析了js实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下,这样的特效能够起到着重强调的效果！

【相关文章推荐】

JavaScript实现漂浮广告代码的实例总结

js实现关闭悬浮框广告特效详解

推荐5款实用好看的网页悬浮二维码特效代码

JS实现图片居中悬浮效果实例分享

热心网友时间：2022-05-14 18:12

代码结构如下

请点击输入图片描述

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./js/EffectItem.js"></script>
<script type="text/javascript" src="./js/Effect.js"></script>
<script type="text/javascript">
new Effect({
effectUrl : './images/timg.jpg',
rotate : false,
direction : "up"
});
</script>
</body>
</html>

效果如下：

请点击输入图片描述

代码太多，放不完，你私信我，我发你

热心网友时间：2022-05-14 19:30

图像position设为absolute,varobj=document.getElementById("pflx");varxy=setInterval(xyz,30);obj.onmouseover=function(){clearInterval(xy);};obj.onmouseout=function(){xy};setInterval第一个参数时是函数

热心网友时间：2022-05-14 21:05

查看demo即可：

snow