9款2014最热门jQuery实用特效推荐攻略
本篇攻略将介绍9款2014年最热门的 jQuery 实用特效，其中每个特效都将包括使用说明和演示。
特效一：全屏背景幻灯片
该特效允许您创建全屏背景幻灯片，具有平滑过渡和自动播放功能。
使用说明
首先需要导入 jQuery，然后引用 vegas.js，并在您的 HTML 中添加以下代码：
<body>
<div id="full-background">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
</div>
<script src="jquery.min.js"></script>
<script src="vegas.min.js"></script>
<script>
$(function() {
$('#full-background').vegas({
transition: 'fade',
preload: true,
timer: false,
shuffle: true,
delay: 5000,
cover: true,
animation: 'kenburns'
});
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Full Screen Background Slideshow Demo
特效二：响应式导航菜单
该特效允许您创建响应式导航菜单，可以在移动设备上方便地浏览您的网站。
使用说明
首先需要导入 jQuery，然后引用 slicknav.css 和 slicknav.js，并在您的 HTML 中添加以下代码：
<head>
<link rel="stylesheet" href="slicknav.css">
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<script src="jquery.min.js"></script>
<script src="jquery.slicknav.min.js"></script>
<script>
$(function() {
$('#menu').slicknav();
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Responsive Navigation Menu Demo
特效三：图像懒加载
该特效可以为您的网站节省带宽和加载时间，因为它只会在图像进入视野时加载图像。
使用说明
首先需要导入 jQuery，然后引用 jquery.lazyload.js，并在您的 HTML 中添加以下代码：
<body>
<img class="lazy" data-original="image.jpg">
<script src="jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$(function() {
$('img.lazy').lazyload();
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Image Lazy Load Demo
特效四：平滑滚动
该特效可以让您的链接在网页内平滑滚动，而不是直接跳转到链接位置。
使用说明
首先需要导入 jQuery，并在您的 HTML 中添加以下代码：
<body>
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
<div id="section-3">Section 3</div>
<script src="jquery.min.js"></script>
<script>
$(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length) {
$('html,body').animate({scrollTop: target.offset().top}, 1000);
return false;
}
});
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Smooth Scrolling Demo
特效五：伸缩式头部
该特效可以让您的网页头部自动缩小，以便让用户更多地看到内容。
使用说明
首先需要导入 jQuery，并在您的 HTML 中添加以下代码：
<head>
<style>
header {
height: 150px;
background: #333;
color: #fff;
position: relative;
transition: height 0.3s ease-out;
}
header.shrink {
height: 75px;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<script src="jquery.min.js"></script>
<script>
$(function() {
var header = $('header');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
header.addClass('shrink');
} else {
header.removeClass('shrink');
}
});
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Shrinking Header Demo
特效六：手风琴效果
该特效可以让您的网页元素以手风琴式展开和收缩。
使用说明
首先需要导入 jQuery，并在您的 HTML 中添加以下代码：
<head>
<style>
.accordion {
width: 500px;
margin: 0 auto;
overflow: hidden;
}
.accordion .item {
float: left;
width: 25%;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
transition: width 0.5s ease-out;
}
.accordion .item:hover {
width: 35%;
}
.accordion .item.active {
width: 50%;
}
.accordion .content {
display: none;
padding: 20px;
clear: both;
border: 1px solid #ccc;
}
.accordion .content.active {
display: block;
}
</style>
</head>
<body>
<div class="accordion">
<div class="item active">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="content active">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
<div class="content">Content 4</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(function() {
$('.accordion .item').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
$(this).next('.content').siblings('.content').removeClass('active');
$(this).next('.content').addClass('active');
});
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Accordion Effect Demo
特效七：缩放图片效果
该特效可以让网页上的图片在鼠标悬停时缩放。
使用说明
首先需要导入 jQuery，并在您的 HTML 中添加以下代码：
<head>
<style>
img {
transition: transform 0.3s ease-out;
}
img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<img src="image.jpg">
<script src="jquery.min.js"></script>
</body>
演示
您可以在以下链接中查看该特效的演示：Image Zoom Effect Demo
特效八：无限滚动
该特效可以让您的网页拥有无限滚动的效果，新内容会在滚动到底部时自动加载。
使用说明
首先需要导入 jQuery，并在您的 HTML 中添加以下代码：
<body>
<ul id="content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div id="loading">
<img src="loading.gif">
</div>
<script src="jquery.min.js"></script>
<script>
var loading = false;
var page = 0;
function loadContent() {
loading = true;
$('#loading').show();
$.get('content.php', {page: page}, function(data) {
$('#content').append(data);
$('#loading').hide();
page += 1;
loading = false;
});
}
$(window).scroll(function() {
if (!loading && $(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
loadContent();
}
});
</script>
</body>
演示
由于这是一个需要后端支持的特效，因此这里无法提供演示链接。
特效九：交错动画
该特效可以让您的网页上的元素以交错的方式进行动画效果。
使用说明
首先需要导入 jQuery 和 animate.css，并在您的 HTML 中添加以下代码：
<head>
<link rel="stylesheet" href="animate.min.css">
<style>
.block {
width: 100px;
height: 100px;
background: #333;
margin: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script src="jquery.min.js"></script>
<script>
$(function() {
$('.block').each(function(i) {
$(this).addClass('animated bounceIn').css('animation-delay', (i * 200) + 'ms');
});
});
</script>
</body>
演示
您可以在以下链接中查看该特效的演示：Staggered Animation Demo
以上便是9款2014最热门jQuery实用特效推荐攻略，希望对您有所帮助！
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：9款2014最热门jQuery实用特效推荐 - Python技术站
微信扫一扫 
支付宝扫一扫 