轮播广告通知整体思路：

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. 图灵机（Turing Machine）

    图灵机,又称图灵计算.图灵计算机,是由数学家阿兰·麦席森·图灵(1912-1954)提出的一种抽象计算模型,即将人们使用纸笔进行数学运算的过程进行抽象,由一个虚拟的机器替代人们进行数学运算. 所谓的图 ...

  2. PHP正则表达式入门教程[转]

      思维导图 点击下图,可以看具体内容!     介绍          正则表达式,大家在开发中应该是经常用到,现在很多开发语言都有正则表达式的应用,比如javascript,java,.net,p ...

  3. Leetcode 171 Excel Sheet Column Number 字符串处理

    本质是把26进制转化为10进制 A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 class Solution ...

  4. WPF：拖动父窗口行为

    原文 WPF:拖动父窗口行为 这次只是一个快速的帖子:当我点击并拖动特定的UIElement时,我需要能够重新定位WPF窗口.目的是重新创建在标准Windows标题栏上单击和拖动的行为(在我的情况下, ...

  5. Hibernate4与hibernate3有错误的版本号的主要区别所造成的不一致

    Hibernate版本号修改 Hibernate4的修改较大仅仅有spring3.1以上版本号可以支持,Spring3.1取消了HibernateTemplate,由于Hibernate4的事务管理已 ...

  6. 一张图弄明白开源协议-GPL、BSD、MIT、Mozilla、Apache和LGPL 之间的区别

    导读 在开源软件中经常看到各种协议说明,GPL.BSD.MIT.Mozilla.Apache和LGPL. - 这些协议之间的有什么区别 - 如何选择合适的开源协议 请看下文,特作记录一篇,以供后续查看 ...

  7. OpenGL（十二） 纹理映射（贴图）

    OpenGL绘制纹理的步骤: 1. 开启纹理功能 使用glEnable(GL_TEXTURE_2D)开启2D纹理功能,使用glDisable(GL_TEXTURE_2D)关闭纹理,默认情况下纹理是关闭 ...

  8. HDOJ 2189 悼念512四川汶川大地震遇难者——来生一起走 【生成函数】

    意甲冠军:没有解释的很清楚. 策略:如果, 这是改变一个简单的生成函数. 这道题做了好久,才明确是那有毛病.还是理解的不够深刻. AC代码: #include<stdio.h> #incl ...

  9. 怎么样android app正在使用STL库

    方法: 1.在jni文件夹下新建Application.mk; 增加 APP_STL := stlport_static右边的值还能够换成以下几个: system - 使用默认最小的C++执行库,这样 ...

  10. mysql重置root密码，并设置可远程访问

    linux系统: mysqld_safe --skip-grant-tables & mysql -u root use mysql UPDATE user SET host = '%' wh ...