轮播广告通知整体思路：

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>

(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知的更多相关文章

  1. 原生JavaScript实现焦点图轮播

    不管是高校的网站还是电商的页面,焦点图的切换和轮播应该是一项不可或缺的应用.今天把焦点图轮播制作的技术要点做下笔记,以供日后查看. 一.结构层(HTML) 焦点图的HTML结构很简单,就是一个父容器( ...

  2. (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例

    原生js实现放烟花效果,点击鼠标,然后随机向四周扩散,! 思路: 1.首先烟花是五颜六色的,所以我们先写一个随机颜色的函数: 2.创建一个制造烟花的构造函数,第一个参数为元素,第二参数为初始x轴位置, ...

  3. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  4. Android使用ViewPager做轮播

    ViewPager.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 ...

  5. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  6. React Native 如何做轮播图 react-native-swiper

    //:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...

  7. 利用RecyclerView实现无限轮播广告条

    代码地址如下:http://www.demodashi.com/demo/14771.html 前言: 公司产品需要新增悬浮广告条的功能,要求是可以循环滚动,并且点击相应的浮条会跳转到相应的界面,在实 ...

  8. 最简单的轮播广告(原生JS)

    改变每个图片的opacity属性:来自学友刘斌 素材图片: <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. Delphi读取文件属性

    Read File Detailed Properties https://www.board4all.biz/threads/read-file-detailed-properties.655787 ...

  2. Akka边学边写（1）-- Hello, World!

    Akka Akka是什么呢?直接引用Akka站点上面的描写叙述吧: Akka is a toolkit and runtime for building highly concurrent, dist ...

  3. Android - 小的特点 - 使用最新版本ShareSDK手册分享（分享自己定义的接口）

    前太实用Share SDK很快分享,但官员demo快捷共享接口已被设置死,该公司的产品还设计了自己的份额接口,这需要我手动共享. 读了一堆公文,最终写出来,行,废话,进入主题. 之前没实用过Share ...

  4. 【Struts2学习笔记（3）】至Action注入属性值

    (1)有属性注入? 当一些属性不适合固定写入时适合使用这样的方法,对于一些使用特频繁的类或者方法,非常多类都会用到,那么使用属性注入会节省很多其它的力气.并且在设计的时候就能够提早的把该属性给定义出来 ...

  5. bigdata_zookeeper 可视化界面zkui

    安装zkui zookeeper节点的可视化界面有很多种,我使用的是zkui,比较直观,而且可以导入文件,他的Git地址:                     https://github.com ...

  6. Xamarin 弹窗

    包括通知类弹窗和选择类弹窗,以下是安卓手机的显示效果 关键代码 DisplayAlert("Alert", "You have been alerted", & ...

  7. C# Windows服务以指定用户运行

    参考一下 https://bbs.csdn.net/topics/330151879 服务程序以Local System安装运行没问题,但用这个账户运行的服务无法访问局域网共享资源,比较麻烦,所以想指 ...

  8. linux下计划任务学习记录

    0x01 计划任务简介 linux 中计划任务主要分为”循环执行”和”只执行一次”两种,分别对应的时 crond 服务 和 atd 服务: 0x02 只执行一次的计划任务 0x02.1 atd 服务说 ...

  9. eclipse 插件编写（一）

    由于项目开发进程中有一些重复性的代码进行编写,没有任何业务逻辑,粘贴复制又很麻烦且容易出错,故想起做一个eclipse插件来满足一下自己的工作需要,同时记录一下,以供以后参考与共同学习.本文主要讲解一 ...

  10. phpstudy+phpstorm+debug

    文:phpstudy+phpstorm+debug 一.配置前说明: 1.phpStudy集成了XDebug扩展,所以不用单独下载XDebug. 2.打开XDebug扩展:其它选项菜单 > PH ...