轮播广告通知整体思路：

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. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  2. AvalonDock的基本用法

    原文:AvalonDock的基本用法         AvalonDock是优秀的开源项目,用于创建可停靠式布局,能够在WPF中方便开发出类似VS2010的软件界面.对于复杂的软件系统,大量控件的使用 ...

  3. TL9000 电信业质量体系管理标准

    1.背景介绍:1987年国际标准化组织创立了ISO9000标准.标准发布后,在世界范围内得到了迅速的推广和广泛的认可,成为全世界衡量质量管理水平与质量保证能力的公共标准.九十年代,美国三大汽车公司和航 ...

  4. PYC文件简介

    PYC文件简介¶ 不说废话,这里说的pyc文件就是 Python 程序编译后得到的字节码文件 (py->pyc). 基本格式¶ pyc文件一般由3个部分组成: 最开始4个字节是一个Maigc i ...

  5. abp框架(aspnetboilerplate)扩展系统表

    以OrganizationUnit为例,进行扩展,加入IsUse属性 1.创建一个新类,比如ExtendedOrganizationUnit,继承OrganizationUnit public cla ...

  6. Java之线程池管理

    JDK5后建议使用ExecutorService与Excutors来创建与管理线程池, 不再建议直接使用Thread. 开始不明白原因, 今天知道结果了:使用Thread.currnetThread. ...

  7. UWP 裁切 SoftwareBitmap

    //设置源图ImageSource为WriteableBitmap类型 BitmapImage himage = this.imageTarget2.Source as BitmapImage; Ra ...

  8. delphi2009(10,xe)下indy10发送utf8字符串

    最近实现一个功能,使用delphi2009以TCP调用Java端的接口,接口要求先发送字符串的长度,然后再发送字符串内容,并且字符串要求是utf8格式的 调试了好长时间,才终于发现解决办法,或者说发现 ...

  9. 在Winform窗体中使用WPF控件（附源码）

    原文:在Winform窗体中使用WPF控件(附源码) 今天是礼拜6,下雨,没有外出,闲暇就写一篇博文讲下如何在Winform中使用WPF控件.原有是我在百度上搜索相关信息无果,遂干脆动手自己实现. W ...

  10. ToolBarTray与ToolBarPanel的区别

    ToolBarTray 类:表示处理ToolBar 的布局的容器.用于ToolBar控件模板之中. e.g. <ToolBarTray> <ToolBar> <Butto ...