<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>仿淘宝首页-淘汰头条滚动效果</title>

        <script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>

        <style type="text/css">

        .box{

            margin:100px auto;

            border:1px solid #ccc;

            width:170px;

            height:42px;

            line-height:20px;

            overflow:hidden;

        }

        .box .content{

            list-style-type:none;

            margin:0;padding:0;

            margin-left:6px;

        }

        /*系统支持ie8就选line-height:16px;，但不支持opera 否则选line-height:20px;*/

        .box .content a{

            font-size:12px;

            line-height:16px;

        }

    </style>

    </head>

    <body ng-app="myApp">

        <div class="box" ng-controller="ezCtrl">

            <div id="transverseRoll">

                <div class="content" ng-repeat="item in msgArr track by $index">

                    <span ng-bind="item"></span>

                </div>

        </div>

        <script language="javascript">

            var app = angular.module("myApp", []);

            app.controller("ezCtrl", function ($scope, $http,$timeout,$interval) {

                $scope.items = [

                    {

                        con:[

                            '身高多少',

                            '体重多少',

                        ]    

                    },

                    {

                        con: [

                            '身高多少1',

                            '体重多少1',

                        ]

                    },

                    {

                        con: [

                            '身高多少2',

                            '体重多少2',

                        ]

                    }

                ]

                /**

                 * des  仿淘宝首页-淘汰头条滚动效果

                 * @param  {[type]} timer [定时器]

                 * @param {[type]}  _timer [定时器]

                 * @param {[type]}  temp [临时变量用来存储当前显示的内容]

                 * @param {[type]}  max []

                 * @param {[type]}  index [当前显示内容的索引]

                 * @param {[type]}  obj [获取滚动元素]

                 * @param {[type]}  $scope.msgArr [当前显示内容]

                 * @param {[type]}  lh [高度]

                 * @param {[type]}  speed [时间]

                */

                var startmarquee = function(lh, speed, delay) {

                    var timer = null,_timer = null,temp = [];

                    var max = $scope.items.length-1,index = 0;

                    var obj = document.getElementById("transverseRoll");

                    obj.style.marginTop = 0;

                    temp = $scope.items[index].con;

                    $scope.msgArr = temp.concat(temp);

                    var start = function() {

                        $scope.msgArr = [];//初始化

                        index++;//0,1,2

                        if (index > max) {

                            index = 0;

                        }

                        //更新显示内容

                        temp = $scope.items[index].con;

                        setTimeout(() => {

                            $scope.$apply(function(){

                                $scope.msgArr = temp.concat(temp);

                            });

                        }, 100);

                        clearInterval(timer);

                        timer = setInterval(scrolling, speed);

                        obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px";

                    }

                    var scrolling = function() {

                        if (parseInt(obj.style.marginTop) % lh != 0) {

                            obj.style.marginTop = parseInt(obj.style.marginTop) - 4 + "px";

                            if (Math.abs(parseInt(obj.style.marginTop)) >= obj.scrollHeight / 2) obj.style.marginTop = 0;

                        } else {

                            clearInterval(timer);

                            clearTimeout(_timer);

                            setTimeout(start, delay);

                        }

                    }

                    clearTimeout(_timer);

                    setTimeout(start, delay);

                }

                startmarquee(2000, 20, 1500);

            })

    </script>

    </body>

</html>

作者：smile.轉角

QQ：493177502

【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果的更多相关文章

  1. 3.使用Selenium模拟浏览器抓取淘宝商品美食信息

    # 使用selenium+phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏览器翻页,并 ...

  2. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  3. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  4. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  5. Selenium+Chrome/phantomJS模拟浏览器爬取淘宝商品信息

    #使用selenium+Carome/phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏 ...

  6. Selenium模拟浏览器抓取淘宝美食信息

    前言: 无意中在网上发现了静觅大神(崔老师),又无意中发现自己硬盘里有静觅大神录制的视频,于是乎看了其中一个,可以说是非常牛逼了,让我这个用urllib,requests用了那么久的小白,体会到sel ...

  7. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  8. 使用selenium模拟浏览器抓取淘宝信息

    通过Selenium模拟浏览器抓取淘宝商品美食信息,并存储到MongoDB数据库中. from selenium import webdriver from selenium.common.excep ...

  9. angularJs中怎么模拟jQuery中的this？

    最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...

随机推荐

  1. 为什么越来越少的人用jQuery

    摘要:JQuery该退役了. 原文:为什么越来越少的人用jQuery 作者:Lemonade Fundebug经授权转载,版权归原作者所有. 最早期的开发,大多都使用jQuery,它给我们带来了很多的 ...

  2. mapper加载的3种方法

    <!-- mapper加载有3种方法: 1:通过resource或url加载单个mapper 2:通过mapper接口类名加载单个mapper 3:通过package批量加载多个mapper(推 ...

  3. Eslint使用（webpack中使用）

    一.安装 npm i -D eslint npm i babel-eslint \ eslint-config-airbnb \ // Airbnb的编码规范是在业界非常流行的一套规范 eslint- ...

  4. vuejs-指令详解

    v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中,代码如下: ...

  5. 洛谷P1792 [国家集训队]种树(链表 贪心)

    题意 题目链接 Sol 最直观的做法是wqs二分+dp.然而还有一种神仙贪心做法. 不难想到我们可以按权值从大到小依次贪心,把左右两边的打上标记,但这显然是错的比如\(1\ 231\ 233\ 232 ...

  6. [C语言]易错知识点、小知识点复习(1)

    1. 计算机只能识别由0和1组成的二进制指令,需要将用高级语言(如C.C++)编写的源程序(.c..cpp)编译成二进制目标文件(.obj).一个程序可以根据需要写在不同的文件里,编译是以文件为单位进 ...

  7. Unity3D手机斗地主游戏开发实战（04）_出牌判断大小

    之前我们实现了叫地主.玩家和电脑自动出牌主要功能,但是还有个问题,出牌的时候,没有有效性检查和比较牌力大小.比如说,出牌3,4,5,目前是可以出牌的,然后下家可以出任何牌如3,6,9. 问题1:出牌检 ...

  8. 系统调用syscall---用户态切换到内核态的唯一途径

    1.应用程序有时需要内核协助完成一些处理,但是应用程序不可能执行内核代码(主要是安全性考虑), 那么,应用程序需要有一种机制告诉内核,它现在需要内核的帮助,这个机制就是系统调用. 2.系统调用的本质是 ...

  9. ThinkPHP框架知识

    php框架 一.真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格 ...

  10. Javascript 对象 - 字符串对象

    字符串对象 字符串对象是JavaScript中比较常见的一种基本数据类型,他封装了一个字符串,并且提供了相应的方法.例如连接字符串.取字符串.分割字符串等.JavaScript中字符串是不可变的,原始 ...