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 ...
随机推荐
- 探索c#之一致性Hash详解
阅读目录: 使用场景 算法原理 虚拟节点 代码示例 使用场景 以Redis为例,当系统需要缓存的内容超过单机内存大小时,例如要缓存100G数据,单机内存仅有16G时.这时候就需要考虑进行缓存数据分片, ...
- 前端er是否忽略了某些东西？——读《ppk谈JavaScript》
关于书 “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员.” ——Roger Johansson,瑞典资深Web专家. ppk是世界级前端技术专家,W ...
- WPF PlacementTarget技巧
<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winf ...
- MySQL 变量和条件
概述 变量在存储过程中会经常被使用,变量的使用方法是一个重要的知识点,特别是在定义条件这块比较重要. mysql版本:5.6 变量定义和赋值 #创建数据库 DROP DATABASE IF EXIST ...
- Tips for newbie to read source code
This post is first posted on my WeChat public account: GeekArtT Reading source code is always one bi ...
- 设置 iOS 应用的图标和名称
Xcode 8.1 设置 iOS 应用的图标和名称的方法: 设置应用图标: 1.在 Resources 中添加图片: 2.在 Icon file 的属性值填写图标文件的名称. 设置应用名: 1.修改 ...
- SSIS Design1: 源数据提取
数据量的大小由两个方面决定:行的宽度和数据行的数量,为了减少ETL运行的时间,可以从源数据的提取上做优化,从数据源的输入上控制数据的质量和大小,减少转换和IO. 一,减少行的宽度 1,只加载需要的数据 ...
- JS-underfined is not a function
- 有意思的Console
在很久的以前,因为经常在浏览器控制台调试修改数据,想到用户如果使用控制台配合抓包工具修改上下行流量中的数据,会给站点带来不定的安全威胁,所以一直想找个方法,准确的说是js的方法“禁用”控制台,也就是用 ...
- eclipse导入web项目之后项目中出现小红叉解决办法
项目中有小红叉我遇到的最常见的情况: 1.项目代码本身有问题.(这个就不说了,解决错误就OK) 2.项目中的jar包丢失.(有时候eclipse打开时会出现jar包丢失的情况,关闭eclipse重新打 ...