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 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 ...
随机推荐
- 系列篇|编译可在Android上运行的依赖库（一）：glib库
前言 这是系列文章,它们由<编译可在Android上运行的glib库>及其他4篇文章组成,这4篇文章在“编译依赖库”一节中列出.由于glib库依赖于其他第三方库,所以需要先将依赖的第三方库 ...
- ReactJS实践（一）—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- Hadoop学习笔记—10.Shuffle过程那点事儿
一.回顾Reduce阶段三大步骤 在第四篇博文<初识MapReduce>中,我们认识了MapReduce的八大步骤,其中在Reduce阶段总共三个步骤,如下图所示: 其中,Step2.1就 ...
- ASP.Net MVC开发基础学习笔记：一、走向MVC模式
一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...
- [.net 面向对象程序设计进阶] (24) 团队开发利器（三）使用SVN多分支并行开发(下)
[.net 面向对象程序设计进阶] (24) 团队开发利器(三)使用SVN多分支并行开发(下) 本篇导读: 接上篇继续介绍SVN的高级功能,即使用分支并行开发.随着需求的不断变更,新功能的增加.特别是 ...
- 实战JS正则表达式
-正则表达式是一种文本模式的匹配工具. -文章导读: --1.正则对象的属性和方法 --2.字符串对象的方法 --3.使用正则表达式: ---3.1 给字符串加上千分符 ---3.2 字符串中出现次数 ...
- Express4 启航指南
确实有感而发,Nodejs真的发展太快了,这么说的原因有两点:自己去年冬天买了本<了不起的Node.js>,里面介绍Express的版本还是2.x.x:前些天小伙伴买了本<Node. ...
- IOS SWIFT 启动流程学习
其实和我们java.c一样通过一个main函数作为入口. main封装在了UIApplicationMain里面.所以后者变成启动入口. 他会扫描Info.plist,找到需要加载的入口storybo ...
- sublime text 下的Markdown写作
sublime text 2(3)下的Markdown写作 什么是 Markdown wiki Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富 ...
- 使用Ldoc给Lua生成文档
Ldoc介绍 LDoc是一个Lua的文档生成工具,过去,比较常用的Lua生成文档的工具是LuaDoc,可惜作者自从2008年之后就再也没有发布过新的版本了,说明作者基本上已经放弃维护了.而LDoc则是 ...