代码搜集-手机网页触屏

function initTouchEvent(){
    if(!!(‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch){
        var items = $(".article_item");
        for(var i=0;i<items.length;i++){
            addToucheEvent(items[i],$(items[i]).attr("id"));
        }
    }
}

function addToucheEvent(item,id){
    item.addEventListener(‘touchstart‘,touch, false);
    item.addEventListener(‘touchend‘,touch, false);
    item.addEventListener(‘touchmove‘,touch, false);

    function touch (event){
        var event = event || window.event;
        switch(event.type){
            case "touchstart":
                $("#"+id).css({"background":"#F5F5F5"});
                break;
            case "touchend":
                $("#"+id).css({"background":"#FFF"});
                break;
            case "touchmove":
                //event.preventDefault();
                $("#"+id).css({"background":"#FFF"});
                break;
        }
    }
}
时间: 2024-10-14 00:20:06

代码搜集-手机网页触屏的相关文章

常用的jquery触屏手机页面特效代码下载

js手机幻灯片代码制作手指滑动手机端图片轮播代码 jQuery移动端页面侧边导航菜单滑出效果代码 jquery.touchswipe.js手机端网页制作触屏滑动导航显示代码 jquery响应式幻灯片插件制作图片弹出手机幻灯片代码 jquery mobiscroll手机日期控件制作手机端日期控件 js手指滑动手机端列表加载动画效果 jquery手机导航菜单仿微信底部菜单代码 jquery html5手机触屏版点击弹出层对话框响应式网页布局代码 js手机端带进度条图片展示触屏滑动效果 jquery

基于图像识别测试手机浏览器打开网页首屏时间的方法

本文涉及性能测试技术,特别是涉及一种基于图像识别的测试手机网页首屏时间的方法,它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中.同时可以应用到其他android的apk的响应时间的测试中去 随着智能手机等移动终端的发展,越来越多的用户开始通过手机等设备浏览网页,以获取用户所需的信息. 用户使用手机访问网站是基于手机浏览器所获取的网页实现的.通常情况下,用户访问网站的页面全部加载完毕时,总页面高度可能有一屏到多屏不等,总的页面加载时间要比首屏加载时间长很多,但是首屏加载时间是用户对

体验优秀的触屏网页开发加速滑动与回弹

一个接近naturalapp体验的加速滑动与回弹css3属性 前几天,楼主发表了一篇关于手机网页开发软键盘与fixed博文叫做:webapp前端开发软键盘与position:fixed为我们带来的不便 自以为总结的挺好挺有范,但是很不幸,通过学习交流很快就有了更好更完美的方案,而且还是来自safari原生控件实现,代码很简单 overflow-y:auto;-webkit-overflow-scrolling:touch; 效率很高的有着硬件加速的系统级控件,简约而不简单 代码很少很简单,但我们

js手机触屏轮播效果

以前自己用纯js写的,找了N就都没找到,还是从同事哪里重新拿过来的,仅是备忘,看过新浪新闻的手机触屏端后,自己写了个效果,比新浪的省代码多了 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control&

用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js事件: 1.touchstart---手指开始触摸事件,此事件可以获取起始坐标,将起始坐标保存在pressX 和pressY 中. 2.touchmove---手机触摸移动时间,只要手机不离开指定元素,就不停的将手机的新坐标通过事件发给页面上的js代码.通过计算此事件获取的当前坐标与起始坐标的差,就

25.Unity3D手机中Input类touch详解-Unity触屏事件解析到底(Twisted Fate)

首先贴一下Unity支持的模型文件类型,以前没有收集过. Unity支持两种类型的3D文件格式: 1.  通用的"出口型"3D文件 如.fbx..dae..3ds..dxf..obj等文件格式. 2.  3D软件专用的3D文件格式 如Max, Maya, Blender,Cinema4D, Modo, Lightwave & Cheetah3D 等软件所支持的格式,如.MAX, .MB, .MA等等. Unity3D手机中Input类touch详解: 1.Input.touch

手机触屏的js事件

处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart:  // 手指放到屏幕上的时候触发 2.touchmove:  // 手指在屏幕上移动的时候触发 3.touchend:  // 手指从屏幕上拿起的时候触发 4touchcancel:  // 系统取消touch事件的时候触发.至于系统什么时候会取消,不详 属性 1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置 2.pageX / pageY:

jQuery手机触屏左右滑动切换栏目和焦点图

实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide,大家可以百度下. 首先来看看左右滑动切换焦点图: JQuery代码 $(function(){ TouchSlide({ slideCell:"#slideBox", titCell:".myhd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层 mainCell:".bd ul", effect:"leftLoop

Mobiscroll手机触屏日期选择器

   最近在制作jquery mobile因要用到日历控件,突然发现Mobiscroll非常不错.于是摘下来记录. A Mobiscroll是一个用于触摸设备(Android phones.iPhone. iPad.Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字就可以选择日期.Mobiscroll作为一款jQuery日期插件可以让用户自定义主题,完全通过CSS文件修改样式,经过测试可以完美使用在iOS4.Android 2.2. Android 2.3