轮播广告通知整体思路：

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. codeforces Round #259(div2) D解决报告

    D. Little Pony and Harmony Chest time limit per test 4 seconds memory limit per test 256 megabytes i ...

  2. AutoEncoder一些实验结果，并考虑

    看之前Autoencoder什么时候,我做了一些练习这里:http://ufldl.stanford.edu/wiki/index.php/Exercise:Sparse_Autoencoder .其 ...

  3. CefSharp For WPF自定义右键菜单栏

    原文:CefSharp For WPF自定义右键菜单栏 初始化 <!--浏览器--> <cefSharpWPF:ChromiumWebBrowser Name="webBr ...

  4. symfony中doctrine常用属性

    转 http://docs.doctrine-project.org/projects/doctrine-orm/en/latest/reference/basic-mapping.html 1. d ...

  5. iPhone开发笔记（20）EGOImageView的使用方法及注意事项

    EGOImageView是一种实现网络图片的异步加载和缓存的第三方类库,具有相同功能的第三方类库还有SDWebImage.但是相比两个类库的安装和使用来说,EGOImageView更简单一些,下面就介 ...

  6. ios 调用系统发短信以及打电话功能

    先介绍一种最简单的方法: 调用打电话功能 [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"tel://100 ...

  7. IOS开发之把 JSON 数据转化成 Arrays 或者 Dictionaries

    1 前言通过 NSJSONSerialization 这个类的 JSONObjectWithData:options:error:方法来实现,把JSON 数据解析出来放在数据或者字典里面保存. 2 代 ...

  8. 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II

    原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...

  9. java模拟post请求发送json数据

    import com.alibaba.fastjson.JSONObject; import org.apache.http.client.methods.CloseableHttpResponse; ...

  10. UWP入门（四）--设置控件样式

    原文:UWP入门(四)--设置控件样式 官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观. 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 可分享至不同e ...