JavaScript原生实现广告栏滑动
2024-04-13 06:00:44
全部代码
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>两侧广告栏js原生代码实现</title><style>*{padding: 0;margin: 0;}.box{position: relative;}.ad{width: 100%;position: absolute;top: 150px;}.box-left{float: left;width: 150px;height: 300px;background-color: #aaa;}.box-right{width: 150px;height: 300px;background-color: #aaa;float: right;}</style><script>window.onload = function () {//获取相关元素var ad = document.getElementsByClassName("ad")[0];var adtop = ad.offsetTop;window.onscroll = function () {var stop = scroll().topanimate(ad, stop + adtop);// console.log(ad.style.top);}//缓动动画封装function animate(ele, target) {clearInterval(ele.timer);ele.timer = setInterval(function () {var step = (target - ele.offsetTop) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);ele.style.top = ele.offsetTop + step + "px";console.log(1);if (Math.abs(target - ele.offsetTop) < Math.abs(step)) {ele.style.top = target + "px";clearInterval(ele.timer);}}, 25);}// scroll的封装function scroll() {return {"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft}}}</script>
</head>
<body><div class="box" style="height: 5000px"><div class="ad"><div class="box-left"></div><div class="box-right"></div></div></div>
</body>
</html>js部分
<script>window.onload = function () {//获取相关元素var ad = document.getElementsByClassName("ad")[0];var adtop = ad.offsetTop;window.onscroll = function () {var stop = scroll().topanimate(ad, stop + adtop);// console.log(ad.style.top);}//缓动动画封装function animate(ele, target) {clearInterval(ele.timer);ele.timer = setInterval(function () {var step = (target - ele.offsetTop) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);ele.style.top = ele.offsetTop + step + "px";console.log(1);if (Math.abs(target - ele.offsetTop) < Math.abs(step)) {ele.style.top = target + "px";clearInterval(ele.timer);}}, 25);}// scroll的封装function scroll() {return {"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft}}}</script>html和css部分
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>两侧广告栏js原生代码实现</title><style>*{padding: 0;margin: 0;}.box{position: relative;}.ad{width: 100%;position: absolute;top: 150px;}.box-left{float: left;width: 150px;height: 300px;background-color: #aaa;}.box-right{width: 150px;height: 300px;background-color: #aaa;float: right;}</style></head>
<body><div class="box" style="height: 5000px"><div class="ad"><div class="box-left"></div><div class="box-right"></div></div></div>
</body>
</html>JavaScript原生实现广告栏滑动相关推荐
- javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- Javascript实现的左右滑动菜单
原文链接:http://www.cnblogs.com/miqi2214/archive/2009/04/28/1445308.html Javascript实现的左右滑动菜单 先看Demo便于理解: ...
- JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...
- JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细 代码下载:http://www.demodashi.com/demo/10728.h ...
- javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流 这个事件流 ...
- javascript原生初级到非凡-姜威-专题视频课程
javascript原生初级到非凡-248人已学习 课程介绍 本套课程是<初级的前端工程师系列课程>中重要的一部课程,课程需要有HTML5+CSS3基础来学习,课程从初级入 ...
- javascript 原生类 DOMParser 把 字符串格式的HTML文档源码 转换成 document DOM对象
文章目录 Intro QA DOMParser 在 console 的使用 cheerio 在 node 项目中的使用 Reference 测试 sum Intro 有一天我在写爬虫. 其实也说不上是 ...
- JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图 二.准备文字素材 文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...
最新文章
- 2019年9月2日开学！寒假时间也定了……
- 【极客blog图文讲解】ruby以及Jekyll的环境配置（针对mac linux）
- Pandas中兼并数组和字典功能的Series 2013-03-24 11:24:00 分类： Python/Ruby In [2]: # 这段代码用于并排显示多个Series对象 from it
- 关于js复制文本信息（按钮级别）
- ireport修改jrxml中的sql语句_SQL中的create table与insert into语句
- python不支持prelu_MTCNN（九）更改python与c代码的PReLU为ReLU
- 同事更新几个表_无法抵挡的帅气！西铁城潮酷光动能表
- matlab主要数据预处理函数,Matlab 神经网数据预处理的函数
- html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
- HTML请选择编程,html – 设计选择标记
- Java爬坑--集合(二)List
- IT常用职位缩写总结
- Node.js模拟登录强智科技教务系统
- 7月26日 select单表查询基础语句
- 小程序跳转小程序，小程序跳转公众号，小程序跳转h5
- ChatGPT所有插件详细教程
- 阿里再发10亿助农，店宝宝：中小卖家喜迎流量红利
- Git - 版本穿梭(时光穿梭机)
- Unity中让游戏对象消失或隐藏的几种方法
- 使用管程法解决生产者消费者问题