【betway必威官网】设计一个烂站点的十个要素

 betway必威官网     |      2020-01-23 23:30

betway必威官网,使用尽可能多的Frame——至少有三个。你看,多方便,一处就出三个页面,而且联接的其他站点还会在我的frame中出现。而它的URL见鬼去吧,看到的将永远是我的站点名字。君不见,Yahoo,Microsoft,Reuter,Newsweek,Time,Zdnet,ChinaByte这些站点无一使用了Frame,可见我的技术有多高了! 我是如此的技术高超,以至于我会使用java script,甚至还有Alert函数!好的,你来看我的站点,献给你个下马威,你肯定不知道现在是几点了,我就Alert你一个框,告诉你。我甚至还知道你是否是第一次来到本站,那你是否知道我知道你的来访次数呢?厉害,我会使用Cookie呢。 我简直就是艺术天才,不光会编写Code还会使用Photoshop甚至是3D Max——来先给你个艺术欣赏,整屏的一幅黑漆漆的抽象画,不过你还是得进去之后才知道我讲的是什么。 还有,我的背景你发现了吗,没有?那就深一些,前景后景都一样多好。 我知道CSS你知道吗?不要紧,你看我的联接文字会当你把鼠标移过来时变大,还会变色呢?这就是CSS。 还有,我知道你有24bit或者32bit的颜色,我会在我的页面里用个够的。 我知道很多站点,你看-我的推荐站点中有:,,……你肯定不知道还有这些好站吧? 我喜欢对称的,你看:我的所有的文字都是居中的,绝对的对称多好看啊!你不试一试吗? 我是一个大忙人,因为我事业有成,你没有发现我的站点已经有半年没有动过一动了吗,嗨忙啊! 真不好意思,每个人都想发财的——我不得不,在我的页面的上看,下看,左看,右看都贴上一些广告牌,还得说明一下:“请点击以上我们的赞助商,会跳出小窗口,不影响浏览的。” 哦,我还会说/写洋文呢,This site is very beautiful,I like it very much。 我的站点的内容最丰富,你没有发现,我的站点上除了广告牌之外,都是文字吗?一个个紧紧密密几乎不给你一点喘息的机会。

大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery,CSS3,HTML5和@ font – face。你可能会问我,为什么是一个基于悬停的用户界面?好吧,由于现在很流行的基础触摸的web站点可以运行在移动设备上,我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单。

必威app下载,什么是悬停界面?

悬停界面就是只需要做少量的工作就可以浏览更多的内容。比起传统的基于页面的点击,我们需要改变一些想法和设计结构,可以让用户知道怎样通过基于悬停墙来浏览更多的内容。

如果你浏览一些最流行的网站。你会发现实际上他们有两个版本。一个用于桌面浏览器(完整布局),另一个是优化移动(触摸集中)。某些情况下,在传统的网站上也可以使用悬停界面来提高用户的体验。

悬浮墙是如何工作的?

必威app下载 1

悬浮墙由两个关键的组件交互:

  1. 头滑块:当用户停留超过1个frame的时候。一个动画效果转到了一个独特的背景,具体是到特定链接标题壁纸的位置。当头部的壁纸完全呈现时,显现出一些特殊的文字,例如标题或网站的标语。
  2. 页面滑块:在头滑块滑动的同时呈现。用户可以通过点击一个链接,查看相应的“页”元素幻灯片。(这基本上是一个div,其中可以包含文字,图像,视频-任何HTML内容)

当悬停离开当前的链接,头滑块会变成默认的背景。页面滑块保持原有状态。这样做的原因是,如果页面滑块呈现了进一步的内容。用户可能希望停留在这个页面上,向下滚动或单击。

 

悬浮墙使如何使用CSS3的@ font - face的和HTML5?

在悬浮墙中CSS3的用于使文本紧凑,背景梯度和旋转的造型和设计。我们可以选择我们喜欢的背景图片。@font-face大多数情况下用户排版。跨浏览器的情况下也可以表现出漂亮的字体。

必威app下载 2

让我们开始创建一个悬浮墙:

header frame 的HTML:

<div id="wanderwall">
        <div class="wrapper">
            <div id="frame1" class="frame first">
                <a style="display: block;" id="link1" href="#" alt="jQuery is used to power WanderWall's animations">
                    jQuery </a>
            </div>
            <div id="frame2" class="frame two">
                <a style="display: block;" id="link2" href="#" alt="CSS3 is used for linear gradients and styling">
                    CSS3 </a>
            </div>
            <div id="frame3" class="frame three">
                <a style="display: block;" id="link3" href="#" alt="HTML5 powers the data-tooltip tooltips">
                    HTML5 </a>
            </div>
            <div id="frame4" class="frame fourth">
                <a style="display: block;" id="link4" href="#" alt="Font-Face powers the fonts">
                    @font-face </a>
            </div>
        </div>
    </div>

滑块页的HTML:

<div class="page">
                <div id="mantletext">
                    <h3>
                        jQuery</h3>
                    <h2>
                        Wanderwall 1</h2>
                </div>
            </div>
            <div class="page">
                <div id="mantletext">
                    <h3>
                        jQuery</h3>
                    <h2>
                        Wanderwall 2</h2>
                </div>
            </div>
            <div class="page">
                <div id="mantletext">
                    <h3>
                        jQuery</h3>
                    <h2>
                        Wanderwall 3</h2>
                </div>
            </div>
            <div class="page">
                <div id="mantletext">
                    <h3>
                        jQuery</h3>
                    <h2>
                        Wanderwall 4</h2>
                </div>
            </div>

在现实生活中,你可能会定义一些非常简单的CSS的设计结构。但为了简单起见,我首先要告诉你在这个项目中的重要组成部分的JavaScript,然后是CSS3。(我建议你先完成javascript端的部分,再去修改设计。不过,你怎么舒服怎么做吧)。

背景动画的JQuery代码(frame hover):

$("div.frame a").hover(function()
    {
                /*Strip the link identifier to form just the ID*/
                var id = this.id.replace("link", "");
                var currentLink = $(this);
                /*ID based hiding of the other frames*/
                hideTheRest(id);
                position = -296*id;
                /*Define the offset at which the page for this frame is present*/
                marginnew =  pagewidth * id * -1;

                /*Show the Home link if not on the Default page*/
                if(id > 0)
                {
                  $('#homelink').show();
                }else{
                  $('#homelink').hide();
                }

                /*Animate the Page Slider to the new offset*/
                $('.pageslider').stop().animate({marginLeft: marginnew}, 800);

                /*Animate the header background*/
                $('#wanderwall').stop().animate({backgroundPosition: '(50% ' + position +'px )'}, 500, function()
                {
                  var distance = 0;
                  var topdis   = -190;
                  var text     = currentLink.attr('alt');
                  var infoframe  = $('#infoframe');

                  /*Define the offset for the header-wallpaper text to appear next to the frame*/
                  switch(id)
                  {
                    case "1":
                         distance = 500;
                         break;
                    case "2":
                         distance = 730;
                         break;
                    case "3":
                         distance = 200;
                         break;
                    case "4":
                         distance = 400;
                         topdis = -198;
                         break;
                  }

                  infoframe.html(text);
                  infoframe.css('margin-left', distance + 'px');
                  infoframe.css('margin-top', topdis + 'px');
                  infoframe.fadeIn();
                });





    }, function()
    {

       $('#infoframe').hide();
                var id = this.id.replace("link", "");
                $('#wanderwall').stop().animate({backgroundPosition: '(50% 0px)'}, 500 );    
                showTheRest();

    });