您的位置：首页 > Web前端 > JQuery

关于jQuery配合CSS3实现背景图片滑动实例

2017-03-07 09:54 639 查看

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。下面是一个改变背景图片定位的一个动画效果，首先是定义动画：

/*定义名为slide-bkg动画*/
@keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-moz-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-khtml-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-webkit-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-o-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}

前缀为浏览性兼容性处理，IE10以前浏览器不支持CSS3动画效果，下面为调用动画效果。

.active-state{
background-image: url("images/active-state.png");
background-repeat: no-repeat;
background-position: 0 55px;
animation: slide-bkg 0.2s;
-moz-animation: slide-bkg 0.2s;	/* Firefox */
-webkit-animation: slide-bkg 0.2s;	/* Safari 和 Chrome */
-o-animation: slide-bkg 0.2s;	/* Opera */
}

至此就将动画绑定在了选择器上了。整体页面请看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合练习</title>
<style>
* {
margin: 0px;
}

.container {
width: 100%;
height: 100px;
background-color: #181818;
}

.container .logo {
width: 350px;
height: 100px;
background-color: #28b865;
margin-left: 200px;
color: #ffffff;
line-height: 100px;
float: left;
}

.container .logo img {
margin: 7px 20px;
float: left;
}

.container .nav {
width: 750px;
height: 100px;
line-height: 100px;
float: right;
margin-right: 200px;
}

.container .nav ul {
float: right;
color: white;
list-style: none;
font-size: 24px;
}

.container .nav li {
float: left;
margin: 10px 10px;
/*border: #28b865 1px solid;*/
cursor: pointer;
z-inde
4000
x: 1;
}

.container .nav li a {
display: block;
width: 139px;
height: 80px;
line-height: 80px;
text-align: center;
text-decoration: none;
color: white;
z-index: 3;
}
.active-state{
background-image: url("images/active-state.png");
background-repeat: no-repeat;
background-position: 0 55px;
animation: slide-bkg 0.2s;
-moz-animation: slide-bkg 0.2s;	/* Firefox */
-webkit-animation: slide-bkg 0.2s;	/* Safari 和 Chrome */
-o-animation: slide-bkg 0.2s;	/* Opera */
}
/*定义名为slide-bkg动画*/
@keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-moz-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-khtml-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-webkit-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}
@-o-keyframes slide-bkg {
from{background-position: 0 0;}
to{background-position: 0 55px;}
}

</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="images/templatemo_logo.png">
<h2>综合练习</h2>
</div>
<div class="nav">
<ul>
<li  class="active-state"><a href="#">主页</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

</div>
<script src="JS/jquery-3.1.1.min.js"></script>
<script src="JS/animateBackground-plugin.js"></script>
<script>
$(document).ready(function () {
$(".nav ul li").on("click",function () {
$(this).addClass("active-state").siblings().removeClass("active-state");
})
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航