网页飘浮广告

最新推荐文章于 2021-06-17 12:09:54 发布
最新推荐文章于 2021-06-17 12:09:54 发布
阅读量605 收藏 1
点赞数
分类专栏： html+css 功能实现 JavaScript 文章标签： 脚本 函数 编码 知识点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmlml/article/details/47363025
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动广告</title>
<style type="text/css">
body{
margin: 0; padding: 0;
}
.adv{
background: lightblue;
width: 100px;
line-height: 100px;
position: absolute;
color: white;
text-align: center;
                                border-radius: 100px;
}
</style>
</head>
<body>
            <div id="adv" class="adv" style="left:0px;top:0px;">
浮动广告
</div>
<script type="text/javascript">
//设置两个变量
var lrFloat=true;
var tbFloat=true;
function changeMove(){
//获取屏幕的宽高
var widths=document.documentElement.clientWidth-100;
var heights=document.documentElement.clientHeight-100;
//获取控制的盒子
var obj=document.getElementById("adv");
//获取对象的left和top值
var xwidth=parseInt(obj.style.left);
var ywidth=parseInt(obj.style.top);
//判断广告left值是否大于屏幕width
if(xwidth>=widths) lrFloat=false;
//如果大于屏幕宽度，则left值逐步变小
if(lrFloat==false) obj.style.left=xwidth-1+'px';
//判断广告left值是否小于等于0
if(xwidth<=0) lrFloat=true;
//如果left值小于等于0，就实现left值的逐步增加
if(lrFloat==true) obj.style.left=xwidth+1+'px';
//上下判定方式一样
if(ywidth>=heights) tbFloat=false;
if(tbFloat==false) obj.style.top=ywidth-1+'px';
if(ywidth<=0) tbFloat=true;
if(tbFloat==true) obj.style.top=ywidth+1+'px'; 
}
setInterval("changeMove()",10);
</script>
</body>
</html>
漫步先生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html固定广告位置,创建固定位置弹出浮动广告的实例代码
weixin_42197110的博客
06-07 1590
很久没有写JS程序了，这两天终于有空了，把之前的一个浮动广告代码重写了一下。呵呵，还是那句话，能力有限，如有错误敬请指证和指点。演示效果演示地址：http://www.yaohaixiao.com/演示的效果是弹出视频广告，不过我这个视频是一个JAVASCRIPT教程，所以没有设置自动关闭。好了，简单介绍一下广告代码的特点：1. 支持弹出图片、FLASH、FLV的视频广告 2. 页面加载完后5秒钟...
网页两侧飘浮广告代码
04-09
网页两侧飘浮广告代码是网页设计中常见的技术应用，它可以使广告在用户浏览页面时始终保持在屏幕的两侧，增加广告的曝光率。这种技术通常基于HTML、CSS和JavaScript实现，以确保广告元素能够随着用户滚动页面而保持...
漂浮广告
没有标题，只有问题
06-25 1766
     这段时间做的网站中要求使用一个飘来飘去的广告，其实就是一个层，这个层在网页中飘来荡去。个人不喜欢这种花哨的东西，但人家喜欢，没办法。同样，在网上搜了一个，试了一下，在IE、Opera、Firefox、Flock浏览器下都能正常运行。记录下来，以备以后使用。 漂浮广告 <!-- var floatImgUrl="http://profile
