随笔 - 66  文章 - 0  评论 - 1734  0

一、前言

去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面。每个项目里或多或少的都会有一些触屏事件等。其中有两个用到了jquery触屏幻灯片。刚开始的时候也在百度上搜索了一翻,但最终都没有找到合适的,因此就觉得自己写一个了。下面的例子是我在已前的项目里摘出来的,对于触屏本人也不算老鸟,有写的不足的地方请大家提出反馈意见。附件为源码和使用教程,该幻灯片兼容安卓、iphone、和大winphone手机。可放心使用。使用时请注明版权及出处。

二、内容

幻灯片切换:屏幕的可视区域根据手指触发屏幕的滑动来动态切换需要展示的图片,这里涉及到两个过程:

一、触屏事件监控,手指针对于触屏的滑动事件。

W3C标准针对触屏操作主要用到三大块内容:事件、Touch对象、TouchEvent对象。

共有4个事件:touchstart、touchmove、touchend、touchcancel

(1)touchstart:触摸点触摸到触屏表面时触发。

(2)touchmove:触摸点在触屏上移动时触发。

(3)touchend:触摸点离开触屏上时触发。

(4)touchcancel:触摸点取消时触发。

常用的事件有3种:touchstart、touchmove、touchend

Touch对象共8种属性:identifier、target、screenX、screenY、clientX、clientY、pageX、pageY

(1)identifier:只读,long类型,针对每一个touch事件的统一标识,常用于多指触发的事件处理。

(2)target:只读,EventTarget类型,触摸点所触摸的目标。

(3)screenX:只读,long类型,触摸点位置相对于用户屏幕水平偏移量。

(4)screenY:只读,long类型,触摸点位置相对于用户屏幕垂直偏移量。

(5)clientX:只读,long类型,触摸点位置相对于可视区域的水平偏移量,该偏移量不包含滚动条的偏移量。

(6)clientY:只读,long类型,触摸点位置相对于可视区域的垂直偏移量,该偏移量不包含滚动条的偏移量。

(7)pageX:只读,long类型,触摸点位置相对于页面的水平偏移量,该偏移量包含滚动条的偏移量。

(8)pageY:只读,long类型,触摸点位置相对于页面的垂直偏移量,该偏移量包含滚动条的偏移量。

常用的属性有3种:target、pageX、pageY

TouchEvent对象的7种属性

(1)touches:只读,touchlist类型,当前被触发的touch对象列表。

(2)targetTouches:只读,touchlist类型,

(3)changedTouches:只读,touchlist类型,上次被触发的touch对象列表。这个对象列表是4种事件的touch对集合,针对不同的事件有不同的要求。

  1)touchstart事件:必须是刚刚被触发的touchstart事件对象。

  2)touchmove事件:必须是刚刚被触发的touchmove事件对象。

  3)touchend and touchcancel事件:必须是刚刚移除屏幕的touchend and touchcancel事件对象。

(4)altKey:只读,boolean类型,如果是alt键引发的触屏事件,则返回true,否则为false

(5)metaKey:只读,boolean类型,如果是meta键(不同平台下这个名称或许不同)引发的触屏事件,则返回true,否则为false

(6)ctrlKey:只读,boolean类型,如果是ctrl键引发的触屏事件,则返回true,否则为false

(7)shiftKey:只读,boolean类型,如果是shift键引发的触屏事件,则返回true,否则为false

常用的属性有3种:touches、targetTouches、changedTouches

注意:(在代码中已加入对wp手机的兼容处理)

大WP手机,Microsoft遵循W3C的Pointer Events规范(该规范还在草案审理中),Pointer Events针对触屏的自定义事件有7种: pointerdown、pointerenter、pointerleave、pointermove、pointerout、pointerover、pointerup,这些事件都继承于我们常用的mouse事件。

Pointer Events这里不做过多解释,分别对应鼠标事件如下表所示:

微软鼠标事件与触屏事件对应关系表
mousedown pointerdown 
mouseenter  pointerenter 
mouseleave  pointerleave 
mousemove  pointermove 
mouseout  pointerout 
mouseover  pointerover 
mouseup  pointerup 

因此,根据上面提供的事件及相关的处理机制我们即可针对用户触屏的事件做处理,如:touchstart时保存手指在屏幕上的位置,touchend时监控手指在屏幕上的位置。当横向的滑动位置大小一定宽度时我们认为手指在触屏上是有效滑动。(例子中的幻灯片是以30px为界限)。

