一直处于网页中间的滚动广告

JavaScript 动态网页实例 —— 广告效果 广告是现代网页设计中不可或缺的内容。广告可以有很多种形式,但最终目的都是要吸引观众的注意力。尽管广告少不了画面、音效和广告语等效果,但其实现主要还是应用JavaScript 代码,只要很好掌握了JavaScript程序设计,剩下的就是创意和美工了。本章介绍几种广告效果,包括对联广告、飘动广告、滚动广告和特殊视觉效果的广告,相信读者会从中受到启发。 阅读详情
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

    var a = 1;

var oldjson = 0;

function startMove(obj, json, fn)
{
    
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;        //这一次运动就结束了——所有的值都到达了
        for(var attr in json)
        {
            //1.取当前的值
            var iCur=0;
            
            if(attr=='opacity')
            {
                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCur=parseInt(getStyle(obj, attr));
            }
            
            //2.算速度
            var iSpeed=(json[attr]-iCur)/10;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
            
            //3.检测停止

            
            if(json[attr]<oldjson && iCur>=json[attr]){
            
                bStop=false;
                //alert();
            
            }else if(iCur!=json[attr] && iCur<=json[attr])
            {
                //alert();
                bStop=false;
                oldjson = json[attr];
            }

            
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            }
            else
            {
                obj.style[attr]=iCur+iSpeed+'px';
                
            
            }
        }
        
        if(bStop)
        {
            clearInterval(obj.timer);
            
            if(fn)
            {
                fn();
            }
        }
    }, 30)
}




var _a = 0;
window.onresize=window.onload=window.onscroll=function ()
{
    // scrollTop ---->  scroll 即卷 scrollTop  即卷掉的高度
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var w=document.documentElement.clientWidth;
    var img = document.getElementById('jsAD');
    var close = document.getElementById('close');
    var addin = document.getElementById('addin');
    var footer = document.getElementById('footer');
    var imgt = (document.documentElement.clientHeight-img.offsetHeight)/2;


    //img.style.display = "none";
    
    function ImgAD(){
        img.style.display = "block";
        img.style.zIndex = "99999";
        img.style.left = (w-img.offsetWidth)/2+'px';
        imgt = (document.documentElement.clientHeight-img.offsetHeight)/2;
        startMove(img, {top: scrollTop+imgt});
    
    }
    
    if(_a==0){
        setTimeout(function(){
            ImgAD();
            a = 1;
        },600);
    }


    close.onclick=function (){
        var closediv = document.getElementById('jsAD');
        closediv.style.display="none";
        if(_a>=1 && _a<=2)
        {
            setTimeout(function(){
            
                ImgAD();
            
            },30000);    
        }
        _a++;
    }

    addin.onclick=function (){
        window.location=" http://www.zgxl168.com/register/3 ";
    }

    footer.onclick=function (){
        window.location=" http://www.zgxl168.com/stores/list ";
    }

    startMove(img, {top: scrollTop+imgt});
    
};
网页滚动到指定位置会出现广告条的效果 HTML代码: <!--悬浮广告条--> <aside> <aside class="aside-adv"> <div> <img src="images/other/adv.jpg"> </div> <i class="close-btn">×</i> </aside> </aside> CS. 阅读详情

相关推荐

JS 实现网页漂浮广告

首先建立一个名为 ad.js 的文件,以下为文件内容: //漂浮广告 Begin//可设置漂浮图片是否为FLASH以及显示大小var brOK=false;var mie=false;var vmin=2;var vmax=5;var vr=1;var timer1;var chinazads;var isflash=0;               //是否为FLASH文件的漂浮 1=是 0

踏雪无痕 3583

Html+Css+Js网页页面上广告一直显示,而且一直动来动去(完整代码+详解)

一,问题描述 我们浏览网页时,经常会看到网页上有一些悬浮的广告,而且会飘来飘去。特别是一些盈利的网站,即使你讲网页往下拉,希望以此不看到广告,但是他却很讨人烦的在网页上。所以通过描述我们的悬浮广告要满足一下几个要求; 1 .我们的广告要一直在我们的浏览器可视区域 2 .即使拉动了屏幕的滚动条,广告也会在可视区域内 二,效果预览 三,用到的主要事件 window.onload:页面加载...

qq_38170526的博客 2228

实现网页广告图片连续滚动的完整HTML代码

