关于jQuery配合CSS3实现背景图片滑动实例
来源：互联网 发布：网络拾音头 编辑：程序博客网 时间：2024/05/16 16:58
通过 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-index: 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>
0 0
- 关于jQuery配合CSS3实现背景图片滑动实例
- php配合jquery实现增删操作具体实例
- JQuery实现背景图片渐变！
- JQuery实现背景图片渐变！
- css3实现点击切换背景图片，并且背景图片实现动画效果
- 用css3实现页面背景图片不重复
- jQuery页面滑动效果实例
- jquery slideToggle实现滑动
- jQuery实现滑动效果
- jquery实现滑动图片
- Jquery滑动门实现
- css3关于body的默认滑动机制
- 纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)
- 纯CSS3实现滑动开关效果
- CSS3实现上下滑动和左右摆动
- toolbar配合DrawerLayout实现酷炫的菜单滑动效果
- 使用PagerTabStrip配合ViewPager实现左右滑动标题栏的效果
- jQuery插件实现css3效果
- 道和开发笔记
- C++中虚继承
- 资深linux 马哥视频
- java学习第六天之构造函数
- Petr and a calendar_Codeforces
- 关于jQuery配合CSS3实现背景图片滑动实例
- Oracle Data Integrator 12cR1 (12.1.3.0.0)安装过程
- 符号表
- nginx负载均衡-5种策略
- 模拟下拉框选择对应菜单的内容
- HTML 不同空格的特性和表现
- bzoj 3198: [Sdoi2013]spring （hash+容斥原理）
- 阻止浏览器自身滑动事件 例如苹果手机的上拉下拉滑动
- Oracle Data Integrator学习资料
