js学习总结----小案例之跑马灯

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
        }
        #box{
            margin:50px auto;
            padding:0 10px;
            width:1000px;
            height:35px;
            line-height:35px;
            border:1px dashed green;
            background:lightgreen;
        }
        #box #wrap{
            height:35px;
            overflow:hidden;
            white-space:nowrap;
        }
        #box span{
            color:red;
            font-weight:bold;
            font-size:16px;
        }
        #wrap div{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <div id=‘wrap‘>
            <div id=‘conBegin‘>
                <span>通知:</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引
            </div>
            <div id=‘conEnd‘>
                <span>通知:</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越‘简单粗暴‘了,并批判这些公司引
            </div>
        </div>

    </div>

    <script>
        ~function(){
            var box = document.getElementById(‘box‘);
            var conBegin = document.getElementById(‘conBegin‘);
            var wrap = document.getElementById(‘wrap‘);
            var conBegin_width = getCss(conBegin,‘width‘);//之前封装好的获取css样式的方法
            var timer = window.setInterval(move,10)
            function move(){
                //优化前的代码
                // var curLeft = wrap.scrollLeft;
                // wrap.scrollLeft = curLeft +1;
                // var newLeft = wrap.scrollLeft;
                // if(curLeft == newLeft){
                // //利用了scrollLeft是存在最大值的思想,在累加1之前获取一个值,在累加之后获取一个值,如果两个值相等了,说明已经达到最大值了,所以清除定时器
                //     // window.clearInterval(timer)
                //     wrap.scrollLeft = 0//这样虽然从头开始了,但是会导致会闪烁一下。
                // }
                //优化后的代码  使用两个一样内容的div避免闪烁
                wrap.scrollLeft++;
                var curLeft = wrap.scrollLeft;
                if(wrap.scrollLeft >= conBegin_width){
                    wrap.scrollLeft = 0
                }
            }
            //鼠标划过停止
            box.onmouseover = function(){
                window.clearInterval(timer);
            }
            box.onmouseout = function(){
                timer = window.setInterval(move,10)
            }
        }()

    </script>
</body>
</html>
时间: 2024-10-09 05:26:38

js学习总结----小案例之跑马灯的相关文章

JS高级---闭包小案例

闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 console.log(f1()); //11 console.log(f1()); //11 函数模式的闭包 //函数模式的闭包 function f2() { var num = 10; return function () { num++; return num; } } var ff = f2();

JS混入(mix-in)小案例

function mix(o1,o2){ <!-- 在jq中该函数命名为extend --> for(var k in o2){ o1[k]=o2[k]; } } var o1={name:'张三'}: var o2={age:19}: mix(o1,o2); 这个过程是将o2的成员一 一加到o1中,使得o1具有两个对象的属性.

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

纯css3跑马灯demo

我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯. 1.基本思路 这次demo主要是通过css3中的animation动画实现,借助transform中的translateY属性的增减实现dom位置的变化,让它跑起来. ---------------------------html--------------------------

js简单跑马灯案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; } #bian{ width: 300px; height: 300px; margin:0 auto

javascript入门视频第一天 小案例制作 零基础开始学习javascript

JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此,小强老师给大家写了这篇入门的javascript文章.从零基础开始学习js,使大家入门更简单,希望大家喜欢.JavaScript是一种脚本语言. 也是我们web网络中最为流行一种脚本语言.脚本语言:     1.不是独立存在的.需要依附.js就是依附在浏览器中.     2.脚本语言也是语言,也有

常见的跑马灯 动图 抽奖的案例

//抽奖的案例 <script type="text/javascript"> var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"; var alldataarr = alldata.split(","); var num = alldataarr.length - 1; var timer; function start() { clearInter

node.js(小案例)_实现学生信息增删改

一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项目的入口: /** * app.js 入门模块 * 职责: * 创建服务 * 做一些服务相关配置 * 模板引擎 * body-parser 解析表单 post 请求体 * 提供静态资源服务 * 挂载路由 * 监听端口启动服务 */ var express = require('express') v

Vue教程02(跑马灯效果案例) &#253148;

原文: http://blog.gqylpy.com/gqy/423 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我