主要用到jquery.animation.easing.js 和jquery.mousewheel.min.js 两个jQuery插件。

成都创新互联公司是一家集网站建设,乐东黎族企业网站建设,乐东黎族品牌网站建设,网站定制,乐东黎族网站建设报价,网络营销,网络优化,乐东黎族网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
页面布局
HTML
- View Code
 New tab 
#p#
数据源 source.js
- View Code
 - 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.com',
 - 'thumb':'youtube.png'
 - };
 - bookmark[0][1] = {
 - 'title':'Yahoo',
 - 'url':'http://yahoo.com',
 - 'thumb':'yahoo.png'
 - };
 - bookmark[0][2] = {
 - 'title':'Grooveshark',
 - 'url':'http://grooveshark.com',
 - 'thumb':'grooveshark.png'
 - };
 - bookmark[0][3] = {
 - 'title':'last.fm',
 - 'url':'http://www.last.fm/',
 - 'thumb':'lastfm.png'
 - };
 - bookmark[0][4] = {
 - 'title':'twitter',
 - 'url':'http://twitter.com',
 - 'thumb':'twitter.png'
 - };
 - bookmark[0][5] = {
 - 'title':'google',
 - 'url':'http://google.com',
 - 'thumb':'google.png'
 - };
 - bookmark[0][6] = {
 - 'title':'facebook',
 - 'url':'http://facebook.com',
 - 'thumb':'facebook.png'
 - };
 - bookmark[0][7] = {
 - 'title':'BBC news',
 - 'url':'http://www.bbc.co.uk/news/',
 - 'thumb':'bbcnews.png'
 - };
 - bookmark[0][8] = {
 - 'title':'CNN',
 - 'url':'http://www.cnn.com',
 - 'thumb':'cnn.png'
 - };
 - bookmark[0][9] = {
 - 'title':'deviantART',
 - 'url':'http://deviantart.com',
 - 'thumb':'deviantart.png'
 - };
 - bookmark[0][10] = {
 - 'title':'wikipedia',
 - 'url':'http://wikipedia.org',
 - 'thumb':'wikipedia.png'
 - };
 - bookmark[0][11] = {
 - 'title':'iTunes',
 - 'url':'http://www.apple.com/itunes/',
 - 'thumb':'itunes.png'
 - };
 - // end of FIRST BLOCK
 - // SECOND BLOCK
 - bookmark[1][0] = {
 - 'title':'linkedin',
 - 'url':'http://www.linkedin.com/',
 - 'thumb':'linkedin.png'
 - };
 - bookmark[1][1] = {
 - 'title':'digg',
 - 'url':'http://digg.com/',
 - 'thumb':'digg.png'
 - };
 - bookmark[1][2] = {
 - 'title':'flickr',
 - 'url':'http://www.flickr.com/',
 - 'thumb':'flickr.png'
 - };
 - bookmark[1][3] = {
 - 'title':'msn',
 - 'url':'http://www.msn.com/',
 - 'thumb':'msn.png'
 - };
 - bookmark[1][4] = {
 - 'title':'reddit',
 - 'url':'http://www.reddit.com/',
 - 'thumb':'reddit.png'
 - };
 - bookmark[1][5] = {
 - 'title':'skype',
 - 'url':'http://www.skype.com/',
 - 'thumb':'skype.png'
 - };
 - bookmark[1][6] = {
 - 'title':'technorati',
 - 'url':'http://technorati.com',
 - 'thumb':'technorati.png'
 - };
 - bookmark[1][7] = {
 - 'title':'delicious',
 - 'url':'http://www.delicious.com/',
 - 'thumb':'delicious.png'
 - };
 - bookmark[1][8] = {
 - 'title':'MySpace',
 - 'url':'http://www.myspace.com/',
 - 'thumb':'myspace.png'
 - };
 - bookmark[1][9] = {
 - 'title':'orkut',
 - 'url':'http://www.orkut.com/',
 - 'thumb':'orkut.png'
 - };
 - bookmark[1][10] = {
 - 'title':'tumblr',
 - 'url':'http://www.tumblr.com/',
 - 'thumb':'tumblr.png'
 - };
 - bookmark[1][11] = {
 - 'title':'StumbleUpon',
 - 'url':'http://www.stumbleupon.com/',
 - 'thumb':'stumbleupon.png'
 - };
 - //end of SECOND BLOCK
 - // THIRD BLOCK
 - bookmark[2][0] = {
 - 'title':'eurosport',
 - 'url':'http://www.eurosport.com/',
 - 'thumb':'eurosport.png'
 - };
 - bookmark[2][1] = {
 - 'title':'amazon',
 - 'url':'http://www.amazon.com/',
 - 'thumb':'amazon.png'
 - };
 - bookmark[2][2] = {
 - 'title':'eBay',
 - 'url':'http://www.ebay.com/',
 - 'thumb':'ebay.png'
 - };
 - bookmark[2][3] = {
 - 'title':'IMDb',
 - 'url':'http://www.imdb.com/',
 - 'thumb':'imdb.png'
 - };
 - bookmark[2][4] = {
 - 'title':'vimeo',
 - 'url':'http://vimeo.com',
 - 'thumb':'vimeo.png'
 - };
 - bookmark[2][5] = {
 - 'title':'lifehacker',
 - 'url':'http://lifehacker.com/',
 - 'thumb':'lifehacker.png'
 - };
 - bookmark[2][6] = {
 - 'title':'engadged',
 - 'url':'http://www.engadget.com/',
 - 'thumb':'engadget.png'
 - };
 - bookmark[2][7] = {
 - 'title':'zune',
 - 'url':'http://www.zune.net/',
 - 'thumb':'zune.png'
 - };
 - bookmark[2][8] = {
 - 'title':'dropbox',
 - 'url':'http://www.dropbox.com/',
 - 'thumb':'dropbox.png'
 - };
 - bookmark[2][9] = {
 - 'title':'National Geographic',
 - 'url':'http://www.nationalgeographic.com/',
 - 'thumb':'natgeo.png'
 - };
 - bookmark[2][10] = {
 - 'title':'CBC news',
 - 'url':'http://www.cbc.ca/news/',
 - 'thumb':'cbcnews.png'
 - };
 - bookmark[2][11] = {
 - 'title':'weather.com',
 - 'url':'http://www.weather.com/',
 - 'thumb':'weather.png'
 - };
 
#p#
核心脚本 script.js
- View Code
 - $(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++){
 - $('').appendTo('head');
 - };
 - };
 - if(searchEngine=='google'){
 - search='http://www.google.com/search';
 - }
 - else if(searchEngine=='bing'){
 - search='http://www.bing.com/search';
 - }
 - else if(searchEngine=='yahoo'){
 - search='http://search.yahoo.com/bin/search';
 - }
 - else{
 - search='http://www.google.com/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').h
 
本文题目:Win8风格的Web启动界面
链接分享:http://www.cdxtjz.cn/article/dhsihoi.html