如何使用CSS3+JQuery实现悬浮墙式菜单


Posted in jQuery onJune 18, 2019

前言

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

什么是悬停界面?

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

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

悬浮墙是如何工作的?

如何使用CSS3+JQuery实现悬浮墙式菜单

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

1.头滑块:当用户停留超过1个frame的时候。一个动画效果转到了一个独特的背景,具体是到特定链接标题壁纸的位置。当头部的壁纸完全呈现时,显现出一些特殊的文字,例如标题或网站的标语。

2.页面滑块:在头滑块滑动的同时呈现。用户可以通过点击一个链接,查看相应的“页”元素幻灯片。(这基本上是一个div,其中可以包含文字,图像,视频-任何HTML内容)
当悬停离开当前的链接,头滑块会变成默认的背景。页面滑块保持原有状态。这样做的原因是,如果页面滑块呈现了进一步的内容。用户可能希望停留在这个页面上,向下滚动或单击。

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

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

如何使用CSS3+JQuery实现悬浮墙式菜单

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

header frame 的HTML:

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

悬浮的时候显示或隐藏其他元素的JQuery代码:

function hideTheRest(id){
for (var i=1; i<5; i++){
if (i!=id)
{
$('#frame' + i + ' a').css('display', 'block'); 
$('#frame' + i).css('filter', 'alpha(opacity=90)');
$('#frame' + i).stop().fadeTo("fast",0);
$('#frame' + i + ' a').css('display', 'none');
}
}
$('#infoframe').css('visibility','visible'); 
}

以上是一些关于悬浮墙重要的JS代码片段。如果你想从深层次研究代码。你可以在下边下载源代码。下面让我们看看重要的CSS:

CSS的背景梯度和3D覆盖:

下载源代码。下面让我们看看重要的CSS:

body{
background: 
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(153,153,153)),
color-stop(0.55, rgb(242,242,242)),
color-stop(0.78, rgb(240,237,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(153,153,153) 9%,
rgb(242,242,242) 55%,
rgb(240,237,240) 78%
);
}
#mantle { width:100%; height:30px; background: 
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(153,153,153)),
color-stop(0.55, rgb(242,242,242)),
color-stop(0.78, rgb(252,252,252))
);
background:
-moz-linear-gradient(
center bottom,
rgb(153,153,153) 9%,
rgb(242,242,242) 55%,
rgb(252,252,252) 78%
);
-webkit-background-origin: padding; 
-webkit-background-clip: content;
border-bottom:1px solid #fff;
}

Frame旋转的CSS3:

.frame:hover{
-webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg);
}

跨浏览器的@ font ? face

@font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic-webfont.eot');
src: local('☺'), url('league_gothic-webfont.woff') format('woff'), url('league_gothic-webfont.ttf') format('truetype'), url('league_gothic-webfont.svg#webfontwJ2IAlek') format('svg');
font-weight: normal;
font-style: normal;
}

OK。这就是全部了。

由于IE9之前的IE浏览器不支持CSS3和部分HTML5。推荐使用chrome/Firefox/IE9浏览器:)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jquery中为什么能用$操作
Jun 18 #jQuery
js/jQuery实现全选效果
Jun 17 #jQuery
jQuery创建折叠式菜单
Jun 15 #jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
You might like
PHP的Socket网络编程入门指引
2015/08/11 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
js计数器代码
2006/11/04 Javascript
深入认识JavaScript中的函数
2007/01/22 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python中有几个关键字
2020/06/04 Python
python中round函数保留两位小数的方法
2020/12/04 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
竞选班委演讲稿
2014/04/28 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
环保倡议书400字
2014/05/15 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
医生个人年终总结
2015/02/28 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Nginx反向代理、重定向
2022/04/13 Servers