<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>10-4.觸控螢幕，或滑鼠拖曳，向左或向右滑動頁面的圖片：方法3：單一頁面</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
pagenum=1;
$(document).ready(function()
{
//滑鼠按住向右滑，或觸控螢幕向右滑
$('body').bind('swiperight',function(event)
{
//$('#img1').animate({opacity:'0.1'},1000);
//$('#img1').animate({opacity:'0.1'},300).animate({opacity:'1'},1000);
$('#img1').animate({opacity:'0.0'},500,function()
{
pagenum +=1;
if(pagenum >=5) pagenum=1;
$('#img1').attr({src:"animal" + pagenum + ".jpg"});
$('#img1').animate({opacity:'1.0'},500);
$('#head01').html("圖片 animal" + pagenum + ".jpg");
});
});
$('body').bind('swipeleft',function(event)
{
$('#img1').animate({opacity:'0.0'},500,function()
{
pagenum -=1;
if(pagenum <=0) pagenum=4;
$('#img1').attr({src:"animal" + pagenum + ".jpg"});
$('#img1').animate({opacity:'1.0'},500);
$('#head01').html("圖片 animal" + pagenum + ".jpg");
});
});
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1 id ="head01">動物園的可愛動物</h1>
</div>
<div data-role="content">
<p>請觸控螢幕，或滑鼠拖曳，向左或向右滑動</p>
<p>觀看動物圖片</p>
<img src="animal1.JPG" id="img1" width="640" height="480">
</div>
<div data-role="footer">
<h1>保育動物</h1>
</div>
</div>
</body>
</html> |