js网页侧边悬浮滚动广告

原生js实现网页侧边随页面滚动广告效果

css

    /*测试用的高度*/html {height: 3000px;}#rightroll {position: absolute;}.close {position: absolute;right: 0;top: -10px;}.close img {width: 20px;height: 20px;}li {list-style: none;width: 80px;height: 80px;background-color: red;margin-top: 10px;}

html

   <div id="rightroll"><div class="close" style="justify-content: flex-start;"><img class="close-img"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABD1JREFUWEfFV11oHFUU/s7sZk0W2/St2AdBLS1YfKoJVJG29qEqrVY06YMPvlQFhWB+7r27EnB86e7cyY8EFKw+CYIaQW2lVaGmBa2S2AeRCo2aQvGHvohsZBM2O3PkLrNhdzIzuyaRDOzD7D3nnu+c891zvyFs8UNbHB9tA5iamtpeLpcPENFBy7IOMvNOItppEmDmW0R0y/f9y8x8OZvNfjswMFBqJ7m2ADiO8yIRKQB3trMpgJvM7Cil3mxlnwjAtu10V1fXWSJ6NMh0nojOeZ73WSaT+aNarf5p/k+n03dUKpVdqVTqGDMfJ6I9gf2FpaWlx23brsYBiQXgum4/M38QOF4FcEZKeaZVRmZda/08APPbb96J6KQQ4sMo30gArus+zMwXA4dpKWV/O4HDNlprE7QvAHFECPFV2GYNgL6+vlRPT0+tZMz8mlLKXk/wuo/jODYRvWre5+bm0tPT017jfmsAuK6rmVkQUUEI8cpGgtd9Xdc9zcx5InKFEDIWQLFY7Lcsy/T9qpTy/s0IXt9Da/294YTv+ydzudwqH1YrMDk5uWNlZcWQ7W4AL4QJp7WeAXAbgGellD9HgZuYmNhdrVbfB7AopTzcaBMQ8y0ACx0dHfsHBwf/rnGjoVcniOhjADeklAZE06O1vgLggKlOpVJ5YnR09PdGA8dxdhHRpwBM5SIrqLVeAHAXMz+plPqkCYDrupPM/DKAd6SUz4UBjI2N3ev7vindPmb+OpPJHK9nYdv2jmw2exbAQwCuWZbVPzIy8lNEEm8DOEVErwshBsMAvmHmBzzPO5zP5y9FlbgRBIAvu7u7jxm7Uql0jpmPJgU3doVC4VAqlZohoitCiAebAGitfwFwTyqV2js8PDwfR8AQiFoZAZxoFdwYjY+P7/E87zqAX6WUu8MVWGTm25l5u1JqMekEhEAY09iyh3iyjYhKRPSPEGLbpgEgoh9M35MqZ4I5jhMPYJ0tuBZkuA/Ad8zcp5T6La56rVrwX0lYK7sJVj8dAGbS6fTTQ0NDf0WBSCSh4ziniShvuCKlHEk6huGehzhxvlwuP2Xb9nLEMRwDMMzMBaVUbcyvDqJisXjUsqzPmXleKbU3YRBFEi40Jz5SStVuwRAJrxut4Pv+I7lc7osmAEZyLS8v/xionthRbFnWqaghYzYLQLzbYhTf7OzsvK8u2Zpuw0B6vfF/XkbM/FKjVFtzHTuOcz6QYOsWIhHtqwkTZr6glHqscX0NAKMDs9nsijHabEFSLpc7wvowTpKt6sGNCJO6EKmRLUYXJonSRl24UVEaqQebTkHU4DD6sLe3t2AkWrB+A8BFz/Pei5HlzwA4Yu78IGt3dnY2H9aBiRyIAhJItUKglpLuqfragu/7+UbpFefU1peRcTaSrVKpHDKfZQB6oz7NAMyaz7NMJnOpLlZaoW0bQKuN1ru+5QD+BU1gXj+OyZS9AAAAAElFTkSuQmCC"alt=""></div><li></li><li></li><li></li></div>

js

  var roll = document.getElementById('rightroll'),initX = 0,initY,compY,sp = 15,//可调整时间间隔,步进值不宜过大,不然IE下有点闪屏:timeGap = 5,doc = document.documentElement,docBody = document.body;// 调整初始位置compY = initY = 150;roll.style.right = initX + "px";; (function () {var curScrollTop = (doc.scrollTop || docBody.scrollTop || 0) - (doc.clientTop || docBody.clientTop || 0);//每次comP的值都不一样;直到ro11.style.top===doc.scrollToptinitY;compY += (curScrollTop + initY - compY) / sp;roll.style.top = Math.ceil(compY) + "px";setTimeout(arguments.callee, timeGap);})();

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/571464.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

argocd部署