例如:

touchstart在屏幕横向20px,touchend在屏幕横向40px,即:横向为20px的距离,说明手指向右滑动。

touchstart在屏幕横向20px,touchend在屏幕横向10px,即:横向为-10px的距离,说明手指向左滑动。

示例代码如下:

 1  document.getElementById("xtouchslider-wrapper").addEventListener('touchstart', touchstarthandler, false);
 2             document.getElementById("xtouchslider-wrapper").addEventListener('touchmove', touchmovehandler, false);
 3             document.getElementById("xtouchslider-wrapper").addEventListener('touchend', touchendhandler, false);
 4             function touchstarthandler(event) {
 5                 x1 = event.touches[0].pageX;
 6             }
 7             function touchmovehandler(event) {
 8                 event.preventDefault();//禁止浏览器默认事件
 9             }
10             function touchendhandler(event) {
11                 x2 = event.changedTouches[0].pageX;
12                 //判断滑动的距离
13                 if ((x1 - x2) > 30)//左滑动
14                 {
15                     scrollleft();
16                 }
17 
18                 if ((x1 - x2) < -30)//右滑动
19                 {
20                     scrollright();
21                 }
22             }

二、触屏事件处理

如:淡时淡出切换图片、左右滑动切换图片等(此处以最常见的左右滑动为示例)。

在没有css3这前,一般针对这类简单的动画都是使用setTimeOut()结合css绝对定位来处理动画过程,但触屏手机大部份浏览器都是基于webkit内核,对css3的支持很好,我们在做幻灯动画处理的时候使用css3动画+定位进行动画的处理。

css3中我们主要用到的是@keyframes 规则与transform 属性。

@keyframes 规则用于创建动画。

transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

 1 /*item从左向右移入可视区*/
 2 .xtouchslider-item-scroll-right-in {
 3     z-index: 1000;
 4     -moz-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Firefox */
 5     -webkit-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Safari 和 Chrome */
 6     -o-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Opera */
 7     animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear;
 8 }
 9 
10 @keyframes xtouchslider-item-scroll-right-in-animation {
11     0% {
12         -ms-transform: translateX(-100%); /* IE 9 */
13         -moz-transform: translateX(-100%); /* Firefox */
14         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
15         -o-transform: translateX(-100%); /* Opera */
16         transform: translateX(-100%);
17     }
18 
19     100% {
20         -ms-transform: translateX(0%); /* IE 9 */
21         -moz-transform: translateX(0%); /* Firefox */
22         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
23         -o-transform: translateX(0%); /* Opera */
24         transform: translateX(0%);
25     }
26 }

三、源码及使用

