首页
学习
活动
专区
工具
TVP
发布

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊。...效果图 先上效果图: 这是淘宝的:  ? 我自己做的:  ? 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅。...下面我们来看看怎么实现的吧 实现 首先我们分析淘宝布局的界面难点大致就下面3个部分: *标题栏渐变,文字渐变隐藏 *透明通知栏(支持到4.4) *继续拖动查看详情,Scrollview有一个弹性的效果...前两点我之前都已经实现过了,这里就不做过多介绍了,不清楚的小伙伴可以看我之前的文章: Android带你解析ScrollView–仿QQ空间标题栏渐变 下面我们主要介绍一下Scrollview继续拖动查看详情有一个弹性动画的效果...mLastY; /** * 用于控制是否变动布局的另一个条件,mEvents==0时布局可以拖拽了,mEvents==-1时可以舍弃将要到来的第一个move事件, * 这点是去除多点拖动剧变的关键

82010
您找到你想要的搜索结果了吗?
是的
没有找到

Android--仿淘宝商品详情(继续拖动查看详情)及标题栏渐变

好了废话不多说了,下面我们开始正题: 今天要分享的是淘宝的详情页,之前在淘宝上买东西的时候看到淘宝的详情效果比较不错,所以今天就来仿一下它的效果吧,可能没有淘宝的好,希望见谅啊。...效果图 先上效果图: 这是淘宝的:  image.png 我自己做的:  image.png 怎么样效果还差不多吧?GIF图效果看的不太清楚,见谅。...下面我们来看看怎么实现的吧 实现 首先我们分析淘宝布局的界面难点大致就下面3个部分: *标题栏渐变,文字渐变隐藏 *透明通知栏(支持到4.4) *继续拖动查看详情,Scrollview有一个弹性的效果...前两点我之前都已经实现过了,这里就不做过多介绍了,不清楚的小伙伴可以看我之前的文章: Android带你解析ScrollView–仿QQ空间标题栏渐变 下面我们主要介绍一下Scrollview继续拖动查看详情有一个弹性动画的效果...滑动到底部添加动画效果让其滑动到下面的Scrollview,当下面的Scrollview滑动到顶部的时候再添加一个向上的动画让其滑动到上面的Scrollview。

1.3K10

js实现拖动组件移动效果

2015-04-15 14:06:09 今天我来给大家介绍一种js特效,这种特效是当你用鼠标点击组件移动到其他地方后,这个组件就定在了那个地方,这种效果通常用来做视图化排版的。...p>column3 item4 这段代码是html代码,主要是大体的div布局,我们在这里的组件用的是div,通过下面的js...代码来实现组件的移动 <script type="text/javascript...= this//不能跟<em>拖动</em>元素自己比较 否则不能在本列向下移动 && top < findPosY(this.column.childNodes[i])){//从上到下找到第一个比<em>拖动</em>元素的上边距大的元素...CCCCCC;background:#CCCCCC;color:white;cursor:move;} 这样就可以实现组件的移动了,在上面这段代码中需要引入Drag.<em>js</em>

9.9K20

android商品详情页面设计详解

本文实例为大家分享了android商品详情展示的具体代码,供大家参考,具体内容如下 ?...首先看下效果图(样式,布局可以根据产品要求改变), 先大致说一下,整体结构使用的是LinearLayout实现,分上下两部分,上边就是我们能滑动的自定义布局,下面就是“进入店铺”,“立即购买”这两个无关紧要的布局...--这块区域放商品详情信息-- </FrameLayout <!...-- 中间继续拖动条目(继续拖动查看图文详情) 可以根据产品需求更改自己想要的样式(一般这里都是一些简单的文字) -- <RelativeLayout android...,ScrollViewContainer同样分为上下两部分,从“拖动条目”分开; 上半部分最上面一般都会放置一个轮播图,然后下面放一些商品详情,让大家选择的一些属性信息; 这些大家可以根据需求自己添加

2.5K10

当邮箱类App遇上折叠屏,结果就一个字,快!

通常以长按作为拖拽的开始动作,从系统流程来看,可以分为开始、继续、放下、结束四个阶段,该框架包括拖动事件类、拖动监听器以及辅助工具方法和类。...拖拽效果可参考链接: https://developer.android.com/guide/topics/ui/drag-drop?...快速浏览文件内容 为了减少用户的操作成本,折叠屏手机利用分栏显示邮件列表与邮件内容,界面切换为 3:7比例,列表页面:详情页为3:7。这样一来邮件详情可以显示更多,页面效果更加直观。...快速切换查看邮件场景 折叠屏最大的特点之一是屏幕横向空间得到扩展。...在直板机里,用户需要点击邮件A→→→进入到邮件A详情页面→→→返回→→→点击邮件B→→→进入到邮件B详情页面;在折叠屏手机里,直接点击邮件A→→→点击邮件B→→→点击邮件C,就能直接查看相应的邮件内容,

79310

「实战」如何用H5实现原生体验的图片预览组件

关于alloyFinger.js组件 https://github.com/AlloyTeam/AlloyFinger 组件提供了单击、双击、长按、拖动、旋转等手势支持。基于这些手势有很多玩法。...关于transform.js组件 http://alloyteam.github.io/AlloyTouch/transformjs/ alloyFinger只提供了手势支持,但手势具体要实现的图片位置变换或者缩放的效果...手势细节-边界检测 图片放大之后,支持拖动图片查看细节。实现的原理很简单,touchmove的时候,改变图片的translate值即可。...对比手Q的AIO的图片预览,在拖动图片到图片边缘的时候,检测边界并禁止继续拖动。...手势细节-惯性 单指拖动图片然后松开手指时,手Q原生的图片预览器有继续滑动一段距离的惯性效果。 滑动到终点之后,图片真正停在的点是在延长点上。

2.7K20

页面性能优化的利器 — Timeline

比如,元素的宽度的变化会影响其子元素的宽度,其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说,布局过程是经常发生的。 * 绘制。绘制,本质上就是填充像素的过程。...可以看到下图中上方的两个红色框位置,该区域是Timeline面板的整体预览区,分了三部分(FPS、CPU、NET)来展示,具体可查看Timeline使用详情。...比如,点击Evaluate Script事件后,可以查看总共的耗时,并且可以链接到具体的JS源代码: 而在网页加载完毕后,对图片进行了点击操作,触发了标签的onclick事件,开发者能够在...Flame框图中查看到点击事件中各个流程,其展现了所有的JS调用栈: 系统Event(click) ==> 绑定的onclick事件(html中第24行) ==> function a_click...在Paint Profiler中查看绘制细节 当在Flame框图中点击了 一个Paint事件,则会在详情面板中出现一个Paint专有标签:Paint Profiler 通过Paint Profiler

6.7K30

ExtJs学习笔记(24)-DragDrop拖动功能

,DDProxy就是要拖动的东西,而DDTarget就是拖动后可以扔进去的目标容器区) //以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档),并标明...: 1.拖动Green块(但还未到达目标区)时的效果: 2.拖动Green块(到达目标区)时的效果 3.拖动完成后的效果 4."...我可以随便拖"的拖动效果 5."...我可以随便拖"拖动完成后的效果  转载请注明来自菩提树下的杨过 简单说明几点: 1.ExtJs中的拖动功能,只要记住DDProxy是用来拖动的组件,而DDTarget就是用来放拖动块的容器就可以了,其它东西比如...,DDProxy就是要拖动的东西,而DDTarget就是拖动后可以扔进去的目标容器区) //以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档),并标明

84790

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI(interactjs更加纯粹)。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...拖放事件事件详情一个元素被拖放,他可能会经过很多个元素上,最终到达想要放置的元素内。这里,我暂时把被拖放的元素称为源对象,被经过的元素称为过程对象,到达的元素称为目标对象。...具体可以查看:https://www.kryogenix.org/code/browser/custom-drag-image.html这个文章已经讲的非常清楚了。...应该在dragstart事件中设置此属性,以便为拖动源设置所需的拖动效果。...这种一般都是使用第三方库实现,如  interact.js 、vue-drag-resize等。

5.7K21

爬虫入门到精通-爬虫之异步加载(实战花瓣网)

我们可以查看下网页源代码,可以发现的内容都是通过js渲染上去的,所以我们才获取不到内容(这个可以用js2xml来解析,先放在这里,到详情页再来处理。) ?...所谓的异步加载 我们还是打开美女花瓣,陪你做生活的设计师(发现、采集你喜欢的美女图片)花瓣网(http://huaban.com/favorite/beauty/) 可以发现我们把页面拖动到最下面,会自动加载出新的内容...其实都是试出来的(或者说看出来的) 打开F12 拖动到页面最下面(有些网站是点击加载更多) 注意 我有勾选”xhr” 可以看到每次页面到最底部,都会发送一个请求。这个请求就是所谓的异步加载请求。...我们查看请求的时候就是jsno格式的啊 我们打印下源代码看看 ? 你会看到竟然是”<html “这样的,但是我们上面查看请求的时候,明明是如下图这样的啊 ?...随便打开一个详情页花瓣(http://huaban.com/pins/1062650100/) 查看图片地址 ?

1.3K150

selectToUISlider

用过google earth的朋友,一定记得google earth的一个功能,那就是查看历史影像功能:有一个时间轴滑块,拖动滑块,显示各个时间的影像,如下: ?...也要用到类似的功能,所以呢就研究了一下,刚开始的时候,记得Jquery UI里面有一个slider的东西,可以实现类似滑块的东西,研究了一下,发现Jquery UI里的slider没法满足我的需求,所以就继续上网...下面就介绍一下我的实现过程啊吧: 1、引入相关js或者样式文件 ...但是,当你鼠标拖动的时候下面的图片不会发生变化,这个离我需要的还差一点,我的鼠标拖动滑块时下面的影像也发生变化,找了半天没有找到相对应的事件,所以,就只能在原始js里做文章了,在里面找了找,selectToUISlider.jQuery.js...values.push( jQuery(this).get(0).selectedIndex ); }); return values; })() }; 这样,我要的效果就实现了

79730

EonerCMS——做一个仿桌面系统的CMS(四)

按住我拖动   一晃又过去一个多星期了,途中出了个差,进度上略有耽误,不过还好,上次有个话题没说完,这次继续,就是窗口拖动以及改变窗口尺寸。...然后我对标题栏绑定了鼠标按下去的事件,然后在事件里绑定了document的鼠标滑动事件,而不是直接对标题栏绑定滑动事件,目的就是防止出现鼠标移动过快,移除标题栏那块区域,导致拖动效果一卡一卡的现象。   ...尽量避免上面这种情况 底部我的做法是,最多拖动到标题的位置就不能再继续往下拖动了,大家可以参考下我这种做法   关于左右两侧,我是参考了win7里的一个小功能,就是鼠标拖动到窗口边缘时,自动把窗口变成半屏...要说的就是这么,关于拖动的demo,我提供下载地址,欢迎下载查看,因为是demo,所以没写成插件,点击下载。   ...PS2:感谢Gray Zhang(灰哥)在某js群里对我的问题给予解答

50920

Fiddler远程调试js

假设我们发现这个页面有问题,需要修改所引用的js文件()。 第一步:用Fiddler查看页面的数据流列表,找到这个js文件的session ?  ...第四步:创建重定向规则,将目标是这个js的HTTP请求重定向到本地文件   我们可以通过“Add…”按钮手动添加规则,不过这个URL已经出现在我们的session列表中,可以直接拖动过来。...在左侧的Session列表中选择第一步找到的session,拖动到AutoResponse标签中。这样就创建了一个针对这个URL的规则。 ?  ...第五步:修改本地文件,进行测试   我们在本地的js文件中加一句alert(‘hello’) ? 刷新浏览器,看看效果,如果alert出来,那就成功了。   ...继续修改这个文件并测试,成功修复问题后,我们就可以发布修改后的文件了。

9.9K30

Adobe Photoshop使用,选框工具进行选择教程

详情请参文末阅柔化选区边缘。 4.对于矩形选框工具或椭圆选框工具,请在选项栏中选取一种样式: 正常:通过拖动确定选框比例。 固定比例:设置高宽比。输入长宽比的值(十进制值有效)。...若要从选框的中心拖动它,请在开始拖动之后按住 Alt 简 (Windows) 或 Option 简 (Mac OS)。 对于单行或单列选框工具,在要选择的区域旁边单击,然后将选框拖动到确切的位置。...注意: 要重新放置矩形或椭圆选框,请首先拖动以创建选区边框,在此过程中要一直按住鼠标按钮。然后按住空格键并继续拖动。如果您需要继续调整选区的边框,请松开空格键,但是一直按住鼠标按钮。...消除锯齿 通过软化边缘像素与背景像素之间的颜色过渡效果,使选区的锯齿状边缘平滑。由于只有边缘像素发生变化,因此不会丢失细节。消除锯齿在剪切、拷贝和粘贴选区以及创建复合图像时非常有用。...注意: 仅在移动、剪切、拷贝或填充选区后,羽化效果很明显。 使用消除锯齿功能选择像素 选择套索工具、多边形套索工具、磁性套索工具、椭圆选框工具或魔棒工具。 在选项栏中选择“消除锯齿”选项。

2.4K30

【实战技巧】VUE3.0实现简易的可拖放列表排序

拖拽事件 可用的拖拽事件一共有七个,其中三个是用于拖拽元素的 dragstart 在元素开始被拖动时触发 dragend 在拖动操作完成时触发 drag 在元素被拖动时触发 四个是用于释放区域的 dragenter...当被拖动元素进入到释放区所占据的屏幕空间时触发 dragover 当被拖动元素在释放区内移动时触发 dragleave 当被拖动元素没有放下就离开释放区时触发 drop 当被拖动元素在释放区里放下时触发步骤...=> { bindEvents(); }; // 执行初始化函数 init(); })(document); 在VUE3中的实现思路 原生js...在dragstart中记录下旧的索引 在dragover中记录下新的索引,每次经过一个都会更新 在drop事件中处理数组,删掉旧的元素,在目标索引添加新的元素 //简略后的伪代码 详情查看源码 <div...handleDragstart(index)" @drop.prevent="handleDrop()" @dragover.prevent="handleDragover(index)"> //js

1.8K40

原型设计软件Axure中文版,Axure如何下载?Axure软件安装教程

在Axure中,你可以轻松的进行页面设计、交互效果制作、动画效果制作等等。 Axure的核心功能是原型设计,可以对页面进行细致详尽的设计,并且可以添加各种交互效果,以模拟真实的用户操作。...在Axure中,用户可以通过添加交互效果来模拟真实的用户操作,例如鼠标悬停、点击、拖拽等等。用户可以使用Axure内置的交互效果,也可以自定义交互效果。...模态框:弹出一个模态框,覆盖在当前页面上,用户需要在模态框中完成某项操作后才能继续使用页面。 滑动条:在页面上添加一个滑动条,用户可以拖动滑块来选择数值。...动态面板:可以设置一个面板,通过点击或其他事件触发面板的展开或收起,可以用来实现折叠菜单或者展开详情等功能。 鼠标悬停:设置一个元素,当鼠标悬停在上面时,会触发某种效果,比如提示框或者弹出菜单等。...拖放功能:可以设置元素可拖动,用户可以将元素拖动到其他位置或者面板中。 点击切换:在页面上设置多个元素,点击其中一个元素后,其他元素会自动隐藏或者展开。

4.2K40

快速搭建一个代码在线编辑预览工具

各部分都可以拖动进行调节大小,比如按住js编辑器左边的灰色竖条向右拖动,那么js编辑器的宽度会减少,同时css编辑器的宽度会增加,如果向左拖动,那么css编辑器宽度会减少,js编辑器的宽度会增加,当css...: 1.把本次拖动瞬间的偏移量由像素转换为百分比; 2.如果是向左拖动的话,检测本次拖动编辑器的左侧是否存在还有空间可以压缩的编辑器,没有的话代表不能进行拖动;如果有的话,那么拖动时增加本次拖动编辑器的宽度...,同时减少找到的第一个有空间的编辑器的宽度,直到无法再继续拖动; 3.如果是向右拖动的话,检测本次拖动编辑器及其右侧是否存在还有空间可以压缩的编辑器,没有的话也代表不能再拖动,如果有的话,找到第一个并减少该编辑器的宽度...2" :disabled="false" title="控制台"> 这部分代码较多,有兴趣的可以查看源码...switch (method) {} } 效果如下: 报错信息 报错信息上文已经涉及到了,我们对js代码使用try catch进行了包裹,并使用console.error进行错误输出,但是还有些错误可能是

3.9K20
领券