你的位置:首页 > Java教程

[Java教程]jQuery全屏动画焦点图


效果: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/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="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="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="http://hovertree.com/texiao/jqimg/3/images/stuimg1_1.png" alt="" /><img class="DB_1_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_2.png" alt="" /><img class="DB_1_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg1_3.png" alt="" /></li><li onclick="javascript: window.location.href = 'http://hovertree.com/texiao/';"><img class="DB_2_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_1.png" alt="" /><img class="DB_2_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_2.png" alt="" /><img class="DB_2_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg2_3.png" alt="" /></li><li onclick="javascript: window.location.href = 'http://keleyi.com/';"><img class="DB_3_1" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_1.png" alt="" /><img class="DB_3_2" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_2.png" alt="" /><img class="DB_3_3" src="http://hovertree.com/texiao/jqimg/3/images/stuimg3_3.png" alt="" /></li></ul><div class="DB_menuWrap"><ul class="DB_menuSet"><li><img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /></li><li><img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /></li><li><img src="http://hovertree.com/texiao/jqimg/3/images/btn_off.png" alt="" /></li></ul><div class="DB_next"><img src="http://hovertree.com/texiao/jqimg/3/images/nextArrow.png" alt="NEXT" /></div><div class="DB_prev"><img src="http://hovertree.com/texiao/jqimg/3/images/prevArrow.png" alt="PREV" /></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>

可以通过修改motion 中的数据,改变动画方式等。

转自:http://hovertree.com/h/bjaf/76i9j790.htm

特效库:http://www.cnblogs.com/roucheng/p/texiao.html