【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果
<!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模拟淘宝首页-淘宝头条滚动效果的更多相关文章
- 3.使用Selenium模拟浏览器抓取淘宝商品美食信息
# 使用selenium+phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏览器翻页,并 ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）
我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- Selenium+Chrome/phantomJS模拟浏览器爬取淘宝商品信息
#使用selenium+Carome/phantomJS模拟浏览器爬取淘宝商品信息 # 思路: # 第一步:利用selenium驱动浏览器,搜索商品信息,得到商品列表 # 第二步:分析商品页数,驱动浏 ...
- Selenium模拟浏览器抓取淘宝美食信息
前言: 无意中在网上发现了静觅大神(崔老师),又无意中发现自己硬盘里有静觅大神录制的视频,于是乎看了其中一个,可以说是非常牛逼了,让我这个用urllib,requests用了那么久的小白,体会到sel ...
- 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- 使用selenium模拟浏览器抓取淘宝信息
通过Selenium模拟浏览器抓取淘宝商品美食信息,并存储到MongoDB数据库中. from selenium import webdriver from selenium.common.excep ...
- angularJs中怎么模拟jQuery中的this？
最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...
随机推荐
- MVC模式-----struts2框架（2）
MVC模式-----struts2框架 第一个struts2程序 struts2框架是通过一个过滤器将struts2集成到Web应用程序中的,这个过滤器的对象是StrutsprepareAndExec ...
- vue过滤器用法实例分析
过滤器: vue提供过滤器: capitalize uppercase currency.... ? 1 2 3 <div id="box"> {{msg|cu ...
- vue2+webpack 移动生态 常用依赖
1.脚手架:官方的vue-cli已经很方便了 2.路由:vue-router : https://router.vuejs.org/zh-cn/essentials/named-routes.html ...
- angular 过滤器（日期转换，时间转换，数据转换等）
(function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...
- Linux 安装 jdk8
切换目录 cd /usr 创建目录 mkdir java cd java 下载 jdk rz 或者 ftp 都行,只要能成功上传 解压 tar zxvf jdk-8u181-linux-x64.tar ...
- Multithreading C++ Out of Core Sotring for Massive Data|多线程C++的大规模数据外部排序
先说一下,这个其实是我为实现PantaRay或者是类似Dreamworks的Out of Core点云GI的技术储备,为大规模点云光线跟踪所准备的第一步.在实际的应用中,int类型会被64bit的ui ...
- <1>Linux日志查找方法
Linux日志查找方法 适用于测试,开发,运维人员,用来查找Linux服务器问题的一般方法,比较实用,如果有更好的办法可以一块讨论,欢迎大神们来指导哈!!! 进入正题 第一步.通过Xshell登录服务 ...
- Android权限之动态权限
安卓系统的权限管理机制从API 23 (也就是Android 6.0 又叫做 Android M,)之后发生了比较大的改变,在一些比较危险的权限上要求必须申请动态权限,即使你在AndroidMainf ...
- Flutter 布局（五）- LimitedBox、Offstage、OverflowBox、SizedBox详解
本文主要介绍Flutter布局中的LimitedBox.Offstage.OverflowBox.SizedBox四种控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Limited ...
- 《高性能JavaScript》--读书笔记
第一章 加载和运行 延迟脚本 defer 该属性表明脚本在执行期间不会影响到页面的构造,脚本会先下载但被延迟到整个页面都解析完毕后再运行.只适用于外部脚本 <script src="j ...