<!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. linux系统监控工具glances

    glances linux系统自带了很多系统性能监控工具,如top,vmstat,iftop等等,还有一款监视工具glances,它能把其他几个监控的指标都集于一身.Glances是一个相对比较新的系 ...

  2. 用随机森林分类器和GBDT进行特征筛选

    一.决策树(类型.节点特征选择的算法原理.优缺点.随机森林算法产生的背景) 1.分类树和回归树 由目标变量是离散的还是连续的来决定的:目标变量是离散的,选择分类树:反之(目标变量是连续的,但自变量可以 ...

  3. Vue钩子函数生命周期实例详解

    vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...

  4. SourceTree 跳过登录注册,直接使用

    SourceTree下载安装后,运行程序会要求你登录或注册账号才能使用, 然而登录或注册基本都收不到服务器的响应 (在国外嘛,安全起见),于是卡在此处无法使用了. 下面就来介绍一下跳过这尴尬环节的方法 ...

  5. 06.VUE学习之非常实用的计算属性computed实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. Thinkphp5中的Validate验证器的使用

    更多笔记: http://note.youdao.com/noteshare?id=e97a5df64888f27d912b3e966b9ec297&sub=web1520841813815 ...

  7. pandas知识点（汇总和计算描述统计）

    调用DataFrame的sum方法会返还一个含有列的Series: In [5]: df = DataFrame([[1.4,np.nan],[7.1,-4.5],[np.nan,np.nan],[0 ...

  8. requests模块高级

    requests模块高级 cookie cookie: 基于用户的用户数据 -需求:爬取用户的豆瓣网的个人页面数据 cookie作用:服务器端使用cookie来记录客户端的状态信息 实现流程: 1.执 ...

  9. A1012 The Best Rank (25)（25 分）

    A1012 The Best Rank (25)(25 分) To evaluate the performance of our first year CS majored students, we ...

  10. 3 ways of including JavaScript in HTML

    Code written in JavaScript must be executed from a document written in HTML. There are three ways of ...