<!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. forEach 以及 IE兼容

      语法 array.forEach(function(currentValue, index, arr), thisValue) 参数 参数 描述 function(currentValue, in ...

  2. Shell脚本使用汇总整理——文件夹及子文件备份脚本

    Shell脚本使用汇总整理——文件夹及子文件备份脚本 Shell脚本使用的基本知识点汇总详情见连接: https://www.cnblogs.com/lsy-blogs/p/9223477.html ...

  3. 三 python并发编程之多线程-理论

    一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  4. 如何在C#中调试LINQ查询

    原文:How to Debug LINQ queries in C# 作者:Michael Shpilt 译文:如何在C#中调试LINQ查询 译者:Lamond Lu 在C#中我最喜欢的特性就是LIN ...

  5. Cuba studio框架中使用thymeteaf模板时中文乱码

    最近公司换了Cuba这个orm框架,框架中使用了thymeteaf模板技术,发现在html中解析汉字一直是乱码的存在 一直以为是tomcat的问题但是tomcat的server.xml,项目中的web ...

  6. 用NPOI完成公司任务（主要就是导入导出操作）

    注意要先添加程序集的引用 导出到excel: public override IWorkbook writeExecl(string filePath, DataTable dt) { if (Fil ...

  7. 4 Template层-CSRF

    1.csrf 全称Cross Site Request Forgery,跨站请求伪造 某些恶意网站上包含链接.表单按钮或者JavaScript,它们会利用登录过的用户在浏览器中的认证信息试图在你的网站 ...

  8. TCP/IP网络编程之多线程服务端的实现（二）

    线程存在的问题和临界区 上一章TCP/IP网络编程之多线程服务端的实现(一)的thread4.c中,我们发现多线程对同一变量进行加减,最后的结果居然不是我们预料之内的.其实,如果多执行几次程序,会发现 ...

  9. 随手正则写的 CSDN【只看楼主】功能

    写这个的时候居然没有看到原来CSDN已经有这个功能了,写完代码了突然发现原来早就已经有了. 现把代码贴出来吧,虽然有很多解析HTML的开源类库如:http://htmlagilitypack.code ...

  10. PyInstaller打包python脚本

    用python写的工具写好了,想打包然后发给测试同事使用,最后选择了PyInstaller,支持Windows.Linux.OS X,支持打包成一个文件夹或单个EXE文件.   我是直接在线安装的,在 ...