1、JS源码

  1 $(document).ready(function () {
  2     //根据item的数量创建icon
  3     (function () {
  4         var count = $(".xtouchslider-item-wrapper").children("div").length;//获取图片数量
  5         if (count > 0) {
  6             for (var i = 0; i < count; i++) {//添加icon项目
  7                 $(".xtouchslider-icon-wrapper").append("<div class=\"xtouchslider-icon\"></div>");
  8             }
  9             //首项设置为选中
 10             $(".xtouchslider-icon").first().removeClass("xtouchslider-icon").addClass("xtouchslider-icon-on");
 11         }
 12     }());
 13     //xtouchslider对象
 14     $.xtouchslider = {
 15         wrapper: $(".xtouchslider-wrapper"),
 16         items: {
 17             wrapper: $(".xtouchslider-item-wrapper"),
 18             css: {
 19                 item: "xtouchslider-item",
 20                 itemon: "xtouchslider-item-on",
 21                 scrollleftout: "xtouchslider-item-scroll-left-out",
 22                 scrollleftin: "xtouchslider-item-scroll-left-in",
 23                 scrollrightout: "xtouchslider-item-scroll-right-out",
 24                 scrollrightin: "xtouchslider-item-scroll-right-in"
 25             },
 26             prev: {},
 27             current: {},
 28             next: {},
 29             scroll: function (direction) {
 30                 var that = this;
 31                 function selected(item) {
 32                     item.removeClass(that.css.item).addClass(that.css.itemon);
 33                     switch (direction) {
 34                         case "left":
 35                             item.addClass(that.css.scrollleftin);
 36                             break;
 37                         case "right":
 38                             item.addClass(that.css.scrollrightin);
 39                             break;
 40                     }
 41                 };
 42                 function unselected(item) {
 43                     item.removeClass(that.css.itemon).addClass(that.css.item);
 44                     switch (direction) {
 45                         case "left":
 46                             item.addClass(that.css.scrollleftout);
 47                             break;
 48                         case "right":
 49                             item.addClass(that.css.scrollrightout);
 50                             break;
 51                     }
 52                 };
 53                 switch (direction) {
 54                     case "left":
 55                         if (this.next.length > 0) {
 56                             unselected(this.current);
 57                             selected(this.next);
 58                         }
 59                         break;
 60                     case "right":
 61                         if (this.prev.length > 0) {
 62                             unselected(this.current);
 63                             selected(this.prev);
 64                         }
 65                         break;
 66                 };
 67                 var that = this; setTimeout(function () { that.clear(); }, 500);
 68             },
 69             clear: function () {
 70                 this.wrapper.children().removeClass(this.css.scrollleftout).removeClass(this.css.scrollleftin).removeClass(this.css.scrollrightout).removeClass(this.css.scrollrightin);
 71             }
 72         },
 73         icons: {
 74             wrapper: $(".xtouchslider-icon-wrapper"),
 75             css: {
 76                 icon: "xtouchslider-icon",
 77                 iconon: "xtouchslider-icon-on"
 78             },
 79             prev: {},
 80             current: {},
 81             next: {},
 82             scroll: function (direction) {
 83                 var that = this;
 84                 function unselected(icon) {
 85                     icon.removeClass(that.css.iconon).addClass(that.css.icon);
 86                 };
 87                 function selected(icon) {
 88                     icon.removeClass(that.css.icon).addClass(that.css.iconon);
 89                 };
 90                 switch (direction) {
 91                     case "left":
 92                         if (this.next.length > 0) {
 93                             unselected(this.current);
 94                             selected(this.next);
 95                         }
 96                         break;
 97                     case "right":
 98                         if (this.prev.length > 0) {
 99                             unselected(this.current);
100                             selected(this.prev);
101                         }
102                         break;
103                 };
104             },
105         }
106     };
107     $.xtouchslider.exec = {
108         css: {
109             itemwrapper: ".xtouchslider-item-wrapper",
110             itemon: ".xtouchslider-item-on",
111             iconwrapper: ".xtouchslider-icon-wrapper",
112             iconon: ".xtouchslider-icon-on"
113         },
114         scrollleft: function () {
115             var that = this;
116             var currentitem = $(that.css.itemwrapper).children().filter(that.css.itemon);
117             $.xtouchslider.items.current = currentitem; $.xtouchslider.items.next = currentitem.next();
118             $.xtouchslider.items.scroll("left");
119             var currenticon = $(that.css.iconwrapper).children().filter(that.css.iconon);
120             $.xtouchslider.icons.current = currenticon; $.xtouchslider.icons.next = currenticon.next();
121             $.xtouchslider.icons.scroll("left");
122         },
123         scrollright: function () {
124             var that = this;
125             var currentitem = $(that.css.itemwrapper).children().filter(that.css.itemon);
126             $.xtouchslider.items.current = currentitem; $.xtouchslider.items.prev = currentitem.prev();
127             $.xtouchslider.items.scroll("right");
128             var currenticon = $(that.css.iconwrapper).children().filter(that.css.iconon);
129             $.xtouchslider.icons.current = currenticon; $.xtouchslider.icons.prev = currenticon.prev();
130             $.xtouchslider.icons.scroll("right");
131         }
132     };
133     $.xtouchslider.init = {
134         x1: {},
135         x2: {},
136         main: function () {
137             if (window.navigator.msPointerEnabled) {//winphone浏览器
138                 $(".xtouchslider-wrapper").bind("pointerdown", this.iepointerdown);
139                 $(".xtouchslider-wrapper").bind("pointermove", this.iepointermove);
140                 $(".xtouchslider-wrapper").bind("pointerout", this.iepointerout);
141             }
142             else {
143                 $(".xtouchslider-wrapper").bind("touchstart", this.othertouchstart);
144                 $(".xtouchslider-wrapper").bind("touchmove", this.othertouchmove);
145                 $(".xtouchslider-wrapper").bind("touchend", this.othertouchend);
146             }
147         },
148         iepointerdown: function (event) {
149             this.x1 = event.originalEvent.pageX;
150         },
151         iepointermove: function (event) {
152             event.originalEvent.preventDefault();
153         },
154         iepointerout: function (event) {
155             this.x2 = event.originalEvent.pageX;
156             if ((this.x1 - this.x2) > 30) {
157                 $.xtouchslider.exec.scrollleft();
158             }
159 
160             if ((this.x1 - this.x2) < -30) {
161                 $.xtouchslider.exec.scrollright();
162             }
163         },
164         othertouchstart: function (event) {
165             this.x1 = event.originalEvent.touches[0].pageX;
166         },
167         othertouchmove: function (event) {
168             event.originalEvent.preventDefault();
169         },
170         othertouchend: function (event) {
171             this.x2 = event.originalEvent.changedTouches[0].pageX;
172             if ((this.x1 - this.x2) > 30) {
173                 $.xtouchslider.exec.scrollleft();
174             }
175             if ((this.x1 - this.x2) < -30) {
176                 $.xtouchslider.exec.scrollright();
177             }
178         }
179     };
180     $.xtouchslider.init.main();
181 });

2、Css源码

  1 .xtouchslider-wrapper {
  2     position: relative;
  3     width: 100%;
  4     height: 100%;
  5     overflow: hidden;
  6 }
  7 
  8 .xtouchslider-item, .xtouchslider-item-on {
  9     width: 100%;
 10     height: 100%;
 11     position: absolute;
 12     z-index: 999;
 13 }
 14 
 15     .xtouchslider-item img, .xtouchslider-item-on img {
 16         width: 100%;
 17         height: 100%;
 18     }
 19 
 20 .xtouchslider-item-on {
 21     z-index: 1000;
 22 }
 23 
 24 .xtouchslider-icon-wrapper {
 25     position: absolute;
 26     z-index: 1001;
 27     bottom: 5%;
 28     width: 100%;
 29     height: 5%;
 30     text-align: center;
 31     display: table;
 32 }
 33 
 34 .xtouchslider-icon, .xtouchslider-icon-on {
 35     background: #ffffff;
 36     width: 1.2em;
 37     height: 1.2em;
 38     border-radius: 1.2em;
 39     margin-right: 1em;
 40     opacity: 0.5;
 41     display: inline-block;
 42     float: none;
 43 }
 44 
 45 .xtouchslider-icon-wrapper div:last-child {
 46     margin-right: 0em;
 47 }
 48 
 49 .xtouchslider-icon-on {
 50     background: #ff6a00;
 51 }
 52 
 53 /*item由当前位置向左移出可视区*/
 54 .xtouchslider-item-scroll-left-out {
 55     z-index: 1000;
 56     -moz-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Firefox */
 57     -webkit-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Safari 和 Chrome */
 58     -o-animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear; /* Opera */
 59     animation: xtouchslider-item-scroll-left-out-animation 0.5s both linear;
 60 }
 61 
 62 @keyframes xtouchslider-item-scroll-left-out-animation {
 63     0% {
 64         -ms-transform: translateX(0%); /* IE 9 */
 65         -moz-transform: translateX(0%); /* Firefox */
 66         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
 67         -o-transform: translateX(0%); /* Opera */
 68         transform: translateX(0%);
 69     }
 70 
 71     100% {
 72         -ms-transform: translateX(-100%); /* IE 9 */
 73         -moz-transform: translateX(-100%); /* Firefox */
 74         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
 75         -o-transform: translateX(-100%); /* Opera */
 76         transform: translateX(-100%);
 77     }
 78 }
 79 
 80 @-moz-keyframes xtouchslider-item-scroll-left-out-animation {
 81     0% {
 82         -ms-transform: translateX(0%); /* IE 9 */
 83         -moz-transform: translateX(0%); /* Firefox */
 84         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
 85         -o-transform: translateX(0%); /* Opera */
 86         transform: translateX(0%);
 87     }
 88 
 89     100% {
 90         -ms-transform: translateX(-100%); /* IE 9 */
 91         -moz-transform: translateX(-100%); /* Firefox */
 92         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
 93         -o-transform: translateX(-100%); /* Opera */
 94         transform: translateX(-100%);
 95     }
 96 }
 97 
 98 @-webkit-keyframes xtouchslider-item-scroll-left-out-animation {
 99     0% {
100         -ms-transform: translateX(0%); /* IE 9 */
101         -moz-transform: translateX(0%); /* Firefox */
102         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
103         -o-transform: translateX(0%); /* Opera */
104         transform: translateX(0%);
105     }
106 
107     100% {
108         -ms-transform: translateX(-100%); /* IE 9 */
109         -moz-transform: translateX(-100%); /* Firefox */
110         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
111         -o-transform: translateX(-100%); /* Opera */
112         transform: translateX(-100%);
113     }
114 }
115 
116 /*item从右向左移入可视区*/
117 .xtouchslider-item-scroll-left-in {
118     z-index: 1000;
119     -moz-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Firefox */
120     -webkit-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Safari 和 Chrome */
121     -o-animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear; /* Opera */
122     animation: xtouchslider-item-scroll-left-in-animation 0.5s both linear;
123 }
124 
125 @keyframes xtouchslider-item-scroll-left-in-animation {
126     0% {
127         -ms-transform: translateX(100%); /* IE 9 */
128         -moz-transform: translateX(100%); /* Firefox */
129         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
130         -o-transform: translateX(100%); /* Opera */
131         transform: translateX(100%);
132     }
133 
134     100% {
135         -ms-transform: translateX(0%); /* IE 9 */
136         -moz-transform: translateX(0%); /* Firefox */
137         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
138         -o-transform: translateX(0%); /* Opera */
139         transform: translateX(0%);
140     }
141 }
142 
143 @-moz-keyframes xtouchslider-item-scroll-left-in-animation {
144     0% {
145         -ms-transform: translateX(100%); /* IE 9 */
146         -moz-transform: translateX(100%); /* Firefox */
147         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
148         -o-transform: translateX(100%); /* Opera */
149         transform: translateX(100%);
150     }
151 
152     100% {
153         -ms-transform: translateX(0%); /* IE 9 */
154         -moz-transform: translateX(0%); /* Firefox */
155         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
156         -o-transform: translateX(0%); /* Opera */
157         transform: translateX(0%);
158     }
159 }
160 
161 @-webkit-keyframes xtouchslider-item-scroll-left-in-animation {
162     0% {
163         -ms-transform: translateX(100%); /* IE 9 */
164         -moz-transform: translateX(100%); /* Firefox */
165         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
166         -o-transform: translateX(100%); /* Opera */
167         transform: translateX(100%);
168     }
169 
170     100% {
171         -ms-transform: translateX(0%); /* IE 9 */
172         -moz-transform: translateX(0%); /* Firefox */
173         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
174         -o-transform: translateX(0%); /* Opera */
175         transform: translateX(0%);
176     }
177 }
178 
179 /*item由当前位置向右移出可视区*/
180 .xtouchslider-item-scroll-right-out {
181     z-index: 1000;
182     -moz-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Firefox */
183     -webkit-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Safari 和 Chrome */
184     -o-animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear; /* Opera */
185     animation: xtouchslider-item-scroll-right-out-animation 0.5s both linear;
186 }
187 
188 @keyframes xtouchslider-item-scroll-right-out-animation {
189     0% {
190         -ms-transform: translateX(0%); /* IE 9 */
191         -moz-transform: translateX(0%); /* Firefox */
192         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
193         -o-transform: translateX(0%); /* Opera */
194         transform: translateX(0%);
195     }
196 
197     100% {
198         -ms-transform: translateX(100%); /* IE 9 */
199         -moz-transform: translateX(100%); /* Firefox */
200         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
201         -o-transform: translateX(100%); /* Opera */
202         transform: translateX(100%);
203     }
204 }
205 
206 @-moz-keyframes xtouchslider-item-scroll-right-out-animation {
207     0% {
208         -ms-transform: translateX(0%); /* IE 9 */
209         -moz-transform: translateX(0%); /* Firefox */
210         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
211         -o-transform: translateX(0%); /* Opera */
212         transform: translateX(0%);
213     }
214 
215     100% {
216         -ms-transform: translateX(100%); /* IE 9 */
217         -moz-transform: translateX(100%); /* Firefox */
218         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
219         -o-transform: translateX(100%); /* Opera */
220         transform: translateX(100%);
221     }
222 }
223 
224 @-webkit-keyframes xtouchslider-item-scroll-right-out-animation {
225     0% {
226         -ms-transform: translateX(0%); /* IE 9 */
227         -moz-transform: translateX(0%); /* Firefox */
228         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
229         -o-transform: translateX(0%); /* Opera */
230         transform: translateX(0%);
231     }
232 
233     100% {
234         -ms-transform: translateX(100%); /* IE 9 */
235         -moz-transform: translateX(100%); /* Firefox */
236         -webkit-transform: translateX(100%); /* Safari 和 Chrome */
237         -o-transform: translateX(100%); /* Opera */
238         transform: translateX(100%);
239     }
240 }
241 
242 /*item从左向右移入可视区*/
243 .xtouchslider-item-scroll-right-in {
244     z-index: 1000;
245     -moz-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Firefox */
246     -webkit-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Safari 和 Chrome */
247     -o-animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear; /* Opera */
248     animation: xtouchslider-item-scroll-right-in-animation 0.5s both linear;
249 }
250 
251 @keyframes xtouchslider-item-scroll-right-in-animation {
252     0% {
253         -ms-transform: translateX(-100%); /* IE 9 */
254         -moz-transform: translateX(-100%); /* Firefox */
255         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
256         -o-transform: translateX(-100%); /* Opera */
257         transform: translateX(-100%);
258     }
259 
260     100% {
261         -ms-transform: translateX(0%); /* IE 9 */
262         -moz-transform: translateX(0%); /* Firefox */
263         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
264         -o-transform: translateX(0%); /* Opera */
265         transform: translateX(0%);
266     }
267 }
268 
269 @-moz-keyframes xtouchslider-item-scroll-right-in-animation {
270     0% {
271         -ms-transform: translateX(-100%); /* IE 9 */
272         -moz-transform: translateX(-100%); /* Firefox */
273         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
274         -o-transform: translateX(-100%); /* Opera */
275         transform: translateX(-100%);
276     }
277 
278     100% {
279         -ms-transform: translateX(0%); /* IE 9 */
280         -moz-transform: translateX(0%); /* Firefox */
281         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
282         -o-transform: translateX(0%); /* Opera */
283         transform: translateX(0%);
284     }
285 }
286 
287 @-webkit-keyframes xtouchslider-item-scroll-right-in-animation {
288     0% {
289         -ms-transform: translateX(-100%); /* IE 9 */
290         -moz-transform: translateX(-100%); /* Firefox */
291         -webkit-transform: translateX(-100%); /* Safari 和 Chrome */
292         -o-transform: translateX(-100%); /* Opera */
293         transform: translateX(-100%);
294     }
295 
296     100% {
297         -ms-transform: translateX(0%); /* IE 9 */
298         -moz-transform: translateX(0%); /* Firefox */
299         -webkit-transform: translateX(0%); /* Safari 和 Chrome */
300         -o-transform: translateX(0%); /* Opera */
301         transform: translateX(0%);
302     }
303 }

