<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整屏滾動</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $h = $(window).height();
var $pages = $('.pages');
var $points = $('.points li');
var len = $pages.length;
var nowscreen = 0;
var timer = null;
$pages.eq(0).addClass('moving');
$pages.css({height:$h});
$(window).mousewheel(function(event, data){
clearTimeout(timer);
timer = setTimeout(function(){
if(data == -1){
nowscreen++;
if(nowscreen > len -1){
nowscreen = len -1;
}
}else{
nowscreen--;
if(nowscreen < 0){
nowscreen = 0;
}
}
$('.pages_con').animate({top: -$h * nowscreen},300);
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
},200);
})
$points.click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top: -$h*$(this).index()}, 300);
$pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
});
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時代的產(chǎn)物夫晌，那時網(wǎng)站的主要內(nèi)容都是靜態(tài)的怕犁，用戶使用網(wǎng)站的行為也以瀏覽為主熟尉。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后慷荔，互聯(lián)網(wǎng)進(jìn)入Web2.0時代耗跛，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)菊碟，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化节芥。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動逆害，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗头镊，這些都是基于前端技術(shù)實現(xiàn)的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前會Photoshop和Dreamweaver就可以制作網(wǎng)頁魄幕，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了相艇。無論是開發(fā)難度上，還是開發(fā)方式上纯陨，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)坛芽，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)翼抠。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要咙轩，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近幾年來備受青睞阴颖。Web前端開發(fā)是一項很特殊的工作活喊，涵蓋的知識面非常廣，既有具體的技術(shù)量愧，又有抽象的理念钾菊。簡單地說，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶侠畔。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<!-- 定位到屏幕右側(cè)的小圓點 -->
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
前端 整屏滾動
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門稀火，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人赌朋，你說我怎么就攤上這事凰狞。” “怎么了沛慢？”我有些...
- 文/不壞的土叔 我叫張陵赡若，是天一觀的道長。 經(jīng)常有香客問我团甲，道長逾冬，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任躺苦，我火速辦了婚禮身腻，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘匹厘。我一直安慰自己嘀趟，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布愈诚。 她就那樣靜靜地躺著去件，像睡著了一般。 火紅的嫁衣襯著肌膚如雪扰路。 梳的紋絲不亂的頭發(fā)上尤溜，一...
- 文/蒼蘭香墨 我猛地睜開眼际插，長吁一口氣：“原來是場噩夢啊……” “哼碘耳！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起框弛，我...
- 正文 年R本政府宣布驶鹉，位于F島的核電站，受9級特大地震影響铣墨，放射性物質(zhì)發(fā)生泄漏室埋。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一伊约、第九天 我趴在偏房一處隱蔽的房頂上張望姚淆。 院中可真熱鬧，春花似錦屡律、人聲如沸腌逢。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽搏讶。三九已至，卻和暖如春霍殴，著一層夾襖步出監(jiān)牢的瞬間媒惕，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 一.問題說明 在使用 collectionView 時,遇到了下面的問題.滾動并非全屏的.如果是全屏則使用isPa...
- 作為前端開發(fā)，頁面修改是難免的弹渔，這不本來好好地首頁胳施，UI妹子告知首頁需要調(diào)整整屏滾動，沒辦法只能修改了（可惜了之前...