一、前言 ArgoCD 是一个开源的、持续交付工具&#xff0c;用于自动化部署应用程序到 Kubernetes 集群。它基于 GitOps 理念&#xff0c;通过使用 Git 作为单一的源头来管理应用程序的配置和部署状态&#xff0c;argocd会定时监控git仓库中的yaml配置文件&#xff0c;当git仓库中…

Linux(CentOS)/Windows-C++ 云备份项目(服务器网络通信模块,业务处理模块设计,断点续传设计)

此模块将网络通信模块和业务处理模块进行了合并 网络通信通过httplib库搭建完成业务处理&#xff1a; 文件上传请求&#xff1a;备份客户端上传的文件&#xff0c;响应上传成功客户端列表请求&#xff1a;客户端请求备份文件的请求页面&#xff0c;服务器响应文件下载请求&…

【JVM】JVM简介

文章目录 &#x1f334;简介&#x1f332;JVM发展史&#x1f338;Sun Classic VM&#x1f338;Exact VM&#x1f338;HotSpot VM&#x1f338;JRockit&#x1f338;J9 JVMTaobao JVM&#xff08;国产研发&#xff09; &#x1f333;JVM 运行流程⭕总结 &#x1f334;简介 JVM …

精酿啤酒:特殊酵母的发酵特性与风味表现

Fendi Club啤酒在酿造过程中采用了特殊的酵母&#xff0c;这些酵母具有与众不同的发酵特性和风味表现&#xff0c;为啤酒带来了与众不同的风味和口感。 Fendi Club啤酒使用的酵母种类繁多&#xff0c;包括艾尔酵母和拉格酵母等。这些不同种类的酵母在发酵过程中具有不同的特性和…

靠谱服装库存管理系统大盘点,商陆花、管家婆、秦丝哪家强?

在服装行业&#xff0c;库存管理是至关重要的环节。对于咱服装老板来说&#xff0c;选对的库存管理系统是提高效率、降低运营成本的关键。市场里有不少系统&#xff0c;我们今天拿出来最常见的5款&#xff0c;给大家一个详细指南。 选择服装库存管理系统时应考虑以下因素&…

65W智能快充—同为科技桌面PDU插座推荐

近10年&#xff0c;移动设备的智能化、功能化已经完全且紧密的融入到我们的基础生活与工作当中。 在常态化的电子设备的应用中&#xff0c;设备的电力续航以及后续的供电充电就尤为重要。 就目前而言&#xff0c;所有消费电子产品中的输入以及充电的接口&#xff0c;usb-c可以…

Mysql--sqlyog远程连接

下载安装MySQL 我们在MySQL官方网站中找到我们对应系统的MySQL安装包&#xff08;如果需要别的安装包可以在下方网站内查找&#xff09;&#xff0c;这里我用redhat9作为演示 MySQL :: Download MySQL Community Server (Archived Versions) 这里我们选择第一个下载到我们主…

【码银送书第十五期】一本书掌握数字化运维方法,构建数字化运维体系

前言 数字化转型已经成为大势所趋&#xff0c;各行各业正朝着数字化方向转型&#xff0c;利用数字化转型方法论和前沿科学技术实现降本、提质、增效&#xff0c;从而提升竞争力。 数字化转型是一项长期工作&#xff0c;包含的要素非常丰富&#xff0c;如数字化转型顶层设计、…

Android源码阅读WorkMangaer - 6

前言 由于笔者目前水平限制&#xff0c;表达能力有限&#xff0c;尽请见谅。 WorkManager 是 Android Jetpack 库的一部分&#xff0c;提供了一种向后兼容的方式来安排可延迟的异步任务&#xff0c;这些任务即使在应用退出或设备重启后也应该继续执行&#xff0c;它是 Androi…

vs2022安装和使用教程(详细)

vs2022和vs2019一样强大&#xff0c;C/C&#xff0c;Python&#xff0c;F#&#xff0c;ios&#xff0c;Android&#xff0c;Web&#xff0c;Node.js&#xff0c;Azure&#xff0c;Unity&#xff0c;HTML&#xff0c;JavaScript等开发都可以执行&#xff0c;大家快来使用它吧~ 如…

【C++】1323. 扩建花圃问题

问题&#xff1a;1323. 扩建花圃问题 类型&#xff1a;整数运算 题目描述&#xff1a; 梅山小学有一块长方形花圃&#xff08;花圃的长宽都是整数&#xff09;&#xff0c;长 m 米&#xff0c;宽未知。 在修建校园时&#xff0c;花圃的长增加了 n 米&#xff0c;此时发现增加…

左值引用、右值引用及移动语义

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 左值 概念 可以取到地址的值就是左值&#xff0c;并且一般情况下可以修改&#xff08;const类型左值不可修改&#xff09;。 左值举例&#xff1a; //左值 int a 0; const int b 1; int* p &a; 右值 概念 不能…