浮动广告

最新推荐文章于 2021-08-04 18:57:29 发布
最新推荐文章于 2021-08-04 18:57:29 发布
阅读量250 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ada_yangyang/article/details/81240248
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>浮动广告</title>
    <style type="text/css">
        div{
            position:absolute;
            left:20px;
            top:20px;
        }
    </style>
    <script type="text/javascript">
        var floatDiv = function () {
            //找到div,控制左上角的位置left，top
            document.getElementById("div1").style.left=Math.random()*500+"px";
            document.getElementById("div1").style.top=Math.random()*500+"px";
            setTimeout("floatDiv()",1000);
        }
        window.onload=floatDiv;
    </script>
</head>
<body>
<img src="1.jpg"/>
<div id="div1">
    <img src="2.jpg">
</div>
<!--
<script type="text/javascript">
    floatDiv();
</script>
-->
</body>
</html>

 

海边拾贝seebit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浮动广告代码实例
Return_KB的博客
01-17 4381
很多网站的页面都有漂浮的广告效果，虽然烦人，但也确实起到了良好的宣传效果。 各大代码网站也有关于漂浮代码的实例，很多存在着兼容性问题，不符合W3C标准，本站修复了兼容性问题，下面就简单介绍一下如何实现此效果。 代码如下: [HTML] 纯文本查看 复制代码运行代码0102030405060708091011121314151617181920212223242526272829303
浮动广告代码
weixin_33897722的博客
09-09 279
右下角漂浮代码&lt;SCRIPT FOR=window EVENT=onload LANGUAGE="javascript"&gt;initAd();//载入页面后，调用函数initAd()&lt;/SCRIPT&gt;&lt;script language="javascript"&gt;&lt;!--function initAd() {document.all.AdLayer.style....
经典网页布局&浮动广告
`or 1 or 不正经の泡泡
08-04 1621
前言 这里主要是做一个小小的总结，关于一个页面如何使用css进行布局。如何使用js实现一个广告弹窗的效果。尤其是这个布局，我记得我当初很讨厌HTML的时候的最主要的原因是因为当时一开始学的时候是按照先html后css的节奏来的，这就导致，一开始我根本无法实现标签的摆放布局（这也是为什么我在学习几天之后就直接去做cs架构的原因之一，安全性差，界面开发难受（我不喜欢）至于为什么回来主要是为了实现我的个人博客网站），就显得很鸡肋，这个和你直接做软件的UI不一样，例如你使用python的tkinter 设计界面时当
超好用的网页浮动广告代码
weixin_34117522的博客
11-12 1278
Html代码 <divid='your_id'style='z-index:100;left:2px;width:108px;position:absolute;top:43px;height:108px;visibility:visible;'> <ahref='http://c...
JavaScript实现网页上的浮动广告的简单方法
10-27
JavaScript是一种广泛应用于网页开发的脚本语言，它可以用于创建交互式的网页效果，其中包括浮动广告的实现。浮动广告是指在用户滚动网页时仍然保持在屏幕某一位置的广告元素，这种广告形式能够持续吸引用户的注意力...
jQuery 浮动广告实现代码
10-30
用jquery实现的浮动广告代码,需要的朋友可以参考下。
浮动广告js类实现
10-31
浮动广告是一种常见的网页营销手段，它通常出现在网页的角落或者跟随用户鼠标移动，吸引用户的注意力。在本文中，我们将深入探讨如何使用JavaScript实现一个浮动广告类。JavaScript是一种强大的客户端脚本语言，用于...
浮动广告模型.rar
08-07
基于动易sf5.9做的浮动广告模型。欢迎下载交流。 JS文件 放在根的JS目录下，并在相关页面引用。 数据源：浮动广告_数据源.config 内容模板：浮动广告内容页模板.html 模型文件：浮动广告模型模板.xls 标签：国信_...
js实现左右两侧浮动广告
12-29
本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下 <html> <title>左右两侧浮动广告</title> <head> </head> <body> <tr><td> </td></tr> ...
广告浮动代码
08-15
广告浮动，很简单的代码片段，希望有用，大家赶快下载吧
浮动广告js脚本
01-18
自己初学的js写的代码，写的不好欢迎各种意见，目前测试在IE11和火狐下都没问题 使用方法： 只需在html页里面嵌入一段js代码如下： var obj=new Advert(); obj.src="";//图片地址 obj.href="";//点击图片链接地址 //下面这些赋值可选 obj.top=0; obj.left=0;//图片刚开始位置 obj.slope=1//图片刚开始移动轨迹的斜率，默认x轴步长为2，delay为30，这些可以在代码中自行修改
网站浮动广告
11-28
将代码放去要展现的广告页，更换自己想要的图片，即可实现网站广告浮动的效果，兼容各个浏览器。
网页浮动广告代码 非常好在右侧
12-05
网页浮动广告代码 非常好的 网页浮动广告代码 非常好的 网页浮动广告代码 非常好的
常见的网页浮动广告代码
04-08
十种常见的网页浮动广告代码，增加网站的功能性，可以参考
JS--实现漂浮广告
qq377751971的博客
03-23 8887
//html代码         "ad" style="position:absolute">         "http://www.cxyblog.com/">             "img/cxyblog.jpg" />                            var x = 50,y = 60        var 
Html+CSS浮动的广告条
一只小菜鸟的技术博客
10-08 4257
1.html部分 blog_floatdiv.html --> 我是浮动的div 浮动的div 浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div浮动的div 浮动的div 浮动的div 浮动的div 浮动的div 浮动的div 浮动的div
jQuery -------实现图片漂浮(漂浮广告)
一心不安
12-10 5431
-----------------------html------------------------- &lt;!--漂浮广告  begin--&gt;         &lt;div id="imgfloat"&gt;&lt;img src="img/top/a/toplist_a01.jpg"/&gt;&lt;div id="imgclose"&gt;&lt;/div&
JavaScript浮动广告
村花的兄弟的博客
12-05 3393
js的浮动广告代码，复制就能用<html> <head> <meta charset="utf-8"> <title>图片浮动</title> </head> <body> <div id="img" style="position:absolute"> <img src="图片的地址"
js 浮动广告
最新发布
05-25
浮动广告一般使用CSS实现，可以通过以下步骤实现： 1. 创建一个div元素，并添加内容和样式。 2. 使用CSS的position属性将该div元素定位为绝对定位（absolute）或固定定位（fixed）。 3. 使用CSS的top、bottom、left、right属性来设置该div元素的位置。 4. 使用CSS的z-index属性来设置该div元素的层级，使其显示在其他元素之上。 5. 使用CSS的animation或transition属性来添加动画效果。 6. 使用JavaScript来控制浮动广告的出现和隐藏。 下面是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动广告</title> <style> #ad { position: fixed; top: 50px; right: 0; background-color: #ff0000; color: #fff; padding: 10px; z-index: 9999; animation: float 2s ease-in-out infinite; } @keyframes float { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } </style> </head> <body> <div id="ad">这是一个浮动广告</div> <script> window.onload = function() { var ad = document.getElementById("ad"); setTimeout(function() { ad.style.display = "none"; }, 5000); // 5秒后隐藏广告 }; </script> </body> </html> ``` 在上面的代码中，我们创建了一个id为“ad”的div元素，并将其定位为固定定位，位于页面的右上角。我们还使用了CSS的animation属性给该元素添加了一个左右浮动的动画效果。最后，我们使用JavaScript在页面加载完成后，延迟5秒后隐藏该广告。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值