页面上无法屏蔽的左右两侧的漂浮图片广告

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量176 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/youtianxia/p/4174477.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>页面上无法屏蔽的左右两侧的漂浮图片广告丨益诚制衣-纳豆激酶</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
    .l1{
    width:100px;height:100px;background:red;float:right;
    position:fixed !important;top:200px;
    position:absolute;z-index:300;top:expression(offsetParent.scrollTop+200);left:10px;
    }
    .r1{
    width:100px;height:100px;background:red;float:right;
    position:fixed !important;top:200px;
    position:absolute;z-index:300;top:expression(offsetParent.scrollTop+200);right:10px;
    }
    </style>
    </head>
    <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <!--把下面代码加到<body>与</body>之间-->
    <div class="l1"><a href="http://www.CsrCode.cn" target="_blank"><img src="/images/20110809/piaofu.gif" width="100" height="100" border="0"></a></div>
    <div class="r1"><a href="http://www.7caidy.com" target="_blank"><img src="/images/20110809/piaofu.gif" width="100" height="100" border="0"></a></div>
    </body>
    </html>
    <br><br><hr>

 

转载于:https://www.cnblogs.com/youtianxia/p/4174477.html

weixin_30716725
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面左右两边跟随式广告框
梵海
03-02 3910
当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用background：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。 制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运
网页对联广告
01-25
网页对联广告
js两侧浮动广告
Sunny
03-17 1690
function initEcAd(LName,RName) { document.all.NowAd_left.style.posTop = -200; document.all.NowAd_left.style.visibility = visible; document.all.NowAd_left.style.position = absolute; docum
wap手机网页悬浮广告代码遮盖原有网页内容怎么办？
XYCMS博客家园
04-24 3776
wap手机网页广告代码遮盖原有网页内容怎么办？这个也许是很多weber在做网页页面会遇到的问题，假如是在中间悬浮，最好的办法就是不要用了，这个没有好的解决办法，只要是广告肯定是要给客户看的，不然设置广告没有意义，或者简便方法就是加个关闭按钮，让浏览用户自己选择性关闭。假如是顶部或者底部固定悬浮广告挡住了网页头部或者底部信息，这个就好办了，解决方法有两种：1，在原有手机代码上面或者下面加div空...
怎么让网页的漂浮广告显示在最上面 不被其他图片覆盖了
siny258的博客
06-01 2328
在漂浮广告的css里面定义一下z-index的值就可以了，把值设大一点，例如定义z-index:999999;
jquery浮动图片广告代码_页面上漂浮图片广告代码
11-02
本文将深入探讨如何利用jQuery实现页面上的浮动图片广告代码。 首先，我们需要了解jQuery的基本用法。jQuery简化了JavaScript的DOM操作，事件处理和动画效果。要引入jQuery库，通常会在HTML文件的`<head>`部分添加...
js实现左右两侧浮动广告
10-18
本文将详细介绍如何使用JavaScript实现左右两侧的浮动广告。 首先，我们需要理解JavaScript的基本语法和DOM操作。JavaScript是一种解释型的、跨平台的脚本语言，常用于网页交互和动态效果的实现。DOM（Document ...
jQuery可拖动图片漂浮广告代码.zip
07-11
该代码的核心功能是让图片广告能够在用户浏览网页时始终保持在屏幕上的特定位置，同时允许用户通过鼠标拖动来调整广告的位置，提供了一种灵活且吸引注意力的广告呈现形式。 首先，我们需要了解jQuery，它是一个广泛...
基于JavaScript代码实现随机漂浮图片广告
11-24
通过这些知识点的组合，开发者可以创建出符合W3C标准且能在各种浏览器上正常运行的随机漂浮图片广告。代码一展示了如何利用JavaScript动态调整广告位置，而代码二则提供了一个更简单的实例，通过固定位置和设定的...
左右两侧广告关闭代码（其中图片中有关闭按钮）
weixin_30932215的博客
05-08 360
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
如何屏蔽网页上的烦人广告
liu103bing的专栏
01-06 3987
不知道从什么时候开始，网页上的广告越来越多，连上CSDN的论坛也经常看到网页的两边有大大的广告，经常是你到京东淘宝买个东西，到百度搜个东西，结果上什么网站都给你弹出类似的广告，最可恨的是有些网站还嵌入视频，仔细一看都是谷歌提供的广告，百度推广等。很早的时候网站弹窗这种流氓行为现在比较少见了，但是这种谷歌，百度，阿里妈妈的推广基本覆盖了大部分的网站。一些小站长也就靠这个收入，连CSDN，天涯这种大型
vue 实现 广告悬浮效果,并防抖性能优化
lllsj的博客
02-09 888
节流防抖参考link:https://blog.csdn.net/zuorishu/article/details/93630578 <template> <img :src="aiUrl" class="ai-img" id="ai-img" /> </template> <script> export default { data() { return { timer: null, aiUrl: require("
vue实现悬浮广告飘窗组件
weixin_42973850的博客
03-20 2237
vue实现悬浮广告飘窗组件
vue无缝滚动广告插件使用
碉堡飞哥的博客
12-17 2977
//安装 npm install vue-seamless-scroll --save //然后在main.js文件里面引入使用： import scroll from 'vue-seamless-scroll' Vue.use(scroll) 在页面使用参考地址： https://chenxuan1993.gitee.io/component-document/index_prod#/com...
XHTML 简介
最新发布
lly202406的博客
08-09 295
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
在JavaScript中制作页面漂浮广告，鼠标停在图片上停止，离开移动
04-03
以下是一个简单的示例，漂浮广告为一个图片，当鼠标停在图片上时，广告停止漂浮，离开时继续漂浮： HTML代码： ``` <div id="floatAd"> <img src="广告图片地址" alt="广告"> </div> ``` CSS代码： ``` #floatAd { position: fixed; bottom: 0; right: 0; } #floatAd img { width: 200px; height: 200px; cursor: pointer; } ``` JavaScript代码： ``` var floatAd = document.getElementById('floatAd'); var adImg = floatAd.getElementsByTagName('img')[0]; var dx = 2; // 漂浮距离 var dy = 2; var floatInterval = setInterval(function() { var x = parseFloat(floatAd.style.right); var y = parseFloat(floatAd.style.bottom); if (x <= 0 || x >= (window.innerWidth - adImg.width)) { dx = -dx; } if (y <= 0 || y >= (window.innerHeight - adImg.height)) { dy = -dy; } floatAd.style.right = (x + dx) + 'px'; floatAd.style.bottom = (y + dy) + 'px'; }, 10); adImg.addEventListener('mouseover', function() { clearInterval(floatInterval); }); adImg.addEventListener('mouseout', function() { floatInterval = setInterval(function() { var x = parseFloat(floatAd.style.right); var y = parseFloat(floatAd.style.bottom); if (x <= 0 || x >= (window.innerWidth - adImg.width)) { dx = -dx; } if (y <= 0 || y >= (window.innerHeight - adImg.height)) { dy = -dy; } floatAd.style.right = (x + dx) + 'px'; floatAd.style.bottom = (y + dy) + 'px'; }, 10); }); ``` 解释： - 通过`getElementById`方法获取漂浮广告节点和图片节点； - 定义漂浮距离`dx`和`dy`，并设置漂浮间隔为10毫秒； - 使用`setInterval`方法循环移动广告，当广告到达窗口边缘时改变漂浮方向； - 当鼠标停在图片上时，使用`clearInterval`方法停止漂浮； - 当鼠标离开图片时，重新开始漂浮。 注意事项： - 漂浮广告的位置使用`position: fixed`实现，需要在CSS中设置`bottom`和`right`属性； - 图片节点需要设置`cursor: pointer`属性，以便在鼠标停在图片上时改变鼠标指针形状； - 可以根据实际需求调整漂浮距离和漂浮间隔。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值