轮播广告通知整体思路：

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. 由Maximum Gap，对话桶排序，基数排序和统计排序

    一些非比较排序 在LeetCode中有个题目叫Maximum Gap.是求一个非排序的正数数列中按顺序排列后的最大间隔.这个题用桶排序和基数排序都能够实现.以下说一下桶排序.基数排序和计数排序这三种非 ...

  2. cocos2d-x 源代码分析 ： Ref （CCObject） 源代码分析 cocos2d-x内存管理策略

    从源代码版本号3.x.转载请注明 cocos2d-x 总的文件夹的源代码分析: http://blog.csdn.net/u011225840/article/details/31743129 1.R ...

  3. EF延迟加载LazyLoading

    优点 只在需要的时候加载数据,不需要预先计划,避免了各种复杂的外连接.索引.视图操作带来的低效率问题 缺陷:多次与DB交互,性能降低 阻止延迟加载解决方案:1.ToList(),返回的东西是个内存级的 ...

  4. MVC 异步调用

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  5. Django 创建超级管理员失败

    django.db.utils.DataError: (1406, "Data too long for column 'gender' at row 1") 解决方案 在执行mi ...

  6. 1. linux系统简介

    一.Linux是什么 linux位于系统调用和内核的那两层,直观上来看,我们使用的操作系统还包含一些在其上运行的应用程序,包含文本编译器,浏览器,电子邮件. 二.Linux与windows的区别 1. ...

  7. Qt PNG 背景透明

    本文主要是解决Qt中QGraphicsAbstractShapeItem,QPixmap,QPainter等组件的透明化显示问题. 在Qt中定义了一个常量,用于设置透明的颜色,即Qt::transpa ...

  8. RedHat 7.3 修改ASM磁盘绑定路径

    RedHat 7中,很多命令发生了改变,绑定磁盘不再是start_udev,而是udevadm,具体绑定方式,请看另一篇博文: http://www.cnblogs.com/zx3212/p/6757 ...

  9. 关于DDD领域驱动设计的理论知识收集汇总

    原文:关于DDD领域驱动设计的理论知识收集汇总 最近一直在学习领域驱动设计(DDD)的理论知识,从网上搜集了一些个人认为比较有价值的东西,贴出来和大家分享一下: 我一直觉得不要盲目相信权威,比如不能一 ...

  10. ASP.NET获取客户端、服务器端基础信息

    1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHostN ...