专栏首页Tz一号(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

轮播广告通知整体思路:

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 = window.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(){
            window.clearInterval(timer);
        }
        // 鼠标离开启动定时器
        box.onmouseout = function(){
            timer = window.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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能 本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作!

    Tz一号
  • 纯CSS制作加<div>制作动画版哆啦A梦

    哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦.

    Tz一号
  • html5新特性-header,nav,footer,aside,article,section等各元素的详解

    Html5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素四大类。

    Tz一号
  • jquery 元素节点操作 - 创建节点、插入节点、删除节点

    前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的。

    Devops海洋的渔夫
  • 脱离文档流分析(转)

      block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置widt...

    山河木马
  • 浮动、定位

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • python基础语法

    Python 中同样可以使用 map、reduce、filter,map 用于变换数组:

    周小董
  • JavaScript array对象

    concat()可以基于当前数组中的所有项创建一个新数组。即这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

    用户6973020
  • python中的容器序列类型collections

    实例方法 _asdict():把具名元组以 collections.OrdereDict 的形式返回,可以利用它来把元组里的信息友好的展示出来

    绝命生
  • 第一

    介绍:python3-cookbook这本书是高级用法,不是小白使用书 目的:写作目的是记录下自己学习这本书的过程以及收获 书籍地址:https://pytho...

    py3study

扫码关注云+社区

领取腾讯云代金券