当前位置:首 页 > 技术文章 > 原创 > 详细

javascript实现智能机上触摸切换图片的网页效果

字号字号

摘要:现在的智能机差不多可以说是“烂大街”了,于是基于智能机的网页应用自然也就大有市场了,所以,做网站开发或网页制作的人似乎都会或都将会去接触到基于“触摸屏”这个环境的网页制作。本人近来因公司需要,所以小试牛刀,做了一个根据手指滑动方向让图片左右切换展示的页……

现在的智能机差不多可以说是“烂大街”了,于是基于智能机的网页应用自然也就大有市场了,所以,做网站开发或网页制作的人似乎都会或都将会去接触到基于“触摸屏”这个环境的网页制作。本人近来因公司需要,所以小试牛刀,做了一个根据手指滑动方向让图片左右切换展示的页面,其中的HTML、CSS就不加敷述了,至于JS的话有兴趣的朋友可以到网上找找关于TouchEvent的资料看看,如果你原本就对HTML、CSS、JS都比较熟悉的话,实现起来其实是很简单的。

先看一下效果示意图(PS的,不是实拍的):

下面就直接上代码了,先看HTML:

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>   
  2. <html manifest="APP.appcache">   
  3. <head>   
  4.     <meta charset="utf-8">   
  5.     <title>实现智能机网页触摸图片左右切换效果</title>   
  6.     <meta name="description" content="">   
  7.     <meta name="HandheldFriendly" content="True">   
  8.     <meta name="MobileOptimized" content="320">   
  9.     <meta http-equiv="cleartype" content="on">   
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">   
  11.     <meta name="apple-mobile-web-app-capable" content="yes">   
  12.     <meta name="apple-mobile-web-app-status-bar-style" content="black">   
  13.     <!--引用脚本-->   
  14.     <script type="text/javascript" src="touchTest.js"></script>   
  15.     <!--引用样式-->   
  16.     <link href="touchTest.css" rel="stylesheet" />   
  17. </head>   
  18. <body>   
  19. <div class="main">   
  20.     <div class="btn_init"><div id="btn_init"></div></div>   
  21.     <div class="go_back"><a href="#"><!--返回链接--></a></div>   
  22.     <!--div宽度比:单张图片为100%,10张图片合计1000%,依此类推-->   
  23.     <!--图片宽度比:所有图片平均分配100%的比值,高度不设置(浏览器将自动按正比例缩放)-->   
  24.     <div id="img_init" style="width:1000%;">   
  25.         <img src="images/1.jpg" width="10%" />   
  26.         <img src="images/2.jpg" width="10%" />   
  27.         <img src="images/3.jpg" width="10%" />   
  28.         <img src="images/4.jpg" width="10%" />   
  29.         <img src="images/5.jpg" width="10%" />   
  30.         <img src="images/6.jpg" width="10%" />   
  31.         <img src="images/7.jpg" width="10%" />   
  32.         <img src="images/8.jpg" width="10%" />   
  33.         <img src="images/9.jpg" width="10%" />   
  34.         <img src="images/10.jpg" width="10%" />   
  35.     </div>   
  36. </div>   
  37. <script type="text/javascript">   
  38. //执行函数(给document绑定触摸事件处理函数)   
  39. initFun();   
  40. </script>   
  41. </body>   
  42. </html>  

CSS样式(touchTest.css文件)内容:

CSS Code复制内容到剪贴板
  1. @charset "utf-8";   
  2. body{margin:0px autofont-family:Verdana, Geneva, sans-seriffont-size:1em; line-height:normal;}   
  3. .main{width:100%; height:autooverflow:hidden;}   
  4. .clear{height:0pxoverflow:hiddenmargin:0pxpadding:0pxclear:both;}   
  5. #img_init{width:1000%;}   
  6. #img_init img{float:leftborder:0px;}   
  7. .btn_init{height:0pxwidth:100%; overflow:hidden;}   
  8. #btn_init{height:30pxwidth:100%; text-align:centeroverflow:hiddenposition:fixedtop:50%;}   
  9. #btn_init span{height:3pxwidth:3pxoverflow:hiddendisplay:inline-blockbackground:#fffborder:solid 1px #999margin:0px 2px;}   
  10. #btn_init .selected{background:#900border:solid 1px #f00;}   
  11. .go_back{height:0pxwidth:100%; text-align:rightrightoverflow:hidden;}   
  12. /*返回链接(UI右上角的小叉叉)*/  
  13. .go_back a{display:blockwidth:16pxheight:16pxbackground:url(close_icon.gif); overflow:hiddenposition:fixedtop:10pxrightright:10px;}   
  14. .go_back a:hover{background:url(close_icon_hover.gif);}  

Javascript脚本(touchTest.js文件)内容:

JavaScript Code复制内容到剪贴板
  1. var initFun = function() {   
  2.     //获取装载图片的div和图片集合   
  3.     var img_init = document.getElementById('img_init');   
  4.     var imgs = img_init.getElementsByTagName('img');   
  5.     if (!imgs) { return }   
  6.     //根据得到的图片数量创建焦点示意按钮组(UI正中的那一串小方框)   
  7.     var spanHtml = [];   
  8.     for (var i = 0; i < imgs.length; i++) {   
  9.         i ? spanHtml.push('<span></span>') : spanHtml.push('<span class="selected"></span>')   
  10.     }   
  11.     var btn_init = document.getElementById('btn_init');   
  12.     img_init.style.marginLeft = "0%";   
  13.     btn_init.innerHTML = spanHtml.join('');   
  14.     //变量:开始的触摸点X坐标,离开时的触摸点X坐标,装载图片的div可用的最小左外边距(负值)   
  15.     var startX, endX, minMarginLeft = (0 - imgs.length * 100) + 100;   
  16.     //触摸开始:记录接触点X坐标   
  17.     var touchStart = function(e) {   
  18.         startX = e.touches[0].clientX   
  19.     };   
  20.     //触摸结束处理   
  21.     var touchEnd = function(e) {   
  22.         //结束点X坐标   
  23.         var x = e.changedTouches[0].clientX;   
  24.         //移动距离   
  25.         var removing = Math.max(startX, x) - Math.min(startX, x);   
  26.         //移动距离超过50px才做处理,不足50px距离则忽略   
  27.         if (removing > 50) {   
  28.             //装载图片的div当前的marginLeft(去除百分号'%')   
  29.             var currMarginLeft = parseInt(img_init.style.marginLeft.match(/[-]?\d+/)[0], 10);   
  30.             /*
  31.              特别说明:
  32.              装载图片的div的marginLef的值:第一张图片为'0%',第二张图片为'-100%',第三张图片为'-200%'……依此类推
  33.             */  
  34.                
  35.             //向左滑动(触摸的开始点大于结束点)   
  36.             if (startX > x) {   
  37.                 if (currMarginLeft > minMarginLeft) {   
  38.                     currMarginLeft -= 100;   
  39.                     var index = currMarginLeft.toString().match(/\d+/)[0] / 100;   
  40.                     var spans = btn_init.getElementsByTagName('span');   
  41.                     index = (index >= spans.length) ? 0: index;   
  42.                     if (index >= spans.length) {   
  43.                         index = spans.length - 1;   
  44.                         currMarginLeft = minMarginLeft   
  45.                     }   
  46.                     //更改按钮组焦点状态   
  47.                     for (var i = 0; i < spans.length; i++) {   
  48.                         if (i !== index) {   
  49.                             spans[i].className = ''  
  50.                         } else {   
  51.                             spans[index].className = 'selected'  
  52.                         }   
  53.                     }   
  54.                     //设置装载图片的div的marginLeft   
  55.                     img_init.style.marginLeft = currMarginLeft + "%"  
  56.                 }   
  57.             //向右滑动(触摸的开始点小于结束点)   
  58.             } else if (startX < x) {   
  59.                 if (currMarginLeft < 0) {   
  60.                     currMarginLeft += 100;   
  61.                     var index = currMarginLeft.toString().match(/\d+/)[0] / 100;   
  62.                     var spans = btn_init.getElementsByTagName('span');   
  63.                     //更改按钮组焦点状态   
  64.                     for (var i = 0; i < spans.length; i++) {   
  65.                         if (i !== index) {   
  66.                             spans[i].className = ''  
  67.                         } else {   
  68.                             spans[index].className = 'selected'  
  69.                         }   
  70.                     }   
  71.                     //设置装载图片的div的marginLeft   
  72.                     img_init.style.marginLeft = currMarginLeft + "%"  
  73.                 }   
  74.             }   
  75.         }   
  76.     };   
  77.     //将touchStart和touchEnd绑定到document上   
  78.     document.addEventListener('touchstart', touchStart, false);   
  79.     document.addEventListener('touchend', touchEnd, false)   
  80. };  

代码也上完了,感兴趣的朋友可以自己弄几张图片结合以上代码测试运行一下,基本前提是你有自己的可供测试的网站空间和一个基本的山寨机,呵呵

如果有不明白的可以评论交流,也欢迎大神指教——这是我的第一个专为触摸屏环境而做的网页!

这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]
[游客]于[2015-10-10]评论[javascript实现智能机上触摸切换图片的网页效果]:

赞一个

[游客]于[2013-12-18]评论[javascript实现智能机上触摸切换图片的网页效果]:

PC已经饱和,移动应用正如日中天,这是很多开发者的当务之急啊

[游客]于[2013-11-06]评论[javascript实现智能机上触摸切换图片的网页效果]:

触屏环境的脚本还没玩过,有时间也了解一下,要不然真的落伍了……