通过本章节的介绍,我们学习了JavaScript基础语法,并利用这些基础构建了动态图片轮播的基本功能。我们了解了定时器的使用、事件监听以及如何动态更新图片显示。在后续的内容中,我们将进一步探索图片滚动与位置调整逻辑,确保广告轮播在不同设备上的兼容性和用户体验。接下来的章节,我们将深入到jQuery库的应用,利用这个流行的JavaScript库简化我们的代码,并进一步提高开发效率。

weixin_42593701的博客 1022

模仿网页广告在页面上滚动出现

js,jquery写的   1.效果图                                     &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&l

FYANGFEI的博客 523

网页浮动广告的十种实现技巧与代码示例

浮动广告可以定义为在网页中以悬浮形式存在的广告单元。它们通常嵌入在网页的特定区域,可以是顶部、底部、左侧或右侧,并且不会随着页面滚动而移动。根据不同的交互方式,可以将浮动广告分为几种类型,如点击弹出广告、定时滚动广告等。HTML5中引入了自定义数据属性(data-*),允许我们在标准的HTML标签中添加非标准的自定义数据。这些属性以data-为前缀,例如data-adid。数据属性在广告中非常有用,因为它可以存储一些额外的、与广告相关的数据,而不会影响页面的结构和语义。

weixin_29138345的博客 1119

网页滚动广告 随着网页的下拉而跟着走动

源代码,直接可以使用。随着网页的下拉而跟着走动

HTML+JS制作无限滚动广告代码

对于火热的H5,虽然你会用,但是不一定全部会写。这里记录的是html+css实现的广告无限滚动效果。后期还会记录自己学习中遇到的小应用知识!谢谢

qq_41093007的博客 7577

网页滚动广告模板

该资源是用javascript写的网页滚动广告,广告可以随着网页的滚动而滚动,总是固定在一个地方。使用请遵照使用说明,允许浏览器加载可选项,否则看不出效果

网页弹出窗口在主网页的正中间,加入右侧广告

$("body").append(" ") var MarginLeft = 10; //浮动层离浏览器右侧的距离 var MarginTop = 190; //浮动层离浏览器顶部的距离 var Width = 232; //浮动层宽度 var Heigth= 145; //浮动层高度 //设置浮动层宽、高

lyfclear的专栏 3262

JavaScript实现图片无缝滚动,如网页上的广告滚动条

利用JS定时器和运动框架实现图片无缝滚动,适合初学者使用

二叉树随机漫步

元旦快乐! 学习到中本聪bitcoin的文章的calculation部分的时候,出现了binomial random walk,不是很明白什么是random walk。发现这个文章写的很好:https://blog.youkuaiyun.com/fireguard/article/details/16111603 随机漫步,也叫随机游走,最早是物理学中做"布朗运动"的微观粒子的运动形态来形成的一个模型,布朗运...

gjq5464的博客 1737

