首先设置元素出状态 top （js 的 clientHeight）
利用 css3 transition，（例：transition: top .2s ease）
然后通过事件改变 top 的值，达到滑动的效果（top: client页面高度 ->top: 0）
（以上仅为参考，该元素需要 position: fixed）
复杂的可以再去上网寻找下各种例子，甚至是尝试模仿一些app的效果自己做点东西出来
使用JQuery实现的。具体你看他的代码可以看得到的。<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>WEAVER 10th Year</title>
<meta name="description" content="WEAVER" />
<!--<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">-->
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<link rel="apple-touch-icon" sizes="57x57" href="images/logo/icon_57.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="images/logo/icon_72.jpg">
<link data-logo="" rel="apple-touch-icon" sizes="114x114" href="images/logo/icon_114.jpg">-->
<!--<link rel="stylesheet" href="css/swiper.css">-->
<style type="text/css">
*{margin:0padding:0}body{background:
#66ceffmargin:0font-family:Arial,Helvetica,sans-seriffont-size:13pxline-height:1.5}.swiper-container{height:1008pxwidth:640px}.device{width:640pxheight:automargin:0
autoposition:relativeoverflow:hidden}.wiper-container{height:au
towidth:640pxoverflow:hidden}img{display:blockborder:0}.hide{display:none}.rel{position:relative}.abs{position:absolute}.swiper-slide{width:640pxheight:1008px}.swiper-slide
div{position:absolutewidth:100%height:100%left:0top:0z-index:9}div.bg{tex
t-align:centerz-index:9}div.main{z-index:2}div.draw{opacity:0}div.resize
img{width:0bottom:0right:0}div.down
img{width:0bottom:0right:0}div.info{left:640px}.WEAVER-audio .music p
span{background:url(images/music.png) no-repeat 0
0background-size:cover
cursor:pointer}.WEAVER-audio{top:1%right:1%z-index:999max-width:50px}.WEAVER-audio
.music p{width:100%height:100%}.WEAVER-audio .music p
span{display:nonewidth:100%height:100%}.WEAVER-audio .music p
span:first-child{display:block}.WEAVER-audio .music audio{h
eight:0width:0opacity:0}.WEAVER-audio
.music p span.audio_open{background-position:-100% 0}.WEAVER-audio
.music p span.audio_close{background-position:0
0}.loading{text-align:centerheight:128pxwidth:100%z-index:99top:0left:0}.loading
img{width:128pxma
rgin:0
auto}div.videocontroller,div.video{bottom:0left:0height:39%width:100%z-index:9}div.video{z-index:10}.citylist{width:50%height:23%z-index:9top:30.75%left:25%}.citylist
a{display:blockfloat:leftwidth:33%height:25%overflow:hiddentext-inde
nt:-200%}
.topShare { opacity:0display:none}.light{ cursor:pointerposition:
absoluteleft: -180pxtop: 0width: 180pxheight: 90px
background-image:
-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
backg
round-image:
-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0))
transform: skewx(-25deg)-o-transform: skewx(-25deg)-moz-transform:
skewx(-25deg)-webkit-transform: skewx(-25deg)}
</style>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0">
<script async="" src="js/analytics.js"></script><script type="text/javascript">
var phoneWidth = parseInt(window.screen.width)
var phoneScale = phoneWidth/640
var ua = navigator.userAgent
if (/Android (\d+\.\d+)/.test(ua)){
if (phoneWidth > 640) {
document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">')
}
} else {
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">')
}
</script>
</head>
<body>
<div id="loading" class="loading"><img style="margin: auto" src="images/load.gif"/></div>
<div class="device rel" id="device">
<div class="swiper-container" id="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide rel"><div
class="main"><img src="images/index.gif"></div><div
class="bg rel"><div id="light"><img
src="images/light.png"></div></div></div>
<div class="swiper-slide rel">
<div class="main"><img src="images/page1.jpg"></div>
<div class="bg rel"><div class="draw"><img src="images/page1-2.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page2.jpg"></div>
<div class="bg rel"><div
class="draw"><img class="lazy"
data-original="images/page2-2.gif"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page3.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page3-2.gif"></div><div
class="info"><img class="lazy"
data-original="images/page3-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page4.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page4-2.png"></div><div
class="info"><img class="lazy"
data-original="images/page4-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" data-original="images/page5.jpg"></div>
<div class="bg rel"><div class="draw"><img
class="lazy" data-original="images/page5-2.gif"></div><div
class="info"><img class="lazy"
data-original="images/page5-3.png"></div></div>
</div>
<div class="swiper-slide rel">
<div class="main"><img class="lazy" id="cityMain1" data-original="images/WEAVER_city_1.jpg"></div>
<div class="bg rel"><div
class="draw"><img class="lazy" id="cityMark1"
data-original="images/WEAVER_city_1.png"></div><div
class="topShare" id="topShare"><img class="lazy"
data-original="images/share.jpg"></div></div>
</div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=ri[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date()a=s.createElement(o),
m=s.getElementsByTagName(o)[0]a.async=1a.src=gm.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga')
ga('create', 'UA-49138262-1', 'WEAVER.cn')
ga('send', 'pageview')
</script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
!window.jQuery &&document.write('<scr' + 'ipt
type="text/javascript" src="js/jquery-1.8.2.js"></scr' +
'ipt>')
</script>
<script>
function gaEventgo(ev, mark){ ga('send', 'event', ev , mark)}
$(document).ready(function(e) {
var _topShare = $("#topShare")
var _lightShow = $("#light"), _tmp = 0
var
interLight = setInterval(function(){ if(++_tmp>6) {
clearInterval(interLight)_lightShow.hide()}
_lightShow.animate({opacity:0}, 1000 ).animate({opacity:1}, 1000)},
2000)
$("#cityMark1").on('click', function(){ _topShare.show().animate({opacity:1} ,{duration:800})})
_topShare.on('click', function(){ _topShare.hide()})
$("#videocontroller").on('click',function(){ gaEventgo('video', 'player')})
})
</script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
