文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android实现文字上下滚动效果

关于Android实现文字上下滚动这个功能，我目前有两种方法实现： 一个是在TextView 中加上翻转的动画效果，然后设置循环滚动；一种是改写ViewPager 的滚动方向，使它从下到上进行滚动，...并设置循环滚动； 首先介绍第一种方法： 实现思路：自定义TextView，在TextView中加上从下到上滚动的动画效果，然后设置循环播放； 创建一个AutoTextVieW使之继承TextView...在接下来的动画翻转效果中，根据这个高度设置TextView上下滚动的距离。...with(alpha); mAnimStart.setDuration(DURATION); mAnimStart.addListener(this); } /** * 从屏幕下面向上的动画效果...第二种方法实现的原理和轮播图的原理类似，轮播图一般是左右横向滚动，这里需要把ViewPager改成上下滑动，关于上下滑动的viewpager,可以在给github上找到； 其次轮播图中播放的是图片，

5.8K20
您找到你想要的搜索结果了吗？
是的
没有找到

JavaScript之移动端网页特效(1)

学习目标: 触屏事件概述: 移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作 常见的触屏事件如下: 试着写一下,切换成模拟手机调试 再来试试触摸滑动事件...,就是说本来我只想拖动盒子,但是 整个页面都滚动起来了....因为是移动端,所以可以使用CSS3的一些方法: 这样移动的话ul就不用加定位了 现在试做一下: 后面接着做无缝滚动 因为是ul在做过渡效果,所以我们给ul添加一个监听事件: 我们让他过渡完成后就打印一个...11 往左划也一样,但是现在还没做拖动效果 下面要做小圆点跟随图片变化的效果,也引出了新的知识点: classList属性 classList属性是HTML5新增的一个属性,返回元素的类名

2.5K20

开发者必备的12个JavaScript库

开发者们可以节省很多时间，大大提高开发的效率，所以大家赶紧收藏起来吧：） 1) Headroom.js Headroom.js 是个轻量级，高性能的 JS 部件（完全独立，无需任何依赖），允许对用户滚动页面的行为做出反应...，Headroom.js 的主页顶部就是一个演示示例，当向下滚动，头部就会慢慢退出隐藏起来；当向上滚动，头部又慢慢的显示出来。...2) Hammer.js Hammer.js是一个轻量级的JavaScript库（压缩后仅有3kb），能让你的网站轻松实现触控事件。它依赖于jQuery，用来控制触摸设备上的多点触控特性。 ?...8) Morris.js Morris.js 是一个轻量级的 JS 库，使用 jQuery 和 Raphaël 来生成各种时序图。 ?...12) Turnjs Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。 Turn.js 支持硬件加速来让翻页效果更加平滑。

2.7K90

Mac 常用快捷键与操作

+ Z撤销Command + Shift + Z反向撤销 截屏 快捷键效果Command + Shift + 3截当前屏幕。...系统不提示 锁屏、睡眠、重启、关机、退出登录 快捷键效果Control + Command + Q锁屏Control + Shift + 电源按钮睡眠。...不适用于触控ID传感器Control + Command + 电源按钮强制重启。不适用于触控ID传感器Control + Option + Command + 电源按钮关机。...快捷键效果Fn + 上箭头Page Up：向上滚动一页Fn + 下箭头Page Down：向下滚动一页Fn + 左箭头Home：滚动到文稿开头Fn + 右箭头End：滚动到文稿末尾 其他 快捷键效果 3....手势 单指： 轻触滑动：相当于鼠标移动 按压一次：相当于鼠标单击 按压两次：相当于鼠标双击 按压不放滑动：可实现拖动 中间停顿按压两次：重命名 双指： 双指上下滑动：上下滚动页面动 双指左右滑动：前进后退

3.5K20

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。...，如果设置了options中css3: false*，如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library。...配合animate.css的问题，animate的动画添加上animated样式和具体的动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果，不是我们想要的结果。

5.1K50

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了，接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。...我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例 下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站，github地址。 主要功能有： 支持鼠标滚动。 支持前后退和键盘控制。...，如果设置了options中css3: false*，如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library。...配合animate.css的问题，animate的动画添加上animated样式和具体的动画类型才会具有动画效果。如果一开始全设置好了那么只有第一屏有动画效果，不是我们想要的结果。

5.1K90

移动端web开发笔记

但滚动条不可见，同时iOS上只能通过2个手指进行滚动； Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除； iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果...: touch; } PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条...@media all and (orientation:landscape) { .css{} } 22、audio元素和video元素在ios和andriod中无法自动播放 应对方案：触屏即播...几乎一样，会jquery基本会zepto~ iscroll.js解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ underscore.js 该库提供了一整套函数式编程的实用功能...滑屏框架 适合上下滑屏、左右滑屏等滑屏切换页面的效果 slip.js iSlider.js fullpage.js swiper 3.瀑布流框架 masonry 工具推荐 caniuse各浏览器支持html5

3.5K20

2016.06 第三周 群问题分享

2016.06.20~2016.06.24 核心内容 touch事件 参考答案 当用户手指放在移动设备的屏幕上滑动会触发的touch事件； 以下支持webkit内核的浏览器： touchstart——当手指触碰屏幕时候发生...通常我们为了防止页面的滚动，会调用event的preventDefault()可以阻止默认事件的发生，达到阻止页面滚动的效果 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时会触发...通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动 MSPointerUp——当手指离开屏幕时触发 如何用jQuery实现两个...div等高 2016.06.20~2016.06.24 核心内容 jQuery 参考答案 有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度： $('.div').css('min-height...同一个函数，在不同的执行方法下，会有不同的效果。

96290

触屏事件

1触屏事件 1.1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： 1.3.2....触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...touchstart： 获取手指初始坐标，同时获得盒子原来的位置 （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动

70520

触屏事件

触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： ? 2....触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...touchstart： 获取手指初始坐标，同时获得盒子原来的位置 （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动

77241

滚动穿透的6种解决方案【已自测】

赠送一套自定义手势滚动效果的代码哦~ 一、body无滚动 + 弹层无滚动[css-超出隐藏] 适用场景需满足以下条件：     1、body最好是一屏、无滚动     2、虽然body内容超出一屏需滚动...，但触发弹层出现的按钮在第一屏中     3、弹层不用滚动效果 解决方案： 弹层出现时，用css给body设置固定定位和超出隐藏。...二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件：     1、body最好是一屏、无滚动     2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...五、body滚动 + 弹层内部滚动[js-代码模拟上下滑动手势效果] 我想，既然我们监控弹层、监控touchY那么辛苦了已经，还差再辛苦一点，自己写一个模拟手势滚动效果嘛！

13.5K31

移动端触屏事件

触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： ? 2....触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...touchstart： 获取手指初始坐标，同时获得盒子原来的位置 （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子 （3） 离开手指 touchend: 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动

2.9K30

移动端轮播图笔记

1.触屏事件 1.1触屏事件概述 移动端浏览器兼容性好，我们不需要考虑以前JS的兼容问题，可以放心使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch(也叫触摸事件)，Android...触屏事件可以相应用户手指对屏幕或者触控板操作 常见的触屏事件： 1.touchstart：手指触摸到一个DOM元素时触发 2.touchmove：手指在一个DOM元素上滑动时触发 3.touchend：...手指从一个DOM元素上移开时触发 1.2触摸事件对象（TochEvent） TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...，添加过渡transition效果 实现播放功能后，接着实现无缝滚动 自动播放功能无缝滚动 注意：我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件transitionend...判断条件：如果索引号等于3说明走到最后一张图片，此时索引号要复原为0 此时图片，去掉过渡效果，然后移动 如果索引号小于0，说明是倒着走，索引号改为2 此时图片，去掉过渡效果，然后移动 无缝滚动实现完之后接着实现改变

2.5K21

滑屏 H5 开发实践九问 - 腾讯ISUX

、滑动中、滑动后的接口 滑动时间、速度、缓动效果自定义 考虑动态增删页数而无差错 考虑页面缩放、横竖屏切换 在上述要求下，前者已显得分身乏术，而后者由于其元素间的自由性，可以满足上述的需求，且效果更佳，...若希望做到体验无缝，请在前一屏加载后一屏的资源。 第四问：内部滚动怎么办？...内部滚动即某屏内部还有滚动（但实际上系统的滚动跟滑屏的滚动是冲突对立的），如果这一屏不涉及复杂的 DOM，我还是觉得可以使用 iScroll，虽然它在安卓上的性能一直被诟病，但经过非常多安卓机的检验，效果还是在可接收范围内的...正如你体验到的那样，理想很丰满，现实很骨感，在 PC 上的体验这个Demo是没有问题的（请在 Chrome 下模拟手机滑动），然而因为 iOS 和 Android 中很多浏览器都自带 bounce 回弹效果...，而 iOS 和 Android 的大部分浏览器中，页面滚动时是会阻止页面重绘的（JS 的执行也无法立刻生效在页面中），所以Demo 里看到的效果就是回弹后才翻屏。

3.7K81

滑屏 H5 开发实践九问 - 腾讯ISUX

、滑动中、滑动后的接口 滑动时间、速度、缓动效果自定义 考虑动态增删页数而无差错 考虑页面缩放、横竖屏切换 在上述要求下，前者已显得分身乏术，而后者由于其元素间的自由性，可以满足上述的需求，且效果更佳，...若希望做到体验无缝，请在前一屏加载后一屏的资源。 第四问：内部滚动怎么办？...内部滚动即某屏内部还有滚动（但实际上系统的滚动跟滑屏的滚动是冲突对立的），如果这一屏不涉及复杂的 DOM，我还是觉得可以使用 iScroll，虽然它在安卓上的性能一直被诟病，但经过非常多安卓机的检验，效果还是在可接收范围内的...正如你体验到的那样，理想很丰满，现实很骨感，在 PC 上的体验这个Demo是没有问题的（请在 Chrome 下模拟手机滑动），然而因为 iOS 和 Android 中很多浏览器都自带 bounce 回弹效果...，而 iOS 和 Android 的大部分浏览器中，页面滚动时是会阻止页面重绘的（JS 的执行也无法立刻生效在页面中），所以Demo 里看到的效果就是回弹后才翻屏。

4.1K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券