40-对联广告(监听网页滚动事件)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-对联广告</title> <style> *{ margin: 0; paddin...

小伟 191

Ubuntu环境下rknn-toolkit2的安装与兼容性解析

本文详细解析了在Ubuntu系统上安装瑞芯微rknn-toolkit2工具链的完整流程与关键注意事项。文章重点剖析了rknn-toolkit2与旧版rknn-toolkit的核心兼容性问题,强调两者在API、模型格式及运行时库上互不兼容,并推荐使用Conda虚拟环境进行隔离管理,为RK3566、RK3588等开发板的AI模型部署提供清晰的实践指南。

weixin_29041767的博客 375

网页标准的随滚动条滚动的广告特效

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   符合网页标准的随滚动条滚动的广告特效代码webjx.comfunction scrollImg(){     var posX,posY;     if (window.innerHeight) {         posX = window.pageXOffset;     

chy2z的专栏 1302

VESC电调高级调参指南:电机校准与性能优化实战解析

本文详细解析了VESC电调的高级调参方法,包括电机校准与性能优化实战技巧。从基础参数设置到高级机械参数优化,再到动态性能调优,提供了全面的调参指南。特别针对电机类型、功率设置、电池参数配置等关键环节给出实用建议,帮助用户充分发挥VESC电调的性能潜力。

weixin_30772105的博客 196

Python爬虫实战:抓取全球船舶AIS定位数据的全流程指南

AIS(Automatic Identification System)自动识别系统是目前全球航运中用于实时跟踪船只位置的主要技术。名称、MMSI编号、呼号实时经纬度船速、航向吃水、目的港状态(航行/停泊/锚泊)航线信息等🛰️海上运输监控:追踪航线,预估到港时间;🛳️船舶管理系统:为物流、港口运营提供决策依据;🌊研究分析:如海洋运输碳排放研究、船只拥堵热力图等;🧠人工智能训练数据集:用于轨迹预测、碰撞预警模型。

2201_76125261的博客 1364

js 实现页面两边广告, 可关闭对联广告 随滚动条滚动 符合w3c标准

 以下为js代码 ,保存名称与调用名称相同 ,此处采用ad.js:// 这是关闭飘浮广告的宽度,请根据你的广告内容而定var hbcms_ad_width = 100;// 这是关闭飘浮广告的代码,可以换成图片,点击即可关闭var hbcms_close_str = 关闭;// 设置左边的广告代码,请自己更换图片地址,或换成flash,或换成纯文字// 如果不希望显示左边的广告

言出必行 5816

深度解析电力负荷预测:基于深度学习的完整实战指南

电力负荷预测是智能电网运行中的核心技术之一,准确的负荷预测对于电网的稳定运行、电力市场交易以及能源调度具有重要意义。本文将详细介绍电力负荷预测的完整解决方案,从数据预处理、特征工程到模型构建与评估,提供完整的可执行代码。我们将使用LSTM(长短期记忆网络)和Transformer两种主流深度学习模型进行实现,并通过实际数据集验证模型效果。电力负荷预测是指根据历史负荷数据、气象因素、时间特征等多维信息,预测未来某一时段的电力需求。超短期负荷预测:未来几分钟到几小时短期负荷预测:未来1天到1周中期负荷预测。

YOLO 111

滚动广告+CSS布局

研究了一下CSS布局以及CSS固定窗口,在此基础上设计了滚动广告。 先附上代码:(使用jquery-1.7-min) <html> <head> <title>CSS布局及滚动广告</title> <style> #my_windows{ margin-left:2%; margin-top:20%; widt...

diquanlao2616的博客 371

web逆向伪瑞数案例:宝武资源有限公司(面向对象补环境)

声明:该文章为学习使用,严禁用于商业用途和非法用途,违者后果自负,由此产生的一切后果均与作者无关前言:之所以称伪瑞数案例,是因为该网站,无论是补环境的方法、还是环境都和瑞数差不多,因为第一次遇到这种网站,不确定是不是瑞数的一种,所以这里称伪瑞数,有知道的道友,可以评论区评论下,共同进步。,这里就不做多介绍了1.瑞数中的是t​s,而该网站是_ss。2.外链js代码不能格式化,否则补环境时会遇到一个超过数组长度的报错。3.call执行后的虚拟文件中有超多的debugger。

老衲爱洗头的博客 2534

RK3588 部署 YOLO26-Pose 人体姿态检测:Windows Docker 环境全流程

YOLO26-Pose 在 RK3588 上的部署流程是 PC 端 ONNX 导出 → RKNN 转换(INT8 量化)→ 板端推理。INT8 量化后 YOLO26s-Pose 约 35ms,YOLO26n-Pose 约 15ms,可以覆盖实时姿态检测的需求。后处理是 Python 实现的常见瓶颈——如果帧率不达标,先用 npy 保存模型输出在 PC 上验证解析逻辑的正确性,确认无误后再迁移到 C++ 实现。

m0_64661770的博客 543

网页右侧的漂浮广告代码,随滚动条滚动

HTML代码(即需要漂浮的广告): js代码:前提是必须要引入jquery文件 $(function(){ $(window).scroll(function(){ var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || 0;

二東的专栏[人就是需要不断的激发自己] 1万+

DeepSeek Harness“一切皆插件”核心机制详解

DeepSeek Harness 的“一切皆插件”核心 = Cordis 微内核 + 服务化能力接口 + 声明式依赖注入 + 类型化事件 + 可逆副作用 + 配置层 Profile/Bundle/Patch 组合。它的工程收益是:把模型、工具、循环、存储、UI 等所有 Agent 能力都变成“可从配置替换、可干净装卸”的单元,而不是写死在框架里。

软件行业技术文化交流。 600

随滚动条滚动广告图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随滚动条滚动广告图片</title> <style> body{margin: 0;} ...

dimangxuan1310的博客 605

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

网页尺寸和网页广告尺寸

搜索了一下这方面的资料,了解到一些,分享一下:网页设计标准尺寸:1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。 2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*5

TOSO的专栏 3338

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

网页广告代码

左栏浮动广告 var specialcode="var specialcode=" 推荐↓关 闭广告内容";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=

寒冬玉 917

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

上一篇: 如何使对象可以像数组一样进行foreach循环?
下一篇: MySQL 三种关联查询的方式: ON vs USING vs 传统风格
HackProgramer
博客等级 码龄12年 255粉丝 23原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值