响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件。该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息。
该幻灯片插件是响应式的,幻灯片中可以嵌入图片背景、视频及文本信息。为了提高与用户的互动,幻灯片中将前后导航按钮替换为导航按钮。按钮和导航箭头的区别是:每个按钮是一个标题,它会提示用户该页幻灯片所对应的网站内容是什么,而导航箭头只是会提示用户幻灯片是可以前后导航的。
制作方法
HTML结构
该幻灯片插件的HTML结构分为两个主要部分:包含幻灯片的无序列表ul.cd-hero-slider和包含导航按钮的div.cd-slider-nav元素,另外还有一个span.cd-marker元素是用于制作被选择按钮上面的那条红线,用于标记被选择的按钮。
- Intro
- Tech 1
CSS样式
该幻灯片的结构设计非常简单:所有的幻灯片都向右运动,通过translateX(100%)移动到屏幕之外。当前可见的幻灯片被添加.selected class,该class使用translateX(0)将幻灯片移入屏幕中。.move-leftclass是用于将幻灯片移动到屏幕的左边(使用translateX(-100%))。
为了达到平滑过渡的小,插件中在.selected和.is-moving元素上使用了CSS3 Transitions:当一个新的slide被选择的时候,它会被添加.selectedclass。当前的slide使用.is-movingclass移动到屏幕之外。
.cd-hero-slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
}
.cd-hero-slider li.selected {
/* this is the visible slide */
position: relative;
transform: translateX(0);
}
.cd-hero-slider li.move-left {
/* slide hidden on the left */
transform: translateX(-100%);
}
.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
/* the is-moving class is assigned to the slide which is moving outside the viewport */
transition: transform 0.5s;
}
在屏幕宽度大768像素的时候,插件为每个幻灯片添加了一些额外的效果,主要是.cd-half-width和.cd-full-width元素,改变他们的透明度和transform属性。
.from-left和.from-rightclass主要用于决定.selected元素是从左边还是从右边进入屏幕。为了制作不同的进入效果,插件为每个幻灯片动画设置了不同的animation-delay值。
下面是.cd-half-width元素(幻灯片中的标题、描述和按钮)的CSS代码:
@media only screen and (min-width: 768px) {
.cd-hero-slider .cd-half-width {
opacity: 0;
transform: translateX(40px);
}
.cd-hero-slider .move-left .cd-half-width {
transform: translateX(-40px);
}
.cd-hero-slider .selected .cd-half-width {
/* this is the visible slide */
opacity: 1;
transform: translateX(0);
}
.cd-hero-slider .is-moving .cd-half-width {
/* this is the slide moving outside the viewport
wait for the end of the transition on the
parent before set opacity to 0 and translate to 40px/-40px */
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2),
.cd-hero-slider li.selected.from-right .cd-half-width:first-of-type {
/* this is the selected slide - different animation if it's entering from left or right */
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) {
/* this is the selected slide - different animation if it's entering from left or right */
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}
}
JAVASCRIPT
在该幻灯片中其中有一个作为背景video的幻灯片,该vedio不是直接插入HTML页面中的,而是在屏幕的宽度大于768像素的时候才使用jQuery来动态加载。通过这种方式,video在移动手机设备上不会被加载。data-video属性用于接收视频文件的URL。你可以考虑在.cd-img-container的元素上使用相同的方法,这样图片就不会在移动手机上加载。
另外,插件使用jQuery来实现幻灯片功能,当用户点击任何一个.cd-slider-nav导航按钮,插件会使用index()函数来检测被选择按钮的位置,并使用nextSlide()或prevSlide()函数来更新幻灯片以及span.cd-marker的位置。
$('.cd-slider-nav li').on('click', function(event){
event.preventDefault();
var selectedItem = $(this);
if(!selectedItem.hasClass('selected')) {
// if it's not already selected
var selectedPosition = selectedItem.index(),
activePosition = $('.cd-hero-slider .selected').index();
if( activePosition < selectedPosition) {
nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
} else {
prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
}
updateNavigationMarker(selectedPosition+1);
}
});
响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件相关推荐
- html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件.当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容.这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能 ...
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- 图片预览小窗口html,jQuery和css3超酷图片预览插件
这是一款使用css3和Velocity.js制作的jquery图片预览插件. 电子商务网站设计的宗旨是通过简化的设计提高用户体验,提高转化率也有一定的模式.另外一种模式是在需要的地方提供更多的信息来达 ...
- html5底部悬浮添加到桌面,如何使用CSS3+JQuery实现悬浮墙式菜单
前言 大家好,今天我要教你如何创建一个有用的悬停式用户界面,使用jQuery,CSS3,HTML5和@ font – face.你可能会问我,为什么是一个基于悬停的用户界面?好吧,由于现在很流行的基础 ...
- html5 拉窗帘 效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效.该特效使用CSS transformations 和 jQuery使两块"窗帘"沿Z轴方向模拟被拉开的效果. HTM ...
- faq页面 html csdn,jQuery和css3简单实用的FAQ问答页面模板
如果你的系统需要这样一种用于为用户解答各种问题的FAQ系统,那么这个FAQ模板是你最好的选择.这个FAQ插件是响应式的,使用jQuery和css3制作,同时在不支持JAVASCRIPT的浏览器上也能正 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
最新文章
- [导入]在IE耗时操作中加入进度条或进度框
- rust高级矿场_高级 Rust 所有权管理
- java泛化_JAVA泛化及为什么需要泛化
- C# WINFORM的自动更新程序
- 调用向量的第i维分量| 使用Python的线性代数
- python 在gui中显示logging_如何在GUI中显示print()的输出python
- SAP Study Notes: BW Queriy-Variables(变量)
- Nginx的11个phases
- 安卓kali安装mysql_超详细安卓手机安装kali教程(root篇)
- 关于制作朗文6++ dictionary mac自用词典问题总结
- vscode :code runner运行include多个文件的cpp
- router-vue中meta参数
- 2021年金融科技书单推荐
- 有个程序员的老公是种什么体验,嫁给程序员,我超级后悔!
- mac x99算法 java_黑苹果从入门到精通 篇九:从Clover转向OpenCore的X99 iMac Pro(一)...
- 201809-2买菜
- Day 7(云计算-zsn)
- java线段的平移和旋转,几何变换(旋转、缩放、平移)
- java制作音乐播放器教程_教你轻松制作java音乐播放器
- Linux下进行格式化移动硬盘(U盘)以及分区