Win8风格的Web启动界面

最新推荐文章于 2021-06-19 14:22:22 发布
最新推荐文章于 2021-06-19 14:22:22 发布
阅读量84 收藏
点赞数
文章标签： javascript xhtml 人工智能 ViewUI
原文链接：http://www.cnblogs.com/mayixue/archive/2012/05/30/2526462.html
版权

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

页面布局

HTML

View Code 
<html xmlns="http://www.w3.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

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'
};

核心脚本 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++){
            $('<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://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').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.com/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://www.google.com/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://www.mayixue.com/demo/win8page/index.htm

示例代码：Win8StartScreen.rar

在这里感谢原作者，记录下来留个念想。

 

转载于:https://www.cnblogs.com/mayixue/archive/2012/05/30/2526462.html

自我修炼的小石头
关注
超美的html模板--win8风格
02-05
超美的html模板--win8风格 非常简洁，美丽的模板。绝对值得拥有
html css实现win8,用CSS3实现Win8风格的方格导航菜单效果
weixin_42517963的博客
06-19 272
代码如下所示：复制代码代码如下:用CSS3实现Win8风格的方格导航菜单效果#about {color: #999;text-align: center;font: 0.9em Arial, Helvetica;}#about a {color: #777;}.menu {width: 620px;margin: 100px auto;padding: 15px;list-style: none;...
win8页面 html,Win8 Metro风格界面设计HTML+CSS网页模板
weixin_39524741的博客
06-05 724
在网站开发的时候对于底部或者某些局部很多人希望或者喜欢Win8 Metro风格界面.本人也一直很喜欢。截止目前我的dodobook.net的底部都是Metro风格,难不准以后会变，先记录一下这部分代码。欢迎各位分享。图文请各位自行替换调整。上代码了，各位直接复制即可运行Win8 Metro风格界面设计HTML+CSS网页模板#footZone{width:1000px;margin:10px au...
HTML5高防win8风格
weixin_30411819的博客
01-24 199
使用HTML5做了一个高防Win8的页面，大家看看怎么样 Java、.NET、PHP、Android、iOS、HTML5，CSS3、 web前端、视频资料下载网站 http://51pansou.com 源码地址：http://download.csdn.net/detail/rochsoft/9416076 转载于:https://www.cnblogs.com/51p...
闲来无事用html做了个win8.1的界面，看起来就跟真的一模一样！
随风飘扬
08-15 3553
暑假在家真是闲的蛋疼，正巧又在学web，看着自己的电脑我就想着能不能做个metro界面出来呢，然后自己在家里捣鼓，终于成功了！！！我准备回学校用这个来逗室友 上效果图 最后网页全屏出来的效果呢就和我电脑的一样，哈哈 下面是代码： html部分： win8 Start Tfei 邮件 日历 照片 Skype 用户 财经 suifengpi
win8风格界面metro界面
06-08
在描述中，“仿win8系统面板风格”指的是界面设计模仿了Windows 8启动屏幕（Start Screen）的特征，这个屏幕由各种大小不一的磁贴（Tiles）组成，每个磁贴代表一个应用程序或功能。用户可以通过这些磁贴快速访问所需...
WIN8风格WEB页
10-29
【标题】"WIN8风格WEB页"所涉及的知识点主要集中在网页设计领域，特别是与Windows 8操作系统界面设计风格相关的Web界面设计。Windows 8引入了一种全新的界面风格，被称为“Modern UI”或“Metro UI”，它以简洁、...
win8界面风格个人网站模板
06-01
【win8界面风格个人网站模板】是一款基于Windows 8（Win8）操作系统的用户界面设计概念，结合HTML5技术打造的网站模板。该模板旨在提供一个现代化、响应式的网页设计，能够适应不同设备的浏览需求，包括个人电脑（PC...
winForm模版 win8风格 metro 源码
08-31
2. **磁贴和图标**：在win8风格中，磁贴是一种关键的UI元素，代表应用程序或功能，常用于启动屏幕。源码可能包含了自定义磁贴的类和方法，以及如何动态更新磁贴内容的代码。 3. **平面化设计**：避免过多的阴影和...
HTML5高仿Win8桌面
01-24
使用流行的HTML5技术做了个高防Win8桌面，需要学习的下载看看
仿win8界面的导航网站（html+js+css）
07-15
仿win8界面的导航网站（html+js+css）很精美，很漂亮！！
html5 WebOS仿Win8桌面管理界面模板源码.zip
08-18
html5 Win8桌面界面模板，WebOS仿Win8桌面模板源码,适合学习之用
用CSS3实现Win8风格的方格导航菜单效果
01-19
代码如下所示： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>用CSS3实现Win8风格的方格导航菜单效果</title><style>
html仿windows桌面
06-17
html仿windows桌面 html仿windows桌面
html css实现win8,纯css3实现的win8加载动画
weixin_29306571的博客
06-19 107
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：实现的代码。html代码：Windows 8css3代码：body{margin: 0;padding: 0;background-color: #90da15;}.wrapp{position: absolute;top: 50%;left: 50%;width: 600px;height...
html css实现win8,使用css3实现的windows8开机加载动画
weixin_42514877的博客
06-19 129
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图：实现的代码。html代码：复制代码代码如下:Windows 8css3代码：复制代码代码如下:body{margin: 0;padding: 0;background-color: #90da15;}.wrapp{position: absolute;top: 50%;left: 50%;w...
仿WIN8扁平式UI的html模板
www_5438xiazai的博客
06-13 270
简介： CSS3+jQuery模仿WIN8扁平式UI设计的html模板 网盘下载地址： http://kekewl.cc/WF9KFNOPUiF0 图片：
html5 win8风格站点,用HTML5实现网站在windows8中贴靠的方法
weixin_35843812的博客
05-31 174
首先来了解一下windows 8 的贴靠，在windows 8 中的Metro应用可以将屏幕很好的进行分割.如下图让用户在使用时可以非常方便的切换。 系统对贴靠也是有硬性规定的。最多两个屏幕，而且是一个大的一个小的。并且小屏的宽度是固定的 320像素。所以当用户把网站贴成小屏幕，这个时候页面默认是等比例缩小的。如下图:那么怎么很好的解决这样的一个问题呢？让网站在windows 8的贴靠小屏幕下显示...
Android实现Win8风格界面自定义控件实例
本文主要介绍了如何在Android平台上实现对Win8风格界面的模仿，通过自定义组件`MyImageView`来创建类似Windows 8 Metro界面的方块元素。开发者将学习如何使用自定义控件来构建具有动态旋转和缩放功能的界面，以便更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值