滑动切换图片

一、

onmousedown()->ontouchstart()

onmousemove()->ontouchmove()

onmouseup()->ontouchend()

click事件在移动端有300毫秒延迟

二、判断速度

Date.now();//html5记录当前时间

三、速度减慢发生跳跃

在超过图片部分时加

if(bBtn){
    bBtn = false;
    downX = touchs.pageX;
}

三、防止滑动时误点击链接

<a data-href="www.baidu.com" ontouchmove="this.flag=1" ontouchend="this.flag||window.open(this.dataset.href),this.flag=0"></a>

四、移动端少用transition,可以用tween

五、去电点击a链接的黑影

-webkit-tap-highlight-color:rgba(255,0,0,0)

六、移动端移动考虑效率,用translateX/Y/Z代替position:absolute;left

时间: 2024-10-10 03:06:33

滑动切换图片的相关文章

H5+CSS3实现手指滑动切换图片

包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <m

Android:使用ViewPager实现左右滑动切换图片(图上有点点)

在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&

Android:使用ViewPager实现左右滑动切换图片 (简单版)

ViewPager,它是google SDk中自带的一个附加包的一个类, 可以使视图滑动. 步骤: 1.引入android-support-v4.jar包,在主布局里加入 <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content"

基于jQuery左右滑动切换图片代码

分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_out v_out_p"> <div class="prev"> <a href="javascript:void(0)"></a> </div> <div class="v_show"

android 图片浏览器滑动切换图片

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation

微信小程序左右滑动切换图片酷炫效果(附效果)

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSe

鼠标划上 滑动切换图片

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" href="http://s0.ifengimg.com/2014/10/11/comm

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

【转】Android android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)

首先我们还是看一些示例:(网易,新浪,百度)      下面我简单的介绍下实现方法:其实就是listview addHeaderView.只不过这个view是一个可以切换图片的view,至于这个view怎么做,就要根据自己的喜爱了,实现有多种方法,下面我简单介绍一下. 第一种:ViewFlipper+GestureDetector 主布局就是一个listview,这里就不介绍了,我介绍下切换图片布局head_iamge.xml 1 <span style="font-size:12px;&