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

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

学习目标: 触屏事件概述: 移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS的书写效果,但是移动端也有自己独特的地方,比如触屏事件touch(也称触摸事件),Android...touch对象代表一个触摸点,触摸点可能是一根手指,也可能是一根触摸笔.触屏事件可相应用户手指(或触控笔),对屏幕或者触控板操作 常见的触屏事件如下: 试着写一下,切换成模拟手机调试 再来试试触摸滑动事件...,我们现在要学习一下: 但是我们还要注意,触摸滑动是有默认的屏幕滚动的,就是说本来我只想拖动盒子,但是 整个页面都滚动起来了....那么如何让小圆圈跟随着图片变化呢> 我们能用上我们新学的办法了....接下来就是手指滑动轮播图的部分: 移动也做好了,但是我们平常手机里的轮播图的滑动效果并不是这样的,而是当我们滑动很小距离时,图片会回弹回去,滑动的距离大了才会下一张,所以我们要根据moveX

2.6K20

前端成神之路-WebAPIs07

触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： ?...自动播放功能-无缝滚动 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断 此时需要添加检测过渡完成事件 transitionend 判断条件：如果索引号等于 3 说明走到最后一张图片...JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

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

移动端web开发笔记

以下是历史原因： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，...我们先来看看回弹滚动在手机浏览器发展的历史： 早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题，...@media all and (orientation:landscape) { .css{} } 22、audio元素和video元素在ios和andriod中无法自动播放 应对方案：触屏即播...语法与jquery几乎一样，会jquery基本会zepto~ iscroll.js解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ underscore.js 该库提供了一整套函数式编程的实用功能...适合上下滑屏、左右滑屏等滑屏切换页面的效果 slip.js iSlider.js fullpage.js swiper 3.瀑布流框架 masonry 工具推荐 caniuse各浏览器支持html5属性查询

3.6K20

「JavaScript 」动画基础 - 03

触屏事件1.1.1 触屏事件概述移动端浏览器... 请注意，本文编写于 2082 天前，最后修改于 173 天前，其中某些信息可能已经过时。 1.1....触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。...常见的触屏事件如下： 1.1.2 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。...JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

1.2K20

vue-awesome-swiper实现轮播图片

