使用jQuery和CSS制作一个精巧的手机应用网站
八月 17, 2010 by zeze · Leave a Comment
做为网页开发人员，你的工作必须要对细节的关注。一个好的交互应用它往往是会留下持久的印象，无论是可爱的人物画像，或独特的幻灯片。
今天，我们正在一个完整的jQuery和CSS的网页，一个虚构的移动应用。它是将功能语义标记和逐步增强的幻灯片效果。它将使用户能够看到最流行的移动应用程序运行智能手机。
Step 1 – XHTML
当网站建设，重要的是你躺在一个语义方式代码。这将包括使用他们被认为是用来标记。您应该使用标题标题，文字段落，而不是一般div的（），并列出如适用。
mobileapp.html
<div id="page">
<h1 id="logoh1"><a href="/" id="logo">MobileApp - the most useful mobile app!</a></h1>
<div id="phoneCarousel">
<div></div>
<div></div>
<div id="stage">
<img id="iphone" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
<img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
<img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
<img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
</div>
</div>
<img src="img/available_on_the_appstore.png" width="230" height="80" alt="Available on the Appstore" />
<div>
<h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" />A wonderful app</h3>
<p>Lorem ipsum dolor sit amet.. </p>
</div>
<div>
<h3><img src="img/thumb.png" alt="MobileApp" width="114" height="114" />More awesome facts</h3>
<p>Lorem ipsum dolor sit amet.. </p>
</div>
</div>
Step 2 – CSS
CSS负责转换成一个真正语义标注我们的网站。仔细看看这个#剧种在第二部分的代码,因为这些是什么使动画的可能。
styles.css – Part 1
body{
font-size:14px;
color:#515151;
background:url('img/bg.png') repeat-x #f6f8f9;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
}
#logoh1{ margin:40px 0 0;}
#page{
/* This the main container div */
width:1000px;
min-height:700px;
margin:0 auto;
background:url('img/bokeh.jpg') no-repeat 0 120px;
position:relative;
padding-top:1px;
}
#phoneCarousel{
/* This is the carousel section, it
contains the stage and the arrows */
height:390px;
margin:90px auto 120px;
position:relative;
width:800px;
}
#phoneCarousel .arrow{
/* The two arrows */
width:44px;
height:44px;
background:url('img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-22px;
left:0;
cursor:pointer;
}
#phoneCarousel .next{
/* Individual styles for the next icon */
background-position:right top;
left:auto;
right:0;
}
/* Hover styles */
#phoneCarousel .arrow:hover{
background-position:left bottom;
}
#phoneCarousel .next:hover{
background-position:right bottom;
}
定义了身体风格,我们可以继续造型的页面,这一切在一起处理。其背景图像,因此抵消120px垂直的背景匹配的身体,填满宽度的页面。
其次是# phoneCarousel师。它有一个相对定位应用,所以阶段(所有的动画发生)可适当集中。前/下的箭风格。
styles.css – Part 2
#logo{
background:url('img/logo.png') no-repeat;
height:40px;
text-indent:-9999px;
width:210px;
display:block;
}
#stage{
/* The stage contains the animated phone images */
left:50%;
margin-left:-350px;
position:absolute;
width:700px;
height:100%;
}
#stage img{
/* Hiding all the images by default */
display:none;
}
#stage .default{
/* This class is applied only to the iphone img by default
and it is the only one visible if JS is disabled */
display:block;
left:50%;
margin-left:-135px;
position:absolute;
}
#stage .animationReady{
/* This class is assigned to the images on load */
display:block;
position:absolute;
top:0;
left:0;
}
.text{ margin-top:70px;width:700px;}
.text p,
.text h3{
padding-bottom:15px;
line-height:1.4;
text-align:justify;
}
.text h3{ font-size:30px;}
.text p{ font-size:20px;}
.thumb{ float:left;margin-right:40px;}
.availableAppStore{float:right;}
在第二部分的样式表,我们继续#舞台风格。手机图片是隐藏的默认情况下,所以如果JavaScript的残疾,用户是不会留下一大堆零散的图片。
正如你将看到的下一步,动画是通过改变了,剩下的CSS属性。这个工作,必须绝对位置。这就是为什么.animatonReady类是指定使用jQuery负载(如果JS被禁用掉,这个风格不适用)。
最后我们风格的文本块,这说明我们MobileApp虚构的细节。
Step 3 – jQuery
当你点击箭头,一个动画开始,采用正弦和余弦计算移动和缩减图片,创造幻觉中的一个圆形的运动。它并不像听上去那么复杂,因为你可以看到自己的代码如下。
script.js
$(document).ready(function(){
var deg=0;
/* Storing all the images into a variable */
var images = $('#stage img').removeClass('default').addClass('animationReady');
var dim = { width:images.width(),height:images.height()};
var cnt = images.length;
/* Finding the centers of the animation container: */
var centerX = $('#stage').width()/2;
var centerY = $('#stage').height()/2 - dim.height/2;
function rotate(step,total){
// This function will loop through all the phone images, and rotate them
// with "step" degrees (10 in this implementation) till total > 0
/* Increment the degrees: */
deg+=step;
var eSin,eCos,newWidth,newHeight,q;
/* Loop through all the images: */
for(var i=0;i<cnt;i++){
/* Calculate the sine and cosine for the i-th image */
q = ((360/cnt)*i+deg)*Math.PI/180;
eSin = Math.sin(q);
eCos = Math.cos(q);
/*
/ With the sine value, we can calculate the vertical movement,
/ and the cosine will give us the horizontal movement.
*/
q = (0.6+eSin*0.4);
newWidth = q*dim.width;
newHeight = q*dim.height;
/*
/ We are using the calculated sine value (which is in the range
/ of -1 to 1) to calculate the opacity and z-index. The
/ frontmost image has a sine value of 1, while the backmost
/ one has a sine value of -1.
*/
// eq() extracts the image at the i-th position:
images.eq(i).css({
top : centerY+15*eSin,
left : centerX+200*eCos,
opacity : 0.8+eSin*0.2,
marginLeft : -newWidth/2,
zIndex : Math.round(80+eSin*20)
}).width(newWidth).height(newHeight);
}
total-=Math.abs(step);
if(total<=0) return false;
// Setting the function to be run again in 40 milliseconds (equals to 25 frames per second):
setTimeout(function(){rotate(step,total)},40);
}
// Running the animation once at load time (and moving the iPhone into view):
rotate(10,360/cnt);
$('#phoneCarousel .previous').click(function(){
// 360/cnt lets us distribute the phones evenly in a circle
rotate(-10,360/cnt);
});
$('#phoneCarousel .next').click(function(){
rotate(10,360/cnt);
});
});
开始一个动画,你只需要拨打旋转功能与两种观点——一个步骤,总共旋转,它们都编号。可以是负面的,这意味着转动是运行在相反的方向。每一次的功能是跑,一共是递减的绝对值的步骤,一旦接近零动画停止。
在很多地方都在这个代码,你可以看到,我使用了一种具体的计算- 360 /问。这样做是为了均匀分布的手机的号码(360度转圈)。用这种方法你可以添加或删除图象,他们将被适当的动画。
英文原文：Making a Slick MobileApp Website with jQuery & CSS
翻译：web启点
相关文章
« 上页 中国邮政杀入B2C 网购价格直线下降加剧竞争30款漂亮的jQuery提示气泡插件 下页 »
