转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
来源:互联网 发布:数据库自然连接例题 编辑:程序博客网 时间:2024/04/29 21:51
刚进一家新公司,公司专做手机App的,由于公司业务太多,传统的方法开发app成本太高,每个app要开发几个版本,公司有个想法就是做webApp来代替传统app。我是才接触到webApp的美工一枚。
今天给小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的:http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/ 他们的轮播刚刚就是针对手机做的,在手机观看下你触摸滑动屏幕就可以切换幻灯片。
注意:本人在此声明,此效果在pc上不支持,所以小伙伴们把这个传上服务器,在用手机浏览器访问体验效果
在网上找到一个非常不错的javascript写的原生插件,代码写的非常标准简洁,压缩后的大小只有4k,调用方法也简单,在这里应该有人会问为什么不用Jquery的插件!就单单为了这个效果就要加载jquery这个库90k+,对整个页面的大小造成了很大的负担,所以还是觉得用原生js写会好些,其实做手机版的网站,最好所有的js都用原生js写,因为这样整个前端页面就会控制在一个页面10k都可能不到的情况。可以完全适应我国坑爹的中国移动2G网络。
手机切屏效果图一张:
html代码:
<div class="addWrap"> <div class="swipe" id="mySwipe"> <div class="swipe-wrap"> <div><a href="javascript:;"><img class="img-responsive" src="images/1.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src="images/2.jpg"/></a></div> <div><a href="javascript:;"><img class="img-responsive" src="images/3.jpg"/></a></div> </div> </div> <ul id="position"> <li class="cur"></li> <li class=""></li> <li class=""></li> </ul></div>
css代码:
body{ margin:0; padding:0}.addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}.addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}.addWrap .swipe-wrap{overflow:hidden;position:relative;}.addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}#position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}#position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}#position li.cur{background-color:#FF0000;}.img-responsive { display: block; max-width: 100%; height: auto;}
由于js源码太长,我这里就直接写调用方法吧,源码我放在压缩包里,大家可以去里面查看,我也已经把自己的注释写进去了,希望能帮助一些能理解代码。(调用方法必须放在DOM后面,请注意)
var bullets = document.getElementById('position').getElementsByTagName('li');var banner = Swipe(document.getElementById('mySwipe'), {auto: 2000,continuous: true,disableScroll:false,callback: function(pos) {var i = bullets.length;while (i--) { bullets[i].className = ' ';}bullets[pos].className = 'cur';}});
http://download.csdn.net/detail/zw200813ht/7326281
10 0
- 转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- 【转】移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- 手机webApp触摸左右滑动切换轮播图片广告
- PC端、移动端都可以用的图片轮播(左右滑动切换)插件及使用
- 移动前端开发WebApp小记
- 移动webapp前端开发小结
- jQuery手机触摸滑动切换图片代码
- WebApp图片轮播banner
- 移动webAPP前端开发代码演示和技巧汇总
- 移动webAPP前端开发代码演示和技巧汇总
- 移动webAPP前端开发代码演示和技巧汇总
- WebApp图标导航HTML5实例-支持手机左右滑动
- iSlider 移动端 Webapp 滑动的最优解决方案
- WebApp 开发中常用的代码片段
- WebApp 开发中常用的代码片段
- 关于bootstrap图片轮播的触摸滑动事件
- MUI前端框架轮播图片+九宫格(左右滑动)
- 移动互联网的未来-Webapp
- IEEE论文格式检查
- 动网论坛密码暴力破解程序代码
- java 求First集和Follow集
- 给ASP增加绘图功能
- Mac osx中如何开启代码高亮
- 转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- 通过PHP的hash冲突漏洞进行DDoS攻击
- 函数整理(变量和转换函数)
- 新人报道!
- 20140510
- C++编程思想笔记(1)
- shell编程之文本与日志过滤
- 简单编写makefile文件,实现GCC4.9编译项目,加入boost库测试等等。。
- mesos