jQuery全屏动画焦点图

本效果使用 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全屏动画焦点图的更多相关文章

jQuery全屏图片焦点图
在线演示本地下载
jQuery宽屏游戏焦点图
在线演示本地下载
全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
JS框架_(JQuery.js)文章全屏动画切换
百度云盘传送门密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
如何给PDF设置全屏动画
PPT文件可以播放全屏,并且可以实现飞入.分割.闪烁等动画模式播放.那么PDF文件可以吗?我们想要给PDF文件加入动画效果应该怎么做呢,也有很多的小伙伴不知道该怎么把PDF文件切换为全屏动画模式想要知 ...
基于jQuery全屏相册插件zoomVisualizer
基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览 ...
可嵌入图片视频jQuery全屏滑块
分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览源码下载实现的代码. html代码: <script type ...

随机推荐

ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题
前言本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...
跟vczh看实例学编译原理——一：Tinymoe的设计哲学
自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...
Android动画小记录
今天在做一个头部滑动菜单的时候需要使用TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYD ...
Clang Format
1,最近项目代码要求规范化,在网上找了个Xcode插件:Clang Format ,下载地址:https://github.com/travisjeffery/ClangFormat-Xcode 2, ...
removeClass 按钮点击添加class效果
html代码: <div class="game"> <span class="active">全部</span> < ...
SQL Server 迁移数据到MySQL
一.背景由于项目开始时候使用的数据库是SQL Server,后来把存储的数据库调整为MySQL,所以需要把SQL Server的数据转移到MySQL:由于涉及的表比较多,所以想在MySQL中生成对应 ...
在SQL Server中将数据导出为XML和Json
有时候需要一次性将SQL Server中的数据导出给其他部门的也许进行关联或分析,这种需求对于SSIS来说当然是非常简单,但很多时候仅仅需要一次性导出这些数据而建立一个SSIS包就显得小题大做 ...
Xdebug+ZendStudio配置
原文链接:http://www.orlion.ga/689/ 好久之前就知道有这么个东西,但是一直没用,一直用exit().var_dump() debug,效率很低. 首先下载xdebug的dll文 ...
通过3个Hello World应用来了解ASP.NET 5应用是如何运行的（2）
对于上面创建的这个Hello World应用来说,程序入口点由应用自身来提供,所以应用本身具有自我执行的能力.从应用托管(Host)的角度来讲,这样的应用同时负责对自身的托管.将应用与托管环境独立起来 ...
苹果系统安装虚拟机 Mac如何安装虚拟机教程
1.前言大家在用 Mac 系统的时候,可能有时难免还是要用到 Windows 系统.在 Mac 上使用 Windows 系统有二种方法.一种是在 Mac上安装双系统,适合要在机器上处理一些大型 ...

jQuery全屏动画焦点图

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

随机推荐

热门专题