前言 最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时，学习到第三章 3.7-首页顶部轮播图片（vue-swipper...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！...，每隔3秒钟轮播另外一张图片，当在浏览器中左右滑动鼠标或者在手机端左右滑动时会看到不同的图片，起来轮播的效果 最终的轮播效果图如下所示： 图片1： ?...图片2： ? 图片3： ?...(Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台-B站视频 全栈开发王者荣耀手机端官网和管理后台-Github源代码 Swiper中文网地址为

5.1K40

在折叠屏手机上如何做交互设计？

折叠屏手机属于新的手机品种，也是我目前最看好的手机形态之一（未来手机的形态应该是柔性手机，现在已知有柔性电路板的存在了）。...PSV已经在背部增加了电容式多点触控面板）。...比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。...举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。 ?...当玩家使用小屏模式时我们可以收起所有功能界面，使游戏的沉浸感更强；当玩家采用大屏模式时，我们可以认为玩家需要获取更多信息，这时候把聊天、装备等相关功能界面展示出来。

1.3K40

移动端轮播图笔记

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

2.5K21

移动开发实用

通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...以下是历史原因，来源其他人的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放 (double tap to...个 在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍 那么，前端的应对方案是： 设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的...解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~ 最新版本已经更新到5.0 官网：http://cubiq.org/iscroll-5 underscore.js...最新版本已经更新到1.8.2 官网：http://underscorejs.org/ 滑屏框架 适合上下滑屏、左右滑屏等滑屏切换页面的效果 slip.js iSlider.js fullpage.js

6.4K30

渐进式Web应用清单（翻译转载）

每次你在app中触碰一个链接或者按钮，页面应该立即响应，可以使用以下方案： 立即过渡到下一屏，同时在等待网络内容时展示一个占位加载。 当app等待网络响应时，展示一个加载指示。...在图片加载前，你可以展示一个灰色的方块或者模糊/小的版本（如果可能的话）来作为占位符。 从详情页回退到之前的列表页面时，列表页保持滚动距离 测试 在应用中找一个列表区域。向下滚动。触碰项目进入详情页。...在详情页上下滚动。点击返回，确保列表区域滚动到详情链接/按钮触碰前的位置。 修复 用户点击返回时，恢复列表的滚动位置。一些路由库会有帮你做这个的特性。...触碰时，输入框不会被屏幕键盘遮挡 测试 找到一个有文本输入框的页面。把文本输入框滚动到刚好在屏幕底部。点击输入框，验证键盘出现时其没有被遮住。...测试 检查浏览没有在不恰当的时候展示添加到主屏，例如当用户正在进行某项操作时，或者另外一个提示已经在屏幕上显示时。

1.6K20

GitHub 上100个优质前端项目整理，非常全面！

可以轻松建立一个动感的响应式的滚动效果页面，比较适用于单页面的专题站。...支持现代浏览器和IE8以上版本 star: 9347 ● superslides 致力于解决网站大部分特效展示问题，网站上常用的焦点图/幻灯片，tab标签切换，图片滚动，无缝滚动等 star: 1478...支持大文件分片并发上传，极大的提高了文件上传效率 star: 6115 ● headroom.js 是一个轻量级、纯js组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间 star:...star: 13987 ● Swiper 纯js打造的滑动特效插件，面向手机、平板电脑等移动终端。...能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果 star: 17392 Node.js相关 ● awesome-nodejs 关于node包和资源的收集 star: 25729

2.9K21

原 荐 收集微信跳一跳的辅助

原理说明 辅助原理： 用adb获取手机截图并拉取到项目中 对图片进行二值化 根据棋子的RGB值获取当前位置 通过adb模拟屏幕点击 文末有推荐选择 开源列表 Prinsphield/Wechat_AutoJump...原理：通过抓包拿到会话id,模拟请求 特点：抓包，刷分快，易被封 平台：安卓，IOS hyb1996/WechatJumping.js 链接：hyb1996/WechatJumping.js 说明：基于...`Auto.js`(一个类安卓平台的按键精灵)的模拟按键脚本，方便操作（这是辅助圈的一个常用软件），不过手机需要安卓7.0以上或者有root权限的设备才能运行本脚本。...，然后调用adb模拟触屏点击，实现刷分。...说明：同意是python2.7调用adb实现截图，然后adb模拟触屏 原理：截图识别 特点：单文件代码 平台：安卓 iOSDevLog/JumpJump 链接：iOSDevLog/JumpJump 说明

1.3K20

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

我就不gif展示问题效果了。 接下来我网罗了网络，整理了别人说的方案和我自己的方案，一共实现了六种方法，并经过了自己手机自测。 各方法操作难易不同，分别针对弹层和body是否超出一屏可滚动等不同情况。...赠送一套自定义手势滚动效果的代码哦~ 一、body无滚动 + 弹层无滚动[css-超出隐藏] 适用场景需满足以下条件：     1、body最好是一屏、无滚动     2、虽然body内容超出一屏需滚动...二、body无滚动 + 弹层内部滚动[css-弹框超出滚动|真机有bug] 适用场景需满足以下条件：     1、body最好是一屏、无滚动     2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中...但是同样的问题是，需要判断滚动到顶部和滚动到底部的时候禁止滚动。否则，就和第二条一样，触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动。...同理，如果手势是向下滑，并且当前滚动高度为0说明当前展示的已经在可滚动内容的顶部了，此时再次阻止默认事件即可。 两个判断条件可以写到一个if中，用 || (或)表示即可。

13.5K31

jimojianghu

然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。 在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...要禁止触摸屏的手指缩放，可以使用如下的 CSS 和 JS 两种方法。...css 处理 只要在页面上使用css样式 touch-action: none，就能禁止web在手机或平板上的缩放了。...js 处理 使用js代码来禁止触摸屏的手指缩放，和处理触控板类似的，这里主要是监听几个手势事件，touchstart, touchend, touchmove等。...用于设置触摸屏用户如何操纵元素的区域，允许你在触控时控制滚动操作。 例如，浏览器内置的缩放功能。 这样做的好处还有，它可以允许你自己实现这些手势。

3.8K00

web 22款响应式的 jQuery 图片滑块插件

Slides.js SlidesJS 是一款响应式的 jQuery 幻灯片插件，经过多年的发展，已经成为一款功能齐全，设计精巧的幻灯片插件。...Bx Slider bxSlider 是一个响应式的 jQuery 滑块，用来创建简单的内容滑块和滚动字幕。各种设置进行自定义显示器更容易。 8....Sequence.js Sequence.js 是一个非常现代的图片滑动效果，特别适合电子商务网站或者企业产品展示功能。带有图片缩率图，能够呈现全屏图片浏览效果。...Flex Slider FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件，能够帮助你在项目轻松的创建漂亮的内容滚动效果。...Excolo Slider 一个简单的 jQuery 滑动插件，支持响应式设计和触屏设备。 20.

12.9K00

前端成神之路-WebAPIs06

2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 ​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈，可以播放相应图片。 ​...点击右侧按钮， 图片滚动一张 var num = 0; // circle 控制小圆圈的播放 var circle = 0; // flag 节流阀 var flag...触屏事件 1.3.1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。...比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。...触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 常见的触屏事件如下： ? 1.3.2.

1.3K40

Native和H5分久必合，Weex会带来移动端的巨变吗？

• 2008 年，Google 发布了 Android 手机（G1），尽管不再轰动，但Android操作系统是开源的，使得更多的手机厂商可以在自家的手机上安装Android，这对移动设备的普及至关重要...它传达了这样的想法：在移动端崛起的大环境下，在移动端人机交互体验（如触屏）和物理条件（如屏幕尺寸）的巨变下，应该考虑将业务核心关注点（因为屏幕小）优先（因为移动端崛起）在移动端上实现。...但是，这同时又是Web的痛点：资源首次下载时间长、长页面内存溢出，以及滚动性能、动画性能、传统Web性能（如JS执行效率）低。...• H5 WebView滚动过程中懒加载图片会导致“白屏”。 Weex利用H5的优势解决了Native的痛点： • 解决了iOS、Android等平台需要开发多套功能重复代码的问题。...以2016年双11主会场（可用淘宝扫描下图二维码观看对比视频）为例，H5的问题非常明显： • H5滚动过程中图片加载缓慢，滚动过程中系统阻止了JS执行，导致图片懒加载被延迟。

1.8K00

移动web开发问题和优化小结

2.动画和过渡能用css3解决的，就不要使用js。如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。...6-3.图片懒加载 首屏加载的快慢，直接影响用户的体验，建议将非首屏的图片资源放到用户需要时才加载。这样可以大大优化首屏加载，减少首屏加载所需要的时间！...ps：懒加载要使用js频繁操作dom，期间会导致大量重绘渲染，影响性能。 6-4.img还是background 图片的展示方式有两种，一种是以图片标签显示，一种是以背景图片显示！...7.快速回弹滚动 在ios上，如果存在局部滚动，就要加这个属性了！如果不加，滚动会很慢，看起来也会有一卡一卡的感觉。...8.谨慎使用fixed ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位，会发生元素错位（滚动一下又恢复），有时候会出现闪屏的效果。

2K21
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券