flipsnap--携帯電話のスクリーンの水平スライドのフレーム
24141 ワード
多くの携帯電話のアプリケーションでは、指を横にスライドさせると画面が左か右にスライドする効果が見られます.
HTML 5+CSS 3を使って携帯電話アプリケーションを開発する際にこのような効果を解決するためのjsフレームを紹介します.flipsnap.
flipsnap.jsのソースコードはみんなflipsnap公式サイトに行くことができます.
以下に私が書いた例を挙げます.皆さんは見たら分かります.
HTML 5+CSS 3を使って携帯電話アプリケーションを開発する際にこのような効果を解決するためのjsフレームを紹介します.flipsnap.
flipsnap.jsのソースコードはみんなflipsnap公式サイトに行くことができます.
以下に私が書いた例を挙げます.皆さんは見たら分かります.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> demo</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
/* {*/
body,div,span{ padding:0;margin:0;}
/*} */
.all{width:602px;height:302px;margin:100px auto 0;border:2px red solid;overflow:hidden;}
.inner{width:4816px;height:302px;}
.inner>div{width:600px;height:300px;border:1px blue solid;float:left;font-size:80px;font-weight:bold;text-align:center;line-height:300px;}
.pointer{width:256px;margin:20px auto;overflow:hidden;}
.pointer>span{float:left;width:20px;height:20px;border-radius:50%; margin:0 5px;border:1px #000 solid;}
.color{background:#ff0;}
</style>
</head>
<body>
<div class="all">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<div class="pointer" id="pointer">
<span class="color"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="margin:0px auto;width:80px;" class="go">
<input type="button" value="go" style="width:50px;height:30px;"/>
</div>
<script src="jquery.js"></script> <!-- ， 4、6、7 jquery-->
<script src="flipsnap.js"></script>
<script type="text/javascript">
/*1. */
Flipsnap('.inner'); //
/*2. */
//Flipsnap('.inner',{
//distance:602 // ， ； ： ,
//});
/*3. , ， */
//Flipsnap('.inner',{
//distance:602,
//maxPoint:7 //
//});
/*4. */
/*var $pointer=$('.pointer span');
var flipsnap=Flipsnap('.inner',{distance:602});
flipsnap.element.addEventListener('fsmoveend',function(){
$pointer.filter('.color').removeClass('color'); //filter jquery ，
$pointer.eq(flipsnap.currentPoint).addClass('color');
},false);*/
/*5.refresh */
//var flipsnap=Flipsnap('.inner');
//flipsnap.refresh(); // ， ，
/*6. , */
/*var flipsnap = Flipsnap('.inner', {
distance: 602,
disableTouch: true //true ; false
});
$('.go').click(function() {
//flipsnap.moveToPoint(3); // , n+1
flipsnap.toNext(); //
//flipsnap.toPrev(); //
});*/
/*7.next, prev*/
/*var flipsnap = Flipsnap('.inner', {
distance: 602,
disableTouch: true //true ; false
});
$('.go').click(function() {
flipsnap.toNext(); //
//flipsnap.toPrev(); //
});*/
</script>
</body>
</html>