div 在页面上漂浮

<div id="codefans_net" style="position:absolute;z-index:5;">
        <a><img src="/template/[field:css_color]/images/float.jpg" border="0"></a><--漂浮图片-->
        <br/>
        <a target="_blank" style="cursor:pointer; position:absolute; right:10px; bottom:0px;" οnclick="javascript:turnoff('codefans_net')"><font color="#FFFFFF">点击关闭<font/></a>
    </div>
    <script>
 function turnoff(obj){
  document.getElementById(obj).style.display="none";
 }
 </script>
 <script>
 var x = 50,y = 60
 var xin = true, yin = true
 var step = 1
 var delay = 10
 var obj=document.getElementById("codefans_net")
 function floatpiao() {
 var L=T=0
 var R= document.documentElement.clientWidth-obj.offsetWidth
 var B = document.documentElement.clientHeight-obj.offsetHeight
 obj.style.left = x + document.documentElement.scrollLeft + 'px';
 obj.style.top = y + document.documentElement.scrollTop + 'px';
 x = x + step*(xin?1:-1)
 if (x < L) { xin = true; x = L}
 if (x > R){ xin = false; x = R}
 y = y + step*(yin?1:-1)
 if (y < T) { yin = true; y = T }
 if (y > B) { yin = false; y = B }
 }
 var itl= setInterval("floatpiao()", delay)
 obj.οnmοuseοver=function(){clearInterval(itl)}
 obj.οnmοuseοut=function(){itl=setInterval("floatpiao()", delay)}
 </script>

转载于:https://www.cnblogs.com/lff255356/p/3973190.html

### 回答1: 当然可以! 以下是一个简单的HTML代码,它会在网页中创建一个红色的div元素,并使用CSS让它漂浮页面中: ```html <!DOCTYPE html> <html> <head> <style> /* 使用CSS将div元素浮动在页面中 */ #floating-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: red; } </style> </head> <body> <div id="floating-div">我是一个漂浮div</div> </body> </html> ``` 可以根据需要修改div的样式。 ### 回答2: 当然可以帮你写一个漂浮页面内的div网页。 首先,你需要在HTML文件中创建一个div元素,可以通过给div元素设置固定的定位方式来实现漂浮效果。比如,你可以给该div元素设置position为fixed或absolute。 接下来,你可以设置该div元素的top和left属性,以确定它在页面上的位置。通过修改这些属性的值,你可以将div元素定位在任何你想要的位置上。 然后,你可以为该div元素设置一些CSS样式,比如背景颜色、边框样式、宽度和高度等等。这些样式可以根据你的需求来自定义。 如果你希望该div元素具有一些动画效果,比如悬停时改变背景颜色或透明度变化等等,你可以使用CSS的transition或animation属性来实现。 最后,在页面加载完成后,你可以使用JavaScript来操作该div元素。比如,你可以通过添加事件监听器来实现在特定条件下显示或隐藏该div元素。 以上是一个简单的步骤,希望能帮到你!当然,具体的实现还需要根据你的具体需求来调整。 ### 回答3: 当然可以!要在页面中创建一个漂浮div元素,你可以使用CSS样式来实现。首先,你需要在HTML文件中添加一个div元素,并赋予它一个独特的标识符或类名。例如: ``` <div id="floating-div"></div> ``` 接下来,在你的CSS文件中,你可以使用绝对定位(position:absolute)和透明度(opacity)属性来控制该div元素的位置和显示效果。例如: ``` #floating-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ccc; opacity: 0.8; width: 200px; height: 200px; } ``` 在这个例子中,我们将div元素定位在页面的中心,然后通过改变透明度来实现半透明的效果。你可以根据需要自定义div元素的大小、颜色和其他样式属性。要使其漂浮起来,你可以通过使用JavaScript来实现动画效果。例如: ``` var div = document.getElementById("floating-div"); var position = 0; var interval = setInterval(function() { position += 1; div.style.top = position + "px"; if (position >= 100) { clearInterval(interval); } }, 10); ``` 这段JavaScript代码将在每10毫秒的时间间隔内,将div元素的top属性值增加1个像素,直到达到100像素为止。你可以根据需要调整移动速度和距离。当达到目标位置后,你可以使用clearInterval函数来停止动画。希望这个漂浮div元素满足你的需求!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值