侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   348

前言

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

什么是悬停界面?

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

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

悬浮墙是如何工作的?

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

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

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

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

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

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

header frame 的HTML:

jQuery
CSS3
HTML5
@font-face

滑块页的HTML:

jQuery

Wanderwall 1

jQuery

Wanderwall 2

jQuery

Wanderwall 3

jQuery

Wanderwall 4

在现实生活中,你可能会定义一些非常简单的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 C 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+css3实现熊猫tv导航代码分享
  • CSS3结合jQuery实现动画效果及回调函数的实例
  • 基于jQuery和CSS3实现APPLE TV海报视差效果
  • jQuery+CSS3实现点赞功能
  • jquery+css3问卷答题卡翻页动画效果示例
  • CSS3 media queries结合jQuery实现响应式导航
  • 如何使用CSS3和JQuery easing 插件制作绚丽菜单


  • 上一条:
    使用js在layui中实现上传图片压缩
    下一条:
    通过JQuery,JQueryUI和Jsplumb实现拖拽模块
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客