<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

html,body{

    height:100%;

}

*{margin: 0;padding: 0;box-sizing:border-box}

#scrollLeft{

        width: 100%;

        height: 100%;

        overflow: scroll;

        background:white;

        display: none;

        z-index: 999;

        top: 0;

        position: fixed;

}

#scrollLeft div{

        height: 200px;

        border-bottom: 1px solid black;

        background: yellow

}

#scrollLeft div:nth-child(2n){

        background: green;

}

</style>

<script src="jquery1.42.min.js"></script>

</head>

<body>

<div id="search" style="height: 100px;text-align:center; line-height: 100px;font-size: 30px;border: 2px solid black;position: absolute;top: 0;left: 0;width: 100%">搜索</div>

<div id="scrollLeft">

<input type="button" id="retu" value="<<返回" style="width: 100%;height: 100px;font-size: 50px;text-align: left; "><br>

<div>11111111111111111</div>

<div>22222222222222222</div>

<div>33333333333333333</div>

<div>44444444444444444</div>

<div>55555555555555555</div>

<div>66666666666666666</div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<span></span>

</div>

<script type="text/javascript">

$('#search').click(function(){

	var screenWidth=$(window).width();

	$('#scrollLeft').css('left',screenWidth+"px").show().animate({'left':'0'},400);

	$(this).animate({'left':'-200px'},400)

})

$("#retu").click(function(){

	var screenWidth=$(window).width();

	$('#scrollLeft').animate({'left':screenWidth+"px"},400);

	$('#search').animate({'left':'0'},400);

})

</script>

</body>

</html>

　　

模仿原生淘宝app点击搜索时的页面滑动效果的更多相关文章

  1. Appium启动淘宝APP，输入搜索内容

    # -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...

  2. 淘宝App直播宝贝数据采集

    淘宝App直播宝贝数据采集   前段时间,有人问我关于淘宝app直播频道宝贝如何采集?我尝试了下可以获取的到,模拟器登录不了淘宝,这里有一个坑就是,模拟器有时候会跳到登录页面,登录不了淘宝: 一.用A ...

  3. Appium+python自动化3-启动淘宝app

    前言 前面两篇环境已经搭建好了,接下来就是需要启动APP,如何启动app呢?首先要获取包名,然后获取launcherActivity.获取这两个关键东西的方法很多,这里就不一一多说,小伙伴们可以各显神 ...

  4. Appium+python自动化3-启动淘宝app【转载】

    前言 前面两篇环境已经搭建好了,接下来就是需要启动APP,如何启动app呢?首先要获取包名,然后获取launcherActivity.获取这两个关键东西的方法很多,这里就不一一多说,小伙伴们可以各显神 ...

  5. appium实例1：启动淘宝app

      1.在android-sdk里面双击SDK-manager,下载buidl-tools 2.勾选build-tools,随便选一个版本,我这里选的是24的版本 3.下载完成后,在D:\androi ...

  6. 淘宝APP消息推送模型

    为什么到了2020年,"统一推送联盟"依旧无法起显著作用? - 知乎 https://www.zhihu.com/question/370632447 https://mp.wei ...

  7. Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；

    仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...

  8. Appium（Python）驱动手机淘宝App

    请注意操作步骤: 1. 用数据线连接手机, 打开开发者模式, 并赋予相关权限, 并保持不锁屏状态: 2. 启动Appium桌面服务端: 3. 运行程序: 首次运行, Appium会在手机上安装3个Ap ...

  9. #淘宝#复制分享宝贝内容，打开淘宝APP，自己主动弹出宝贝提示信息

    场景描写叙述: 淘宝复制连接,分享出去,比方拷贝到QQ好友.微信好友,一个宝贝信息.然后你朋友长按复制你分享它了的这个宝贝.当然打开手机淘宝时.自己主动会跳出宝贝的信息,点击确定能够直接进入宝贝详情 ...

随机推荐

  1. python3爬虫之Urllib库（一）

    上一篇我简单说了说爬虫的原理,这一篇我们来讲讲python自带的请求库:urllib 在python2里边,用urllib库和urllib2库来实现请求的发送,但是在python3种在也不用那么麻烦了 ...

  2. 51nod 1202 不同子序列个数（计数DP）

    1202 子序列个数 基准时间限制:1 秒 空间限制:131072 KB 分值: 40      子序列的定义:对于一个序列a=a[1],a[2],......a[n].则非空序列a'=a[p1],a ...

  3. docker 学习（2）

    docker容器中安装vim ubuntu 中默认未装vim,docker run ubuntu vim 出现: container_linux.go:247: starting container ...

  4. python资源大全2

    原文链接 网络 Scapy, Scapy3k: 发送,嗅探,分析和伪造网络数据包.可用作交互式包处理程序或单独作为一个库. pypcap, Pcapy, pylibpcap: 几个不同 libpcap ...

  5. 版本控制之GitHub — — 第一步的理解

    GitHub是时下最流行的版本控制的一门“技术”,此之前svn(subversion)也是同样的作用. 至于版本控制:Git是分布式的,而svn是中心式的(或者叫集中式的)版本控制系统,这是两者之间理 ...

  6. spark测试几个hadoop的典型例子

    1.求每年的最高温度数据格式如下: 0067011990999991950051507004888888889999999N9+00001+999999999999999999999900670119 ...

  7. POJ 2771 Guardian of Decency （二分图最大点独立集）

    Guardian of Decency Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 6133   Accepted: 25 ...

  8. Redis实现之复制（一）

    复制 在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主服务器(master),而对主服务器 ...

  9. Django基于Pycharm开发之四[关于静态文件的使用,配置以及源码分析]（原创）

    对于django静态文件的使用,如果开发过netcore程序的开发人员,可能会比较容易理解django关于静态文件访问的设计原理,个人觉得,这是一个middlerware的设计,但是在django中我 ...

  10. Oracle数据库迁移--->从Windows到Linux

    I did a practice to migrate the oracle database from windows to linux operation system. The followin ...