<!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. 零基础入门Python实战:四周实现爬虫网站 Django项目视频教程

    点击了解更多Python课程>>> 零基础入门Python实战:四周实现爬虫网站 Django项目视频教程 适用人群: 即将毕业的大学生,工资低工作重的白领,渴望崭露头角的职场新人, ...

  2. vue 组件的书写

    简单的来说是 vue组件最核心的就是props和自定义函数,来实现组件的开发 最简单的一个组件 子组件如下: <template> <div class="bgClass& ...

  3. tp5 修改自带success或error跳转模板页面

    tp5 修改自带success或error跳转模板页面 我们在使用tp5或者tp3.2的时候,用的成功或者失败跳转提示页面一般是用框架的.在后续开发过程中,根据实际项目需要,也是可以更改的,在此分享一 ...

  4. python变量声明及简单数据类型

    一.python声明变量 变量的命名和使用 # 在Python中使用变量时,需要遵守一些规则和指南. # 违反这些规则将引发错误,而指南旨在让你编写的代码更容易阅读和理解.请务必牢记下述有关变量的规则 ...

  5. python学习——StringIO和BytesIO

    StringIO 很多时候,数据读写不一定是文件,也可以在内存中读写. StringIO顾名思义就是在内存中读写str. 要把str写入StringIO,我们需要先创建一个StringIO,然后,像文 ...

  6. 格雷码Gray Code详解

    格雷码简介 在一组数的编码中,若任意两个相邻的代码只有一位二进制数不同,则称这种编码为格雷码(Gray Code),另外由于最大数与最小数之间也仅一位数不同,即“首尾相连”,因此又称循环码或反射码.格 ...

  7. UVA - 753 A Plug for UNIX（网络流）

    题意 给定一些插头设备和插座,有一些方法可以把其中一些插头变成另一种插头.求无法匹配插座的插头设备个数. 题解 用\(map\)给每个字符串标号为\(a_i\)和\(b_i\). 读入每种改变插头的方 ...

  8. requests中文页面乱码解决方案【转】

    requests中文页面乱码解决方案!   请给作者点赞 --> 原文链接 Python中文乱码,是一个很大的坑,自己不知道在这里遇到多少问题了.还好通过自己不断的总结,现在遇到乱码的情况越来越 ...

  9. Python文件与异常处理

    文件读写 使用python的BIF(build in function)open()进行文件读写操作 # 1.打开文件 data = open(file_name,'w') # 读取模式有很多种,主要 ...

  10. P3376 【模板】网络最大流dinic算法

    P3376 [模板]网络最大流 题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点 ...