jquery延时载入动画焦点图- 有点类似视差动画
来源:互联网 发布:淘宝双11整点抢购技巧 编辑:程序博客网 时间:2024/06/06 15:44
在这里我用了一个插件jquery.DB_tabMotionBanner.min.js。
参考下载:http://www.jqueryfuns.com/resource/1424
http://www.xwcms.net/js/jdt/76222.html
http://www.jb51.net/jiaoben/142671.html
首先引入js文件
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 注意这里是1.8.3版本的,其他版本可能就不适用啦。
<script type="text/javascript" src="jquery.DB_tabMotionBanner.min.js"></script>
页面
<div class="DB_tab25">
<ul class="DB_bgSet">//这是四个背景图
<li style="background:url('img/bg1.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg2.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg3.jpg') no-repeat 49% 0"></li>
<li style="background:url('img/bg4.jpg') no-repeat 49% 0"></li>
</ul>
<ul class="DB_imgSet">//这是每个背景上的文字或者图片的内容,最后会飘动上背景图上的
<li>
<a href="#"><img class="DB_1_1" src="img/move1.png" alt=""/></a>
<img class="DB_1_2" src="img/move2.png" alt=""/>
<img class="DB_1_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_2_1" src="img/move1.png" alt=""/>
<img class="DB_2_2" src="img/move2.png" alt=""/>
<img class="DB_2_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_3_1" src="img/move1.png" alt=""/>
<img class="DB_3_2" src="img/move2.png" alt=""/>
<img class="DB_3_3" src="img/move3.png" alt=""/></li>
<li>
<img class="DB_4_1" src="img/move1.png" alt=""/>
<img class="DB_4_2" src="img/move2.png" alt=""/>
<img class="DB_4_3" src="img/move2.png" alt=""/>
<img class="DB_4_4" src="img/move2.png" alt=""/>
<img class="DB_4_5" src="img/move3.png" alt=""/></li>
</ul>
<div class="DB_menuWrap">
<ul class="DB_menuSet">//这里是四个图片的四个点点
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
<li><img src="img/btn_off.gif" alt=""/></li>
</ul>
//上下页的翻页效果
<div class="DB_next"><img src="img/nextArrow.png" alt="NEXT"/></div>
<div class="DB_prev"><img src="img/prevArrow.png" alt="PREV"/></div>
</div>
</div>
好啦,重点的js内容来啦
<script type="text/javascript">
$('.DB_tab25').DB_tabMotionBanner({
key:'b28551',
autoRollingTime:10000,
bgSpeed:500,
motion:
{
//设置各个图片动画出现的效果
DB_1_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_1_2:{left:-50,opacity:0,speed:1000,delay:1000},
DB_1_3:{left:100,opacity:0,speed:1000,delay:1500},
DB_2_1:{top:50,opacity:0,speed:1000,delay:500},
DB_2_2:{top:50,opacity:0,speed:1000,delay:1000},
DB_2_3:{left:100,opacity:0,speed:1000,delay:1500},
DB_3_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_3_2:{top:50,opacity:0,speed:1000,delay:1000},
DB_3_3:{left:100,opacity:0,speed:1000,delay:1500},
DB_4_1:{left:-50,opacity:0,speed:1000,delay:500},
DB_4_2:{left:-50,opacity:0,speed:1000,delay:1000},
DB_4_3:{left:-50,opacity:0,speed:1000,delay:1500},
DB_4_4:{left:-50,opacity:0,speed:1000,delay:2000},
DB_4_5:{left:100,opacity:0,speed:1000,delay:3000},
end:null
}
})
</script>
- jquery延时载入动画焦点图- 有点类似视差动画
- 视差动画
- 视差动画
- Parallax视差动画效果
- 视差动画引导界面
- ViewPager和视差动画
- 5.8_视差动画
- 用jquery实现仿淘宝焦点图的动画
- 易迅首页jQuery大屏动画焦点图代码
- 14款华丽的最新jQuery焦点图动画插件
- jQuery可自动播放动画焦点图插件Koala
- 超赞!8个jQuery焦点图动画赏析
- 8款超绚丽的jQuery焦点图动画
- javascript动画之焦点图
- 属性动画案例:雅虎加载视差动画
- HTML5 Canvas 视差滚动动画
- android自定义view --视差动画
- 载入动画模型
- Android开发中的assets目录的作用
- 考研复习第9弹
- LeetCode 057 Insert Interval
- HDU1312
- Android如何查看应用签名信息
- jquery延时载入动画焦点图- 有点类似视差动画
- C#表达式和运算符详解
- 面试之我见
- 问题 L: 二叉查找树(Ⅰ)-创建和遍历
- Android SwipeRefreshLayout 官方下拉刷新控件介绍
- 二叉树的深度
- 【智力题】称重问题
- 红黑树
- Hash表分析以及Java实现