3、应用实例

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>Jquery幻灯片Demo</title>
 6     <meta name="viewport"  content="target-densitydpi=320,width=640,user-scalable=no" />
 7     <meta name="apple-touch-fullscreen" content="no" />
 8     <link href="Css/xtouchslider.css" rel="stylesheet" />
 9     <script src="Script/jquery-2.1.1.js"></script>
10     <script src="Script/xtouchslider.js"></script>
11     <style type="text/css">
12         html, body {
13             padding: 0px;
14             margin: 0px;
15             height: 100%;
16         }
17 
18         .tempstyle {
19             width: 100%;
20             height: 50%;
21         }
22     </style>
23 </head>
24 <body>
25     <div class="tempstyle">
26         <div class="xtouchslider-wrapper">
27             <div class="xtouchslider-item-wrapper">
28                 <div class="xtouchslider-item-on"><img src="Image/1.png" /></div>
29                 <div class="xtouchslider-item"><img src="Image/2.png" /></div>
30                 <div class="xtouchslider-item"><img src="Image/3.png" /></div>
31                 <div class="xtouchslider-item"><img src="Image/2.png" /></div>
32             </div>
33             <div class="xtouchslider-icon-wrapper">
34             </div>
35         </div>
36     </div>
37 </body>
38 </html>

说明:tempstyle是外层的div,无实际意义,在使用中把这个div换成项目中要放幻灯的div即可。<div class="xtouchslider-wrapper"></div>为内层。xtouchslider-wrapper的样式为宽高都为100%,因此在使用过程中只需要针对tempstyle的div进行设计宽高即可。

4,效果

四、源码打包下载

点我下载源码

版权:http://www.cnblogs.com/iamlilinfeng

posted on 2015-01-07 08:15  李林峰的园子  阅读(...)  评论(...编辑  收藏