效果：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 style="background: url(images/stu_banner2.jpg) no-repeat 100% 100%;"></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

jQuery全屏动画焦点图的更多相关文章

  1. jQuery全屏图片焦点图

    在线演示 本地下载

  2. jQuery宽屏游戏焦点图

    在线演示 本地下载

  3. 全新jquery多点滑动幻灯片——全屏动画animateSlide

    首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...

  4. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  5. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  6. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  7. 如何给PDF设置全屏动画

    PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...

  8. 基于jQuery全屏相册插件zoomVisualizer

    基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览    ...

  9. 可嵌入图片视频jQuery全屏滑块

    分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码:     <script type ...

随机推荐

  1. ReactJS实践（一）—— FrozenUI React化之Loading组件

    在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...

  2. Hadoop学习笔记—20.网站日志分析项目案例（二）数据清洗

    网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...

  3. 【译】ASP.NET应用程序和页面生命周期

    为何翻译此文 一.此文是Code Project社区2010年4月ASP.NET板块的最佳文章,说明了此文的份量: 二.锻炼自己的英文技术文章翻译能力,提高英文技术文档阅读能力: 三.了解掌握ASP. ...

  4. windows命令——taskkill

    C:\Users\Administrator>taskkill /? TASKKILL [/S system [/U username [/P [password]]]] { [/FI filt ...

  5. 【原】通过JS打开IE新tab（非Window）的解决方案

    近日项目里遇到限定在IE的tab窗口里打开新窗口的需求,结合网上的资源和亲自实践,总结以下比较可行的解决方案. 1.首先必须保证IE的设置正确.打开IE的Internet options ->G ...

  6. Spring4.X——搭建

    一,Spring概念总结 spring是一个集成了许多第三方框架的大杂烩,其核心技术是IOC(控制反转,也称依赖注入)和AOP(面向切面编程),所以spring既是一个IOC容器,也是一个AOP框架. ...

  7. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

  8. 【Win10应用开发】协议-下篇：自定义多个协议

    前面介绍了如何为应用程序自定义协议,于是有朋友会问,我希望为我的应用注册多个协议,不同的协议处理不同的事情,能吗?答案是能的. 方法主要在配置清单文件上,这里我给出一个例子,示例应用将注册两个协议,分 ...

  9. bootstrap中的Grid system详解

    啦啦啦,都十月中旬啦,好快啊,这个月的多一半都过去了,然而我才写第三篇随笔,小颖得加油啦~~~ 下面来看下小颖给大家分享的内容 1.   .col-md-*和.col-xs-* <!doctyp ...

  10. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...