轮播广告通知整体思路:
1. 首先文字的移动利用了 JAVA script 中 ScrollLeft 的知识点;
2. 在设置一条一模一样的新闻, 利用无缝轮播图滚动的原理让新闻无缝滚动.
3. 使用了自执行匿名函数, 让网页载入后自动开始执行定时器, 开始轮播广告通知.
实现效果: 文字实现无缝跑马灯滚动轮播效果, 鼠标划入停止滚动, 鼠标移出继续滚动.
代码内有超级详细的注释, 如有疑问, 请留言, 会在第一时间回复!
效果图:
全部代码如下:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- *{ margin:0; padding:0; font-size:14px; } HTML{ width: 100%; height: 100%;
- /* 给网页设置渐变背景色 */ /* 在渐变色之前设置一个背景颜色为纯色, 第二个设置渐变色会将第一个覆盖覆盖, 此举是为了防止一些浏览器不兼容渐变色
- */ background-color: #74ebd5; background-image: linear-gradient(to right,
- #74ebd5 0%, #9face6 100%); } /* 内容栏的设置 */ #box{ margin:200px auto 0; padding:0
- 10px; width:1000px; height:140px; line-height:140px; border-radius: 15px;
- /*border 的 dashed 指虚线 */ border:1px dashed green; background:lightgreen;
- } #box #wrap{ height:140px; overflow:hidden; /*wrap 元素里面的文字禁止换行 */ white-space:nowrap;
- } #box span{ color:red; font-weight:bold; font-size:50px; } /* 让两条新闻在同一行,
- 把第二条新闻变成行内块元素 */ #wrap div{ display:inline-block; font-size: 34px; }
- </style>
- </head>
- <body>
- <div id='box'>
- <div id='wrap'>
- <div id='conBegin'>
- <span>
- 最新消息:
- </span>
- 6 月 3 日上午, 中国国防部长魏凤和发言: 如果有人胆敢把台湾从中国分裂出去, 中国军队别无选择, 必将不惜一战, 必将不惜一切代价,
- 坚决维护祖国统一.
- </div>
- <!-- 在设置一条一模一样的新闻, 利用无缝轮播图滚动的原理让新闻无缝滚动 -->
- <div id='conEnd'>
- <span>
- 最新消息:
- </span>
- 6 月 3 日上午, 中国国防部长魏凤和发言: 如果有人胆敢把台湾从中国分裂出去, 中国军队别无选择, 必将不惜一战, 必将不惜一切代价,
- 坚决维护祖国统一.
- </div>
- </div>
- </div>
- <script>
- // 这里这个函数用到自执行匿名函数, 前一个括号是一个匿名函数, 后一个括号代表立即执行.
- // 作用: 可以用它创建命名空间, 只要把自己的所有代码都写在这个特殊的函数包装内, 那么外部就不能访问, 防止代码
- (function() {
- var box = document.getElementById('box');
- var conBegin = document.getElementById('conBegin');
- var wrap = document.getElementById('wrap');
- // 利用封装好的获取 CSS 样式的函数, 来获取 conBegin 的宽度
- var conBegin_width = getCss(conBegin, 'width');
- var timer = Windows.setInterval(move, 10);
- function move() {
- // 核心代码!!!
- // scrollLeft: 是该元素的显示 (可见) 的内容与该元素实际的内容的距离!!!
- // scrollLeft 属性可以返回或者设置元素内容向左滚动的尺寸.
- // 也就是被元素左侧所遮挡的尺寸, 或者说滚动条向右滚动的距离.
- // 返回或者设置的值都是数字, 不能带单位, 默认单位是像素.
- // 此属性相当有用, 比如可以用来制作水平无缝滚动效果
- // 简单了说: 元素会从 scrollLeft 的位置显示该元素的内容.
- // 这个属性只能用于元素设置了 overflow 的 CSS 样式中, 一般和 overflow:hideen 配合使用
- // scrollLeft 相当于该元素的显示 (可见) 的内容与该元素实际的内容的距离, 每执行一次定时就距离加 1, 就形成了文字滚动效果
- wrap.scrollLeft++;
- // 如果是 wrap 元素的显示的内容与该元素实际的内容的距离. 超过盒子的宽度, 就让 scrollLeft 为 0, 从头开始
- if (wrap.scrollLeft >= parseInt(conBegin_width)) {
- wrap.scrollLeft = 0
- }
- }
- // 鼠标划过停止定时器
- box.onmouseover = function() {
- Windows.clearInterval(timer);
- }
- // 鼠标离开启动定时器
- box.onmouseout = function() {
- timer = Windows.setInterval(move, 10)
- }
- } ())
- // 封装的一个 JS 获取 CSS 样式的方法, 第一个写需要获取的元素, 第二个获取的属性, 第三个参数需要更改的样式
- function getCss(obj, attr, value) {
- var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
- if (arguments.length === 2) {
- return getStyle;
- } else if (arguments.length === 3) {
- obj.style[attr] = value;
- }
- }
- </script>
- </body>
- </HTML>
来源: https://www.cnblogs.com/zhaohongcheng/p/10964043.html