移动端悬浮广告代码
08-25
移动端悬浮广告代码，可加载到自己的网站上实现广告投放！
带关闭按钮的漂浮广告代码
02-02
带关闭按钮的漂浮广告代码，你只需将代码加入到网页的<body>和</body>之间即可
带关闭按钮的网页漂浮广告代码（全屏漂浮）
07-29
带关闭按钮的网页漂浮广告代码（全屏漂浮）
前端js——悬浮、漂浮广告模板、鼠标移入移出事件、定时器控制div运动
qq_41141657的博客
03-15 3409
1.布局 广告图，关闭按钮 &lt;div id="box"&gt; &lt;img src="../HTML/img/关闭.png" id="close" /&gt; &lt;/div&gt; 2.样式 广告大小，固定关闭按钮在广告的右上角 *{ margin: 0; padding: 0; } #box{ width: 300px; hei..
php 左侧飘浮广告代码,常用网页漂浮广告代码
weixin_42118056的博客
03-11 280
var x = 50,y = 60var xin = true, yin = truevar step = 1var delay = 10var obj=document.getElementById("www_qpsh_com")function floatwww_qpsh_com() {var L=T=0//by www.qpsh.comvar R= document.body.clientW...
html左侧浮动广告代码,网站侧边栏广告固定浮动效果的实现
weixin_29091105的博客
05-30 1234
对于页面内容很长的网站来说，经常会出现浏览内容的时候，侧栏已经空了，没内容了，这对于网站广告来说非常可以，如果侧栏空了之后能固定一个广告的话，那样对网站和用户双方的体验都不错，下面就说说具体实现的方法。先在网站加入jquery.js，一般网站都已经加过这个js，因此可以跳过，没有用的网站则需要在网站header部分加入jquery.js代码。之后，编辑侧栏模板，在侧栏最底部加入广告代码，代码如下：...
php 左侧飘浮广告代码,JS随机漂浮广告代码具体实例
weixin_42298727的博客
03-11 209
这篇文章主要介绍了JS随机漂浮广告代码具体实例，有需要的朋友可以参考一下 var xPos=0,yPos=0;//x,y轴坐标var xon=0;//图片在x轴移动方向var yon=0;//图片在y轴移动方向var step=1; //移动距离var img=document.getElementByIdx_x("float");//图片层function floatP(){...
飘浮广告的网页源代码
05-06
在网页设计中，飘浮广告（Floating Ad）是一种常见的在线广告形式，它可以在用户浏览页面时始终固定在屏幕的某个位置，甚至跟随用户的滚动而上下移动。这种广告设计旨在提高广告的可见性和点击率，因为它总是保持在...
带关闭的飘浮广告条
04-14
飘浮广告是一种常见的在线营销策略，它以浮动的方式出现在网页的边缘或角落，吸引用户的注意力。这种广告形式通常设计为可移动或可关闭，以便用户在需要时可以将其移开，从而不影响主要内容的浏览。"带关闭的飘浮...
飘浮广告代码 网页常用 简单易用
03-19
在网页设计和开发中，飘浮广告是一种常见的网络营销策略，用于吸引用户注意力并提高网站的互动性。这种广告通常会以图片、动图或者视频的形式出现在网页的角落，随着用户滚动页面而保持在屏幕的固定位置。本资源提供...
非常实用的飘浮广告代码
07-18
在互联网营销领域，飘浮广告（Floating Ads）是一种常见的在线广告形式，它们可以在网页的某个固定位置或沿着页面滚动而动态移动，以吸引用户的注意力。本文将深入探讨飘浮广告的实现原理、代码结构以及如何利用提供...
php底部悬浮广告,左右飘浮广告(jq方法实现)
weixin_35861265的博客
03-25 373
思路：在头部添加-宽度1000px的层作为左右漂浮层的参考层(position:relative)，左右漂浮层(position:absolute)。其中，左边漂浮层 left=- 自身的宽度 ，右边漂浮层right=- 自身的宽;左右漂浮层top= 窗口高度- 漂浮层的高度 +滚动条距页面顶部的高度(漂浮层贴浏览器底部浮动)或 (窗口高度- 漂浮层的高度)/2 +滚动条距页面顶部的高度 (漂...
两侧广告HTML,jquery实现两边飘浮可关闭的对联广告
weixin_42143161的博客
06-17 685
效果展示：代码说明:可关闭的左右两边飘浮的对联广告代码jquery特效，宽屏分辨率大于1024px才显示。因为考虑到窄屏下显示对联广告那真是用户体验超差。点击关闭按钮可以单独关闭自己一边的飘浮的对联广告代码。js代码中的var screen_w = screen.width; if(screen_w>1024){duilian.show();} 是jquery判断浏览器分辨率的，你可以修改这...
超简单漂浮广告代码、网页漂浮广告代码、jQuery漂浮广告、div漂浮层
热门推荐
weixin_42350070的博客
08-27 2万+
简单的漂浮广告，在网页可视区域飘动   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script type="text/javascript&
php判断一个数是否为质数（素数）
骑在大象背上的人生
08-13 8718
以下内容仅为个人参考，如有错误，请多多指教！ header('Content-Type:text/html;charset=utf-8'); $num = isset($_GET['num']) ? $_GET['num']  : 2; $k = 0;//定义次数变量 for ($i = 1; $i     if ($num % $i == 0) {         $k++;/
fastadmin 表头可以飘浮
最新发布
06-13
是的，FastAdmin的表格组件可以实现表头飘浮的效果。这个功能在处理大量数据时非常有用，可以让表格更加易于使用。您可以通过在表格中设置 `scroll` 属性来实现这个效果。具体来说，您需要将 `scroll` 属性设置为一个对象，并将 `headerFixed` 属性设置为 `true`。例如： ```html <el-table :data="tableData" :scroll="{ y: '400px', x: true }" :header-fixed="true"> <!-- 表格列定义 --> </el-table> ``` 这将使表头在垂直方向上固定在表格顶部，并在水平方向上滚动。注意，如果您想要在表格中使用固定表头，您应该确保表格有固定的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值