你的位置:首页 > 软件开发 > Java > jQuery全屏动画焦点图

jQuery全屏动画焦点图

发布时间:2016-05-11 06:00:08
效果:http://hovertree.com/texiao/jqimg/3/本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改。全部版本jQuery下载:http://hovertree.com/h/bjaf/ati6k7yk.htm每个轮 ...

效果:http://hovertree.com/texiao/jqimg/3/本效果使用 jquery-1.8.3.min.js,如需使用1.12.3版本,需进行修改。全部版本jQuery下载:http://hovertree.com/h/bjaf/ati6k7yk.htm每个轮播界面由若干图组成,图片随轮播动态载入,成为动画。

jQuery全屏动画焦点图下载:http://hovertree.com/h/bjaf/8tum0nci.htm代码如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery焦点图 - 何问起</title><link rel="stylesheet" href="http://hovertree.com/texiao/jqimg/3/css/style.css" /><style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style><script type="text/javascript" src='/images/loading.gif' data-original="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/js/jquery.DB_tabMotionBanner.min.js"></script></head><body><div class="DB_tab25"><ul class="DB_bgSet"><li style="background: #e67373;"></li><li style="background: #86cccc;"></li><li style="background: #ffebb3;"></li><!--<li ></li>--></ul><ul class="DB_imgSet"><li onclick="javascript: window.location.href = 'http://hovertree.com/';"><img class="DB_1_1" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg1_1.png"  /><img class="DB_1_2" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg1_2.png"  /><img class="DB_1_3" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg1_3.png"  /></li><li onclick="javascript: window.location.href = 'http://hovertree.com/texiao/';"><img class="DB_2_1" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg2_1.png"  /><img class="DB_2_2" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg2_2.png"  /><img class="DB_2_3" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg2_3.png"  /></li><li onclick="javascript: window.location.href = 'http://keleyi.com/';"><img class="DB_3_1" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg3_1.png"  /><img class="DB_3_2" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg3_2.png"  /><img class="DB_3_3" src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/stuimg3_3.png"  /></li></ul><div class="DB_menuWrap"><ul class="DB_menuSet"><li><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/btn_off.png"  /></li><li><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/btn_off.png"  /></li><li><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/btn_off.png"  /></li></ul><div class="DB_next"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/nextArrow.png"  /></div><div class="DB_prev"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/jqimg/3/images/prevArrow.png"  /></div></div></div><div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/76i9j790.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div><script type="text/javascript">$('.DB_tab25').DB_tabMotionBanner({key: 'b28551',autoRollingTime: 6000,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: { top: 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: { top: 0, opacity: 0, speed: 1000, delay: 1500 },end: null}})</script></body></html>

原标题:jQuery全屏动画焦点图

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录