如何使用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插件
Mar 29 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现动态加载瀑布流
Sep 01 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生成图片缩略图的方法
2015/04/07 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
日期 时间js控件
2009/05/07 Javascript
js 操作css实现代码
2009/06/11 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
javascript self对象使用详解
2016/10/18 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
全国法制宣传日活动总结
2015/05/05 职场文书
美丽心灵观后感
2015/06/01 职场文书
人生遥控器观后感
2015/06/11 职场文书
读书笔记怎么写
2015/07/01 职场文书
nginx日志格式分析和修改
2022/04/28 Servers