模仿原生淘宝app点击搜索时的页面滑动效果
<!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点击搜索时的页面滑动效果的更多相关文章
- Appium启动淘宝APP，输入搜索内容
# -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...
- 淘宝App直播宝贝数据采集
淘宝App直播宝贝数据采集 前段时间,有人问我关于淘宝app直播频道宝贝如何采集?我尝试了下可以获取的到,模拟器登录不了淘宝,这里有一个坑就是,模拟器有时候会跳到登录页面,登录不了淘宝: 一.用A ...
- Appium+python自动化3-启动淘宝app
前言 前面两篇环境已经搭建好了,接下来就是需要启动APP,如何启动app呢?首先要获取包名,然后获取launcherActivity.获取这两个关键东西的方法很多,这里就不一一多说,小伙伴们可以各显神 ...
- Appium+python自动化3-启动淘宝app【转载】
前言 前面两篇环境已经搭建好了,接下来就是需要启动APP,如何启动app呢?首先要获取包名,然后获取launcherActivity.获取这两个关键东西的方法很多,这里就不一一多说,小伙伴们可以各显神 ...
- appium实例1：启动淘宝app
1.在android-sdk里面双击SDK-manager,下载buidl-tools 2.勾选build-tools,随便选一个版本,我这里选的是24的版本 3.下载完成后,在D:\androi ...
- 淘宝APP消息推送模型
为什么到了2020年,"统一推送联盟"依旧无法起显著作用? - 知乎 https://www.zhihu.com/question/370632447 https://mp.wei ...
- Android仿淘宝继续上拉进入商品详情页的效果，使用双Fragment动画切换；
仿淘宝继续上拉进入商品详情页的效果,双Fragment实现: 动画效果: slide_above_in.xml <?xml version="1.0" encoding=&q ...
- Appium（Python）驱动手机淘宝App
请注意操作步骤: 1. 用数据线连接手机, 打开开发者模式, 并赋予相关权限, 并保持不锁屏状态: 2. 启动Appium桌面服务端: 3. 运行程序: 首次运行, Appium会在手机上安装3个Ap ...
- #淘宝#复制分享宝贝内容，打开淘宝APP，自己主动弹出宝贝提示信息
场景描写叙述: 淘宝复制连接,分享出去,比方拷贝到QQ好友.微信好友,一个宝贝信息.然后你朋友长按复制你分享它了的这个宝贝.当然打开手机淘宝时.自己主动会跳出宝贝的信息,点击确定能够直接进入宝贝详情 ...
随机推荐
- pandas库Series类型与基本操作
pandas读取excel的类型是dataFrame,然后提取每一列是一个Series类型 Series类型包括index和values两部分 a = pd.Series({'a':1,'b':5}) ...
- Bomb HDU - 3555 （数位DP）
Bomb HDU - 3555 (数位DP) The counter-terrorists found a time bomb in the dust. But this time the terro ...
- DFS：POJ1088-滑雪（记忆化搜索）
题目: 滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 97666 Accepted: 37055 Description ...
- 笔记-Python-cProfile
笔记-Python-cProfile 1. 简介python官方提供了cProfile和profile对程序进行性能分析,建议使用cProfile; cProfile:基于lsprof的用C语言实现的 ...
- redis 之相关命令
为什么缓存数据库更要首选redis?如何使用redis? 一.使用缓存数据库为什么首选用redis? 我们都知道,把一些热数据存到缓存中可以极大的提高速度,那么问题来了,是用Redis好还是Memca ...
- mongoTemplate学习笔记
mongoTemplate的andExpression表达式 Aggregation<Post> agg = Aggregation.newAggregation( Record.clas ...
- 关于mongodb的安装运行
最近在学习node.js,在实例的项目中要用到mongodb做数据库.于是便记录一下mongodb的安装流程和遇到的坑: 1.下载地址:http://www.mongodb.org/downloads ...
- Three Steps to Migrate Group Policy Between Active Directory Domains or Forests Using PowerShell
Three Steps Ahead Have you ever wished that you had three legs? Imagine how much faster you could ru ...
- 手机APP设计网
http://hao.xueui.cn/ http://www.25xt.com/
- windows服务安装卸载
到C盘下找到对应的开发VS的installutil.exe文件,复制到程序的执行文件(*.exe)相同目录下在开始程序中找到VS命令提示工具 转到程序的执行文件(*.exe)目录下 C:\>cd ...