Skip to content

Commit

Permalink
remove some method & property
Browse files Browse the repository at this point in the history
  • Loading branch information
@progrape
progrape committed Oct 26, 2015
1 parent 711be93 commit bbe462d
Show file tree
Hide file tree
Showing 11 changed files with 157 additions and 237 deletions.
27 changes: 0 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,33 +81,6 @@
});
```

###HTML属性

- toggle-class

通常，制作此类页面，都是滑动时，对某些元素添加或者移除某些`class`，因此`swiper.js`支持在需要切换`class`的元素中，预先写入`toggle-class`属性。当滑动到当前屏时，自动查找拥有`toggle-class`属性的元素，并且为之添加上`toggle-class`的值，同时对上一屏中，拥有`toggle-class`属性的元素，移除`toggle-class`的值。如果需要添加或移除多个`class`，则以空格分隔。

- data-delay

添加class的延时时间，单位`ms`。

举例：

```html
<div class="swiper">
<div class="item item1">
<!-- 当出现第一屏时，自动为以下元素添加“slide_in”类，当滑动到下一屏时，自动移除 -->
<h1 class="bear" toggle-class="slide_in">bear</h1>
<!-- 延时800ms添加class -->
<h2 class="bear" data-delay="800" toggle-class="slide_in">jf</h2>
</div>
<div class="item item2">
<!-- 同上 -->
<h1 class="hehe" toggle-class="slide_in">kiki</h1>
</div>
</div>
```

##体验

![](http://wechatui.github.io/swiper/images/example.jpg)
Expand Down
53 changes: 2 additions & 51 deletions dist/example/example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,7 @@ body {
height: 100%;
overflow: hidden;
}
.swiper {
height: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item {
height: 100%;
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
float: left;
}
.item .animated{
display: block !important;
}

.item .title{
text-align: center;
display: none;
position: absolute;
top: 50%;
margin-top: -100px;
width: 100%;
}

.item .signature{
display: none;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}

.item .signature2{
display: none;
position: absolute;
top: 50%;
width: 100%;
margin-top: 50px;
text-align: center;
}

.item1{
background: #576477;
color: #ffffff;
}
.item2{
background: #000000;
color: #ffffff;
.container{
height: 100%;
}
35 changes: 21 additions & 14 deletions dist/example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,35 @@
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>albums</title>
<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css"/>
<title>swiper</title>
<link rel="stylesheet" href="../swiper.css"/>
<link rel="stylesheet" href="example.css"/>
</head>
<body>

<div class="container">
<div class="swiper">
<div class="item item1">
<h1 class="title" toggle-class="bounceInLeft animated">i am bear</h1>
<p class="signature" toggle-class="bounceInLeft animated">bear is x</p>
<p class="signature2" toggle-class="lightSpeedIn animated">x is bear</p>
<h1 class="title">i am bear</h1>

<p class="signature">bear is x</p>

<p class="signature2">x is bear</p>
</div>
<div class="item item2">
<h1 class="title" toggle-class="bounceInRight animated">i am jf</h1>
<p class="signature" toggle-class="bounceInLeft animated">hello</p>
<p class="signature2" toggle-class="lightSpeedIn animated">word</p>
<h1 class="title">i am jf</h1>

<p class="signature">hello</p>

<p class="signature2">word</p>
</div>
</div>

<script src="../swiper.js"></script>
<script>
var swiper = new Swiper({});
</script>
</div>
<script src="../swiper.js"></script>
<script>
var swiper = new Swiper();
swiper.on('swiped', function (prev, current){
console.log(prev, current);
});
</script>
</body>
</html>
14 changes: 14 additions & 0 deletions dist/swiper.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.swiper {
height: 100%;
overflow: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item {
height: 100%;
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
float: left;
}
2 changes: 1 addition & 1 deletion dist/swiper.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 42 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,32 @@
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var rename = require('gulp-rename');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var tap = require('gulp-tap');
var browserSync = require('browser-sync');
var config = require('./package.json');
var version = config.version;

gulp.task('build', function () {
gulp.task('build', ['lint'], function () {
gulp.src('src/example/**/*')
.pipe(gulp.dest('dist/example'));

gulp.src('src/swiper.less')
.pipe(less().on('error', function (e){
console.error(e.message);
this.emit('end');
}))
.pipe(autoprefixer())
.pipe(gulp.dest('dist'));

gulp.src('src/swiper.js')
.pipe(tap(function(file, t){
var contents = file.contents.toString();
contents = contents.replace('${version}', version);
file.contents = new Buffer(contents);
}))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
Expand All @@ -22,4 +42,24 @@ gulp.task('lint', function () {
.pipe(jshint.reporter('default'));
});

gulp.task('default', ['lint', 'build']);
gulp.task('server', function () {
browserSync.init({
server: {
baseDir: "./dist"
},
ui: {
port: 8081,
weinre: {
port: 9090
}
},
port: 8080,
startPath: '/example'
});
});

gulp.task('watch', ['build', 'server'], function (){
gulp.watch('src/**/*', ['build']);
});

gulp.task('default', ['watch']);
9 changes: 6 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,13 @@
},
"license": "MIT",
"devDependencies": {
"better-assert": "^1.0.2",
"browser-sync": "^2.9.11",
"gulp": "~3.8.10",
"gulp-autoprefixer": "^3.1.0",
"gulp-jshint": "~1.9.0",
"gulp-uglify": "^1.0.2",
"jsdom": "^5.6.1"
"gulp-less": "^3.0.3",
"gulp-rename": "^1.2.2",
"gulp-tap": "^0.1.3",
"gulp-uglify": "^1.0.2"
}
}
53 changes: 2 additions & 51 deletions src/example/example.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,7 @@ body {
height: 100%;
overflow: hidden;
}
.swiper {
height: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item {
height: 100%;
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
float: left;
}
.item .animated{
display: block !important;
}

.item .title{
text-align: center;
display: none;
position: absolute;
top: 50%;
margin-top: -100px;
width: 100%;
}

.item .signature{
display: none;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}

.item .signature2{
display: none;
position: absolute;
top: 50%;
width: 100%;
margin-top: 50px;
text-align: center;
}

.item1{
background: #576477;
color: #ffffff;
}
.item2{
background: #000000;
color: #ffffff;
.container{
height: 100%;
}
35 changes: 21 additions & 14 deletions src/example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,35 @@
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>albums</title>
<link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css"/>
<title>swiper</title>
<link rel="stylesheet" href="../swiper.css"/>
<link rel="stylesheet" href="example.css"/>
</head>
<body>

<div class="container">
<div class="swiper">
<div class="item item1">
<h1 class="title" toggle-class="bounceInLeft animated">i am bear</h1>
<p class="signature" data-delay="1000" toggle-class="bounceInLeft animated">bear is x</p>
<p class="signature2" data-delay="2000" toggle-class="lightSpeedIn animated">x is bear</p>
<h1 class="title">i am bear</h1>

<p class="signature">bear is x</p>

<p class="signature2">x is bear</p>
</div>
<div class="item item2">
<h1 class="title" toggle-class="bounceInRight animated">i am jf</h1>
<p class="signature" data-delay="1000" toggle-class="bounceInLeft animated">hello</p>
<p class="signature2" data-delay="2000" toggle-class="lightSpeedIn animated">word</p>
<h1 class="title">i am jf</h1>

<p class="signature">hello</p>

<p class="signature2">word</p>
</div>
</div>

<script src="../swiper.js"></script>
<script>
var swiper = new Swiper({});
</script>
</div>
<script src="../swiper.js"></script>
<script>
var swiper = new Swiper();
swiper.on('swiped', function (prev, current){
console.log(prev, current);
});
</script>
</body>
</html>
Loading

0 comments on commit bbe462d

Please sign in to comment.