Win8风格的Web启动界面
Win8风格的Web启动界面
主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。
页面布局
HTML
< html xmlns ="http://HdhCmsTestw3.org/1999/xhtml" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="lib/style.css" />
< link rel ="shortcut icon" href ="favicon.png" />
< script type ="text/javascript" src ="lib/jquery-1.6.1.min.js" ></ script >
< script type ="text/javascript" src ="lib/jquery.animation.easing.js" ></ script >
< script type ="text/javascript" src ="lib/jquery.mousewheel.min.js" ></ script >
< script type ="text/javascript" src ="source.js" ></ script >
< script type ="text/javascript" src ="lib/script.js" ></ script >
< title > New tab </ title >
</ head >
< body >
< div id ="place" >
< div id ="name1" ></ div >
< div id ="wrapper1" >
< div id ="thumb1-1" ></ div >
< div id ="thumb1-2" ></ div >
< div id ="thumb1-3" ></ div >
< div id ="thumb1-4" ></ div >
< div id ="thumb1-5" ></ div >
< div id ="thumb1-6" ></ div >
< div id ="thumb1-7" ></ div >
< div id ="thumb1-8" ></ div >
< div id ="thumb1-9" ></ div >
< div id ="thumb1-10" ></ div >
< div id ="thumb1-11" ></ div >
< div id ="thumb1-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" />< button type ="submit" ></ button >
< div id ="engines1" >
< div id ="google1" ></ div >
< div id ="bing1" ></ div >
< div id ="yahoo1" ></ div >
< div id ="wikipedia1" ></ div >
</ div >
< div id ="search-engine1" ></ div >
</ form >
</ div > <!-- end wrapper1 -->
< div id ="button1to2" ></ div >
< div id ="button2to1" ></ div >
< div id ="name2" ></ div >
< div id ="wrapper2" >
< div id ="thumb2-1" ></ div >
< div id ="thumb2-2" ></ div >
< div id ="thumb2-3" ></ div >
< div id ="thumb2-4" ></ div >
< div id ="thumb2-5" ></ div >
< div id ="thumb2-6" ></ div >
< div id ="thumb2-7" ></ div >
< div id ="thumb2-8" ></ div >
< div id ="thumb2-9" ></ div >
< div id ="thumb2-10" ></ div >
< div id ="thumb2-11" ></ div >
< div id ="thumb2-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" placeholder ="" />< button type ="submit" ></ button >
< div id ="engines2" >
< div id ="google2" ></ div >
< div id ="bing2" ></ div >
< div id ="yahoo2" ></ div >
< div id ="wikipedia2" ></ div >
</ div >
< div id ="search-engine2" ></ div >
</ form >
</ div > <!-- end wrapper2 -->
< div id ="button2to3" ></ div >
< div id ="button3to2" ></ div >
< div id ="name3" ></ div >
< div id ="wrapper3" >
< div id ="thumb3-1" ></ div >
< div id ="thumb3-2" ></ div >
< div id ="thumb3-3" ></ div >
< div id ="thumb3-4" ></ div >
< div id ="thumb3-5" ></ div >
< div id ="thumb3-6" ></ div >
< div id ="thumb3-7" ></ div >
< div id ="thumb3-8" ></ div >
< div id ="thumb3-9" ></ div >
< div id ="thumb3-10" ></ div >
< div id ="thumb3-11" ></ div >
< div id ="thumb3-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" placeholder ="" />< button type ="submit" ></ button >
< div id ="engines3" >
< div id ="google3" ></ div >
< div id ="bing3" ></ div >
< div id ="yahoo3" ></ div >
< div id ="wikipedia3" ></ div >
</ div >
< div id ="search-engine3" ></ div >
</ form >
</ div > <!-- end wrapper3 -->
</ div > <!-- end place -->
</ body >
</ html >
< html xmlns ="http://HdhCmsTestw3.org/1999/xhtml" >
< head >
< meta http-equiv ="content-type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="lib/style.css" />
< link rel ="shortcut icon" href ="favicon.png" />
< script type ="text/javascript" src ="lib/jquery-1.6.1.min.js" ></ script >
< script type ="text/javascript" src ="lib/jquery.animation.easing.js" ></ script >
< script type ="text/javascript" src ="lib/jquery.mousewheel.min.js" ></ script >
< script type ="text/javascript" src ="source.js" ></ script >
< script type ="text/javascript" src ="lib/script.js" ></ script >
< title > New tab </ title >
</ head >
< body >
< div id ="place" >
< div id ="name1" ></ div >
< div id ="wrapper1" >
< div id ="thumb1-1" ></ div >
< div id ="thumb1-2" ></ div >
< div id ="thumb1-3" ></ div >
< div id ="thumb1-4" ></ div >
< div id ="thumb1-5" ></ div >
< div id ="thumb1-6" ></ div >
< div id ="thumb1-7" ></ div >
< div id ="thumb1-8" ></ div >
< div id ="thumb1-9" ></ div >
< div id ="thumb1-10" ></ div >
< div id ="thumb1-11" ></ div >
< div id ="thumb1-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" />< button type ="submit" ></ button >
< div id ="engines1" >
< div id ="google1" ></ div >
< div id ="bing1" ></ div >
< div id ="yahoo1" ></ div >
< div id ="wikipedia1" ></ div >
</ div >
< div id ="search-engine1" ></ div >
</ form >
</ div > <!-- end wrapper1 -->
< div id ="button1to2" ></ div >
< div id ="button2to1" ></ div >
< div id ="name2" ></ div >
< div id ="wrapper2" >
< div id ="thumb2-1" ></ div >
< div id ="thumb2-2" ></ div >
< div id ="thumb2-3" ></ div >
< div id ="thumb2-4" ></ div >
< div id ="thumb2-5" ></ div >
< div id ="thumb2-6" ></ div >
< div id ="thumb2-7" ></ div >
< div id ="thumb2-8" ></ div >
< div id ="thumb2-9" ></ div >
< div id ="thumb2-10" ></ div >
< div id ="thumb2-11" ></ div >
< div id ="thumb2-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" placeholder ="" />< button type ="submit" ></ button >
< div id ="engines2" >
< div id ="google2" ></ div >
< div id ="bing2" ></ div >
< div id ="yahoo2" ></ div >
< div id ="wikipedia2" ></ div >
</ div >
< div id ="search-engine2" ></ div >
</ form >
</ div > <!-- end wrapper2 -->
< div id ="button2to3" ></ div >
< div id ="button3to2" ></ div >
< div id ="name3" ></ div >
< div id ="wrapper3" >
< div id ="thumb3-1" ></ div >
< div id ="thumb3-2" ></ div >
< div id ="thumb3-3" ></ div >
< div id ="thumb3-4" ></ div >
< div id ="thumb3-5" ></ div >
< div id ="thumb3-6" ></ div >
< div id ="thumb3-7" ></ div >
< div id ="thumb3-8" ></ div >
< div id ="thumb3-9" ></ div >
< div id ="thumb3-10" ></ div >
< div id ="thumb3-11" ></ div >
< div id ="thumb3-12" ></ div >
< form action ="" method ="get" >
< input type ="text" name ="q" value ="" placeholder ="" />< button type ="submit" ></ button >
< div id ="engines3" >
< div id ="google3" ></ div >
< div id ="bing3" ></ div >
< div id ="yahoo3" ></ div >
< div id ="wikipedia3" ></ div >
</ div >
< div id ="search-engine3" ></ div >
</ form >
</ div > <!-- end wrapper3 -->
</ div > <!-- end place -->
</ body >
</ html >
数据源 source.js
var hoverEffect = true ; // set true for hover effect, set false for no hover effect
var searchEngine = 'google'; // default search engine - set google for google search, bing for bing search, yahoo for yahoo search
var numberOfScreens = 3; // set number of screens (1 or 2 or 3)
var blockName = new Array(); // set names of blocks
blockName[1] = 'Most used' ;
blockName[ 2] = 'Social' ;
blockName[ 3] = 'News & fun' ;
var bookmark = new Array();
bookmark[ 0] = new Array();
bookmark[ 1] = new Array();
bookmark[ 2] = new Array();
// set your bookmarks here: (If you do not fill 'thumb' for thumbnail will be used title)
// FIRST BLOCK
bookmark[0][0] = {
'title':'YouTube' ,
'url':'http://youtube测试数据' ,
'thumb':'youtube.png'
};
bookmark[ 0][1] = {
'title':'Yahoo' ,
'url':'http://yahoo测试数据' ,
'thumb':'yahoo.png'
};
bookmark[ 0][2] = {
'title':'Grooveshark' ,
'url':'http://grooveshark测试数据' ,
'thumb':'grooveshark.png'
};
bookmark[ 0][3] = {
'title':'last.fm' ,
'url':'http://HdhCmsTestlast.fm/' ,
'thumb':'lastfm.png'
};
bookmark[ 0][4] = {
'title':'twitter' ,
'url':'http://twitter测试数据' ,
'thumb':'twitter.png'
};
bookmark[ 0][5] = {
'title':'google' ,
'url':'http://google测试数据' ,
'thumb':'google.png'
};
bookmark[ 0][6] = {
'title':'facebook' ,
'url':'http://facebook测试数据' ,
'thumb':'facebook.png'
};
bookmark[ 0][7] = {
'title':'BBC news' ,
'url':'http://HdhCmsTestbbc.co.uk/news/' ,
'thumb':'bbcnews.png'
};
bookmark[ 0][8] = {
'title':'CNN' ,
'url':'http://HdhCmsTestcnn测试数据' ,
'thumb':'cnn.png'
};
bookmark[ 0][9] = {
'title':'deviantART' ,
'url':'http://deviantart测试数据' ,
'thumb':'deviantart.png'
};
bookmark[ 0][10] = {
'title':'wikipedia' ,
'url':'http://wikipedia.org' ,
'thumb':'wikipedia.png'
};
bookmark[ 0][11] = {
'title':'iTunes' ,
'url':'http://HdhCmsTestapple测试数据/itunes/' ,
'thumb':'itunes.png'
};
// end of FIRST BLOCK
// SECOND BLOCK
bookmark[1][0] = {
'title':'linkedin' ,
'url':'http://HdhCmsTestlinkedin测试数据/' ,
'thumb':'linkedin.png'
};
bookmark[ 1][1] = {
'title':'digg' ,
'url':'http://digg测试数据/' ,
'thumb':'digg.png'
};
bookmark[ 1][2] = {
'title':'flickr' ,
'url':'http://HdhCmsTestflickr测试数据/' ,
'thumb':'flickr.png'
};
bookmark[ 1][3] = {
'title':'msn' ,
'url':'http://HdhCmsTestmsn测试数据/' ,
'thumb':'msn.png'
};
bookmark[ 1][4] = {
'title':'reddit' ,
'url':'http://HdhCmsTestreddit测试数据/' ,
'thumb':'reddit.png'
};
bookmark[ 1][5] = {
'title':'skype' ,
'url':'http://HdhCmsTestskype测试数据/' ,
'thumb':'skype.png'
};
bookmark[ 1][6] = {
'title':'technorati' ,
'url':'http://technorati测试数据' ,
'thumb':'technorati.png'
};
bookmark[ 1][7] = {
'title':'delicious' ,
'url':'http://HdhCmsTestdelicious测试数据/' ,
'thumb':'delicious.png'
};
bookmark[ 1][8] = {
'title':'MySpace' ,
'url':'http://HdhCmsTestmyspace测试数据/' ,
'thumb':'myspace.png'
};
bookmark[ 1][9] = {
'title':'orkut' ,
'url':'http://HdhCmsTestorkut测试数据/' ,
'thumb':'orkut.png'
};
bookmark[ 1][10] = {
'title':'tumblr' ,
'url':'http://HdhCmsTesttumblr测试数据/' ,
'thumb':'tumblr.png'
};
bookmark[ 1][11] = {
'title':'StumbleUpon' ,
'url':'http://HdhCmsTeststumbleupon测试数据/' ,
'thumb':'stumbleupon.png'
};
// end of SECOND BLOCK
// THIRD BLOCK
bookmark[2][0] = {
'title':'eurosport' ,
'url':'http://HdhCmsTesteurosport测试数据/' ,
'thumb':'eurosport.png'
};
bookmark[ 2][1] = {
'title':'amazon' ,
'url':'http://HdhCmsTestamazon测试数据/' ,
'thumb':'amazon.png'
};
bookmark[ 2][2] = {
'title':'eBay' ,
'url':'http://HdhCmsTestebay测试数据/' ,
'thumb':'ebay.png'
};
bookmark[ 2][3] = {
'title':'IMDb' ,
'url':'http://HdhCmsTestimdb测试数据/' ,
'thumb':'imdb.png'
};
bookmark[ 2][4] = {
'title':'vimeo' ,
'url':'http://vimeo测试数据' ,
'thumb':'vimeo.png'
};
bookmark[ 2][5] = {
'title':'lifehacker' ,
'url':'http://lifehacker测试数据/' ,
'thumb':'lifehacker.png'
};
bookmark[ 2][6] = {
'title':'engadged' ,
'url':'http://HdhCmsTestengadget测试数据/' ,
'thumb':'engadget.png'
};
bookmark[ 2][7] = {
'title':'zune' ,
'url':'http://HdhCmsTestzune.net/' ,
'thumb':'zune.png'
};
bookmark[ 2][8] = {
'title':'dropbox' ,
'url':'http://HdhCmsTestdropbox测试数据/' ,
'thumb':'dropbox.png'
};
bookmark[ 2][9] = {
'title':'National Geographic' ,
'url':'http://HdhCmsTestnationalgeographic测试数据/' ,
'thumb':'natgeo.png'
};
bookmark[ 2][10] = {
'title':'CBC news' ,
'url':'http://HdhCmsTestcbc.ca/news/' ,
'thumb':'cbcnews.png'
};
bookmark[ 2][11] = {
'title':'weather测试数据' ,
'url':'http://HdhCmsTestweather测试数据/' ,
'thumb':'weather.png'
};
var hoverEffect = true ; // set true for hover effect, set false for no hover effect
var searchEngine = 'google'; // default search engine - set google for google search, bing for bing search, yahoo for yahoo search
var numberOfScreens = 3; // set number of screens (1 or 2 or 3)
var blockName = new Array(); // set names of blocks
blockName[1] = 'Most used' ;
blockName[ 2] = 'Social' ;
blockName[ 3] = 'News & fun' ;
var bookmark = new Array();
bookmark[ 0] = new Array();
bookmark[ 1] = new Array();
bookmark[ 2] = new Array();
// set your bookmarks here: (If you do not fill 'thumb' for thumbnail will be used title)
// FIRST BLOCK
bookmark[0][0] = {
'title':'YouTube' ,
'url':'http://youtube测试数据' ,
'thumb':'youtube.png'
};
bookmark[ 0][1] = {
'title':'Yahoo' ,
'url':'http://yahoo测试数据' ,
'thumb':'yahoo.png'
};
bookmark[ 0][2] = {
'title':'Grooveshark' ,
'url':'http://grooveshark测试数据' ,
'thumb':'grooveshark.png'
};
bookmark[ 0][3] = {
'title':'last.fm' ,
'url':'http://HdhCmsTestlast.fm/' ,
'thumb':'lastfm.png'
};
bookmark[ 0][4] = {
'title':'twitter' ,
'url':'http://twitter测试数据' ,
'thumb':'twitter.png'
};
bookmark[ 0][5] = {
'title':'google' ,
'url':'http://google测试数据' ,
'thumb':'google.png'
};
bookmark[ 0][6] = {
'title':'facebook' ,
'url':'http://facebook测试数据' ,
'thumb':'facebook.png'
};
bookmark[ 0][7] = {
'title':'BBC news' ,
'url':'http://HdhCmsTestbbc.co.uk/news/' ,
'thumb':'bbcnews.png'
};
bookmark[ 0][8] = {
'title':'CNN' ,
'url':'http://HdhCmsTestcnn测试数据' ,
'thumb':'cnn.png'
};
bookmark[ 0][9] = {
'title':'deviantART' ,
'url':'http://deviantart测试数据' ,
'thumb':'deviantart.png'
};
bookmark[ 0][10] = {
'title':'wikipedia' ,
'url':'http://wikipedia.org' ,
'thumb':'wikipedia.png'
};
bookmark[ 0][11] = {
'title':'iTunes' ,
'url':'http://HdhCmsTestapple测试数据/itunes/' ,
'thumb':'itunes.png'
};
// end of FIRST BLOCK
// SECOND BLOCK
bookmark[1][0] = {
'title':'linkedin' ,
'url':'http://HdhCmsTestlinkedin测试数据/' ,
'thumb':'linkedin.png'
};
bookmark[ 1][1] = {
'title':'digg' ,
'url':'http://digg测试数据/' ,
'thumb':'digg.png'
};
bookmark[ 1][2] = {
'title':'flickr' ,
'url':'http://HdhCmsTestflickr测试数据/' ,
'thumb':'flickr.png'
};
bookmark[ 1][3] = {
'title':'msn' ,
'url':'http://HdhCmsTestmsn测试数据/' ,
'thumb':'msn.png'
};
bookmark[ 1][4] = {
'title':'reddit' ,
'url':'http://HdhCmsTestreddit测试数据/' ,
'thumb':'reddit.png'
};
bookmark[ 1][5] = {
'title':'skype' ,
'url':'http://HdhCmsTestskype测试数据/' ,
'thumb':'skype.png'
};
bookmark[ 1][6] = {
'title':'technorati' ,
'url':'http://technorati测试数据' ,
'thumb':'technorati.png'
};
bookmark[ 1][7] = {
'title':'delicious' ,
'url':'http://HdhCmsTestdelicious测试数据/' ,
'thumb':'delicious.png'
};
bookmark[ 1][8] = {
'title':'MySpace' ,
'url':'http://HdhCmsTestmyspace测试数据/' ,
'thumb':'myspace.png'
};
bookmark[ 1][9] = {
'title':'orkut' ,
'url':'http://HdhCmsTestorkut测试数据/' ,
'thumb':'orkut.png'
};
bookmark[ 1][10] = {
'title':'tumblr' ,
'url':'http://HdhCmsTesttumblr测试数据/' ,
'thumb':'tumblr.png'
};
bookmark[ 1][11] = {
'title':'StumbleUpon' ,
'url':'http://HdhCmsTeststumbleupon测试数据/' ,
'thumb':'stumbleupon.png'
};
// end of SECOND BLOCK
// THIRD BLOCK
bookmark[2][0] = {
'title':'eurosport' ,
'url':'http://HdhCmsTesteurosport测试数据/' ,
'thumb':'eurosport.png'
};
bookmark[ 2][1] = {
'title':'amazon' ,
'url':'http://HdhCmsTestamazon测试数据/' ,
'thumb':'amazon.png'
};
bookmark[ 2][2] = {
'title':'eBay' ,
'url':'http://HdhCmsTestebay测试数据/' ,
'thumb':'ebay.png'
};
bookmark[ 2][3] = {
'title':'IMDb' ,
'url':'http://HdhCmsTestimdb测试数据/' ,
'thumb':'imdb.png'
};
bookmark[ 2][4] = {
'title':'vimeo' ,
'url':'http://vimeo测试数据' ,
'thumb':'vimeo.png'
};
bookmark[ 2][5] = {
'title':'lifehacker' ,
'url':'http://lifehacker测试数据/' ,
'thumb':'lifehacker.png'
};
bookmark[ 2][6] = {
'title':'engadged' ,
'url':'http://HdhCmsTestengadget测试数据/' ,
'thumb':'engadget.png'
};
bookmark[ 2][7] = {
'title':'zune' ,
'url':'http://HdhCmsTestzune.net/' ,
'thumb':'zune.png'
};
bookmark[ 2][8] = {
'title':'dropbox' ,
'url':'http://HdhCmsTestdropbox测试数据/' ,
'thumb':'dropbox.png'
};
bookmark[ 2][9] = {
'title':'National Geographic' ,
'url':'http://HdhCmsTestnationalgeographic测试数据/' ,
'thumb':'natgeo.png'
};
bookmark[ 2][10] = {
'title':'CBC news' ,
'url':'http://HdhCmsTestcbc.ca/news/' ,
'thumb':'cbcnews.png'
};
bookmark[ 2][11] = {
'title':'weather测试数据' ,
'url':'http://HdhCmsTestweather测试数据/' ,
'thumb':'weather.png'
};
核心脚本 script.js
$(document).ready( function (){
var num = numberOfScreens;
for ( var i=1;i<=num;i++ ){
$( '#name'+ i).html(blockName[i]);
}
if (hoverEffect){
for (i=1;i<=num;i++ ){
$( '<style>#wrapper'+i+' div.site:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').appendTo('head' );
};
};
if (searchEngine=='google' ){
search ='http://HdhCmsTestgoogle测试数据/search' ;
}
else if (searchEngine=='bing' ){
search ='http://HdhCmsTestbing测试数据/search' ;
}
else if (searchEngine=='yahoo' ){
search ='http://search.yahoo测试数据/bin/search' ;
}
else {
search ='http://HdhCmsTestgoogle测试数据/search' ;
searchEngine ='google' ;
};
$( 'form').attr('action' ,search);
$( '#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat' );
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor((windowWidth - 960)/2);
var left2 = left1 - 1040 ;
var left3 = left1 - 2080 ;
var wrapperTop = Math.floor((windowHeight - 480)/2)-60;
$( '#place').css({'left':left1,'top' :wrapperTop});
var wrapperPos = 1 ;
$( '#wrapper1 input:text' ).focus();
var animDone = true ;
function anim1to2(){
$( '#wrapper1 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left2,
}, 1000,'circEaseOut', function () {
$( '#wrapper2 input:text' ).focus();
animDone = true ;
wrapperPos = 2 ;
});
$( '#button1to2' ).hide();
$( '#button2to1' ).show();
if (num>2 ){
$( '#button2to3' ).show();
$( '#button3to2' ).hide();
};
};
function anim2to1(){
$( '#wrapper2 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left1
}, 1000,'circEaseOut', function () {
$( '#wrapper1 input:text' ).focus();
animDone = true ;
wrapperPos = 1 ;
});
$( '#button1to2' ).show();
$( '#button2to1' ).hide();
if (num>2 ){
$( '#button2to3' ).hide();
$( '#button3to2' ).hide();
};
};
function anim2to3(){
$( '#wrapper2 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left3
}, 1000,'circEaseOut', function () {
$( '#wrapper3 input:text' ).focus();
animDone = true ;
wrapperPos = 3 ;
});
$( '#button1to2' ).hide();
$( '#button3to2' ).show();
$( '#button2to1' ).hide();
$( '#button2to3' ).hide();
};
function anim3to2(){
$( '#wrapper3 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left2
}, 1000,'circEaseOut', function () {
$( '#wrapper2 input:text' ).focus();
animDone = true ;
wrapperPos = 2 ;
});
$( '#button1to2' ).hide();
$( '#button3to2' ).hide();
$( '#button2to1' ).show();
$( '#button2to3' ).show();
};
if (num>1 ){
$( '#button1to2').click( function (){
anim1to2();
});
$( '#button2to1').click( function (){
anim2to1();
});
if (num>2 ){
$( '#button2to3').click( function (){
anim2to3();
});
$( '#button3to2').click( function (){
anim3to2();
});
};
};
$(document).bind( 'keydown', function (event){
if (event.keyCode == '39' || event.keyCode == '37' ){
event.preventDefault();
}
if (event.which=='39' && animDone){
if (wrapperPos==1 && num>1 ){
anim1to2();
};
if (wrapperPos==2 && num>2 ){
anim2to3();
};
};
if (event.which=='37' && animDone){
if (wrapperPos==3 ){
anim3to2();
};
if (wrapperPos==2 ){
anim2to1();
};
};
});
$(document).mousewheel( function (event, delta) {
if (delta > 0 && animDone){
if (wrapperPos==3 ){
anim3to2();
};
if (wrapperPos==2 ){
anim2to1();
};
}
else if (delta < 0 && animDone){
if (wrapperPos==1 && num>1 ){
anim1to2();
};
if (wrapperPos==2 && num>2 ){
anim2to3();
};
};
event.preventDefault();
});
var j=0 ;
for (j=0; j <=(num-1); j++ ) {
if (bookmark[j]== null ) continue ;
for (i=0;i<=11;i++ ){
if (bookmark[j][i]== null ) continue ;
var title = bookmark[j][i]['title' ];
var url = bookmark[j][i]['url' ];
var thumb = bookmark[j][i]['thumb' ];
if (thumb=='' ){
$( '#thumb'+(j+1)+'-'+(i+1)).html('<img id="net" src="img/net.png" /><a href="'+url+'"><div class="title">'+title+'</div></a>' );
}
else {
$( '#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'"><img src="http://developer.51cto测试数据/exp/code/img/thumb/'+thumb+'" /></a>' );
}
};
};
$( '#search-engine').click( function () {
$( '#engines').fadeToggle('fast','circEaseOut' );
$( '#wrapper1 input:text').css('background','#fff' );
});
$( '#google').click( function () {
$( '#wrapper1 form').attr('action','https://HdhCmsTestgoogle测试数据/search' );
$( '#engines').fadeToggle('fast','circEaseOut' );
$( '#wrapper1 #search-engine').css('background','#fff url(img/google.png) center center no-repeat' );
$( '#wrapper1 input:hidden' ).detach();
$( '#wrapper1 input:first').attr('name','q' );
$( '#wrapper1 input:text' ).focus();
});
……
});
$(document).ready( function (){
var num = numberOfScreens;
for ( var i=1;i<=num;i++ ){
$( '#name'+ i).html(blockName[i]);
}
if (hoverEffect){
for (i=1;i<=num;i++ ){
$( '<style>#wrapper'+i+' div.site:hover{border: 1px #fff solid;box-shadow: 0px 0px 5px #fff;margin-left:4px;margin-top:4px;}</style>').appendTo('head' );
};
};
if (searchEngine=='google' ){
search ='http://HdhCmsTestgoogle测试数据/search' ;
}
else if (searchEngine=='bing' ){
search ='http://HdhCmsTestbing测试数据/search' ;
}
else if (searchEngine=='yahoo' ){
search ='http://search.yahoo测试数据/bin/search' ;
}
else {
search ='http://HdhCmsTestgoogle测试数据/search' ;
searchEngine ='google' ;
};
$( 'form').attr('action' ,search);
$( '#search-engine').css('background','#fff url(img/'+searchEngine+'.png) center center no-repeat' );
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left1 = Math.floor((windowWidth - 960)/2);
var left2 = left1 - 1040 ;
var left3 = left1 - 2080 ;
var wrapperTop = Math.floor((windowHeight - 480)/2)-60;
$( '#place').css({'left':left1,'top' :wrapperTop});
var wrapperPos = 1 ;
$( '#wrapper1 input:text' ).focus();
var animDone = true ;
function anim1to2(){
$( '#wrapper1 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left2,
}, 1000,'circEaseOut', function () {
$( '#wrapper2 input:text' ).focus();
animDone = true ;
wrapperPos = 2 ;
});
$( '#button1to2' ).hide();
$( '#button2to1' ).show();
if (num>2 ){
$( '#button2to3' ).show();
$( '#button3to2' ).hide();
};
};
function anim2to1(){
$( '#wrapper2 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left1
}, 1000,'circEaseOut', function () {
$( '#wrapper1 input:text' ).focus();
animDone = true ;
wrapperPos = 1 ;
});
$( '#button1to2' ).show();
$( '#button2to1' ).hide();
if (num>2 ){
$( '#button2to3' ).hide();
$( '#button3to2' ).hide();
};
};
function anim2to3(){
$( '#wrapper2 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left3
}, 1000,'circEaseOut', function () {
$( '#wrapper3 input:text' ).focus();
animDone = true ;
wrapperPos = 3 ;
});
$( '#button1to2' ).hide();
$( '#button3to2' ).show();
$( '#button2to1' ).hide();
$( '#button2to3' ).hide();
};
function anim3to2(){
$( '#wrapper3 input:text' ).focusout();
animDone = false ;
$( '#place' ).animate({
left: left2
}, 1000,'circEaseOut', function () {
$( '#wrapper2 input:text' ).focus();
animDone = true ;
wrapperPos = 2 ;
});
$( '#button1to2' ).hide();
$( '#button3to2' ).hide();
$( '#button2to1' ).show();
$( '#button2to3' ).show();
};
if (num>1 ){
$( '#button1to2').click( function (){
anim1to2();
});
$( '#button2to1').click( function (){
anim2to1();
});
if (num>2 ){
$( '#button2to3').click( function (){
anim2to3();
});
$( '#button3to2').click( function (){
anim3to2();
});
};
};
$(document).bind( 'keydown', function (event){
if (event.keyCode == '39' || event.keyCode == '37' ){
event.preventDefault();
}
if (event.which=='39' && animDone){
if (wrapperPos==1 && num>1 ){
anim1to2();
};
if (wrapperPos==2 && num>2 ){
anim2to3();
};
};
if (event.which=='37' && animDone){
if (wrapperPos==3 ){
anim3to2();
};
if (wrapperPos==2 ){
anim2to1();
};
};
});
$(document).mousewheel( function (event, delta) {
if (delta > 0 && animDone){
if (wrapperPos==3 ){
anim3to2();
};
if (wrapperPos==2 ){
anim2to1();
};
}
else if (delta < 0 && animDone){
if (wrapperPos==1 && num>1 ){
anim1to2();
};
if (wrapperPos==2 && num>2 ){
anim2to3();
};
};
event.preventDefault();
});
var j=0 ;
for (j=0; j <=(num-1); j++ ) {
if (bookmark[j]== null ) continue ;
for (i=0;i<=11;i++ ){
if (bookmark[j][i]== null ) continue ;
var title = bookmark[j][i]['title' ];
var url = bookmark[j][i]['url' ];
var thumb = bookmark[j][i]['thumb' ];
if (thumb=='' ){
$( '#thumb'+(j+1)+'-'+(i+1)).html('<img id="net" src="img/net.png" /><a href="'+url+'"><div class="title">'+title+'</div></a>' );
}
else {
$( '#thumb'+(j+1)+'-'+(i+1)).html('<a href="'+url+'"><img src="http://developer.51cto测试数据/exp/code/img/thumb/'+thumb+'" /></a>' );
}
};
};
$( '#search-engine').click( function () {
$( '#engines').fadeToggle('fast','circEaseOut' );
$( '#wrapper1 input:text').css('background','#fff' );
});
$( '#google').click( function () {
$( '#wrapper1 form').attr('action','https://HdhCmsTestgoogle测试数据/search' );
$( '#engines').fadeToggle('fast','circEaseOut' );
$( '#wrapper1 #search-engine').css('background','#fff url(img/google.png) center center no-repeat' );
$( '#wrapper1 input:hidden' ).detach();
$( '#wrapper1 input:first').attr('name','q' );
$( '#wrapper1 input:text' ).focus();
});
……
});
源码下载： Win8_style_web_start_page_and_config.rar
改造后的示例： http://HdhCmsTestmayixue测试数据/demo/win8page/index.htm
示例代码： Win8StartScreen.rar
在这里感谢原作者，记录下来留个念想。
分类: Css , Javascript
标签: jQuery , animate , mousewheel
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48959