Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2825ff8

Browse files
max-levelmax-level
committed
提交完成 有BUGg
1 parent eb98ca7 commit 2825ff8

3 files changed

Lines changed: 93 additions & 12 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
</style>
4747
</head>
4848
<body>
49-
<div id="container">
49+
<div id="container" data-PageSwitch>
5050
<div class="sections">
5151
<div class="section" id="section0">
5252
<h3>this is the page</h3>
@@ -62,13 +62,13 @@ <h3>this is the page</h3>
6262
</div>
6363
</div>
6464
</div>
65-
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
65+
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
6666
<script src="pageswitch.js"></script>
6767
<script>
6868
// $("#container").PageSwitch({
6969
// dirction:'herizontal'
7070
// });
71-
$("#container").PageSwitch();
71+
//$("#container").PageSwitch();
7272

7373

7474
</script>

‎pageswitch.js‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
(function($){
2-
var privateFun = function(){
3-
//
4-
}
2+
"use strict";
3+
4+
var _prefix = (function(temp){
5+
var aPrefix = ["webkit", "Moz", "o", "ms"],
6+
props = "";
7+
8+
for(var i in aPrefix){
9+
props = aPrefix[i] + "Transition";
10+
if(temp.style[ props] !== undefined){
11+
return "-"+aPrefix[i].toLowerCase()+"-";
12+
}
13+
}
14+
15+
return false;
16+
})(document.createElement("PageSwitch"));
17+
518
$.fn.PageSwitch = function(options){
619
var PageSwitch = (function(){
720
function PageSwitch(element, options){
@@ -16,12 +29,12 @@
1629
var me = this;
1730

1831
me.selectors = me.settings.selectors;
19-
me.sections = me.selectors.sections;
20-
me.section = me.selectors.section;
32+
me.sections = me.element.find(me.selectors.sections);
33+
me.section = me.sections.find(me.selectors.section);
2134

2235
me.direction = me.settings.direction == 'vertical' ? true : false;
2336
me.pagesCount = me.pagesCount();
24-
me.index = (me.settings.index >= 0 && me.settings.index < pagesCount) ? me.settings.index : 0;
37+
me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;
2538

2639
if(!me.direction) {
2740
me._initLayout();
@@ -65,15 +78,15 @@
6578
_initLayout : function() {
6679
var me = this;
6780
var width = (me.pagesCount * 100) + "%",
68-
cellWidth = (100/me.pageCount).toFixed(2) + "%",
81+
cellWidth = (100/me.pageCount).toFixed(2) + "%";
6982
me.sections.width(width);
7083
me.section.width(cellWidth).css("float", "left");
7184
},
7285
// 说明： 实现分页的dom结构及css样式
7386
_initPaging : function() {
7487
var me = this,
75-
pagesClass = me.selectors.page.substring(1),
76-
activeClass = me.selectors.active.substring(1);
88+
pagesClass = me.selectors.page.substring(1);
89+
me.activeClass = me.selectors.active.substring(1);
7790
var pageHtml = "<ul class=" + pagesClass + ">";
7891
for(var i=0; i<me.pagesCount;i++){
7992
pageHtml += "<li></li>";
@@ -118,6 +131,48 @@
118131
}
119132
});
120133
}
134+
135+
$(window).resize(function(e){
136+
var currentLength = me.switchLength(),
137+
offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
138+
139+
if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){
140+
me.index ++;
141+
}
142+
if(me.index){
143+
me._scrollPage();
144+
}
145+
});
146+
147+
me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
148+
if(me.settings.callback && $.type(me.settings.callback) == "function"){
149+
me.settings.callback();
150+
}
151+
});
152+
},
153+
154+
_scrollPage : function(){
155+
var me = this,
156+
dest = me.section.eq(me.index).position();
157+
158+
if(!dest) return;
159+
160+
if(_prefix){
161+
me.sections.css(_prefix+"transition", "all " + me.settings.duration + "ms " + me.settings.easing);
162+
var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
163+
me.sections.css(_prefix+"transform", translate);
164+
}else{
165+
var animateCss = me.direction ? {top:-dest.top} : {left:-dest.left};
166+
me.sections.animate(animateCss, me.settings.duration, function(){
167+
if(me.settings.callback && $.type(me.settings.callback) == "function"){
168+
me.settings.callback();
169+
}
170+
});
171+
}
172+
173+
if(me.settings.pagination){
174+
me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
175+
}
121176
}
122177
}
123178
return PageSwitch;

‎transition.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>transition</title>
6+
<style>
7+
#box {
8+
width:100px;
9+
height: 100px;
10+
background-color: red;
11+
margin:50px;
12+
transition:all 500ms linear;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="box"></div>
18+
<script>
19+
var box = document.getElementById("box");
20+
box.onclick = function(){
21+
box.style.transform = "translate(300px, 300px)";
22+
box.style.background = "black";
23+
}
24+
</script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)