<!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. centos7中使用LVM管理磁盘和挂载磁盘

    centos7使用LVM管理一块新的磁盘 注意!文中凡是带#的都是命令标志. 一些重要概念: LV(Logical Volume)- 逻辑卷, VG(Volumne Group)- 卷组, PV(Ph ...

  2. U盘装系统之winpe中常用安装win7的方法和备份（2013-01-15-bd 写的日志迁移

    首先到网上去下一个制作U盘启动的的软件比如老毛桃.大白菜.电脑城制作u盘启动软件[其实他们的装机界面和工具那些都差不多], 我是用的老毛桃至于制作流程你可以看它的视频你往下拉就可以看见,或者看说明,自 ...

  3. Olympic Class Ships【奥林匹克级邮轮】

    Olympic Class Ships You probably know about the Titanic, but it was actually just noe of three state ...

  4. HDU4616 树形DP+三次深搜

    这题和之前那个HDU2616有着奇妙的异曲同工之处..都是要求某个点能够到达的最大权重的地方... 但是,这题加了个限制,要求最多只能够踩到C个陷阱,一单无路可走或者命用光了,就地开始清算总共得分之和 ...

  5. java模式及其应用场景

    最经典的java 23种设计模式及具体例子(转发) 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容 ...

  6. lambda表达式与函数接口的关系以及使用案例

    lambda表达式与函数式接口是结合使用的. 函数式接口:接口中只有一个抽象方法的接口,其中可以包括default修饰,static 修饰的实例方法.函数式接口可以在接口上添加@FuncationIn ...

  7. Careercup - Microsoft面试题 - 6751316000899072

    2014-05-12 07:10 题目链接 原题: Write a thread safe data structure such that there could be only one write ...

  8. 12、jQuery知识总结-2

    1.避免冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式 <html> <head> <script type="text/javascript ...

  9. 【Two Sum】cpp

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  10. putty的基本使用

    1.输入你要连接的目标的IP地址,输入你要给它取的名字,点击保存 2.选中你保存的会话,点击打开,即可打开会话 3.输入你连接的目标的用户账号,回车,再输入密码.即可正常使用. 4.编码的设置 在出现 ...