jquery动态背景切换全屏登录插件supersized.js
下载地址:https://download.csdn.net/download/t101lian/10434198预览:
http://www.daimabiji.com/codedemo/1530
http://www.jq22.com/jquery-info3153
jQuery
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : './img/1.jpg'},
{image : './img/2.jpg'},
{image : './img/3.jpg'}
]
});
});
参数说明:
vertical_center:是否让图像垂直居中,如果为0,则图像为顶端对齐。
slideshow:是否显示展示工具条,包括标题、图片数字和导航按钮。
navigation:是否展示导航按钮。
thumbnail_navigation:为1时可以通过单击缩略图导航切换图片,为0时,缩略图不显示。
pause_hover:是否鼠标滑向图片时暂停图片切换。
transition:图片切换效果,0-无,1-淡入淡出,2-向上滑动,3-向右滑动,4-向下滑动,5-向左滑动。
slide_counter:是否显示切换图片的数字。
slide_captions:是否显示图片标题。
slide_interval:图片切换间隔时间(毫秒)
slides:所切换的图片集合,包括图片地址image,图片标题title,图片链接url。
autoplay:是否自动播放。
transition_speed:切换速度,默认750。
keyboard_nav:是否支持键盘操作切换。
random:是否随机切换图片
jquery动态背景切换全屏登录插件supersized.js的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
随机推荐
- 【数据库开发】在Windows上利用C++开发MySQL的初步
[数据库开发]在Windows上利用C++开发MySQL的初步 标签(空格分隔): [编程开发] Windows上在上面配置环境的基础上开展一个小demo链接数据库,没想到中间也出现了这么多的问题,简 ...
- HTML 5 全局 contenteditable 属性
contenteditable 可以将标签设置为可输入的input,textarea, 但是在ios上,点击或者点击很久input输入框才出来,兼容ios的方法是加一个 -webkit-user- ...
- 《Mysql 一条 SQL 更新语句是如何执行的?(Redo log)》
一:更新流程 - 对于更新来说,也同样会根据 SQL 的执行流程进行. - - 连接器 - 连接数据库,具体的不做赘述. - 查询缓存 - 在一个表上有更新的时候,跟这个表有关的查询缓存会失效. - ...
- 一个农民工自学java找到工作的励志故事
<!-----------------------------------------------------------------------------摘自网络-------------- ...
- Jfinal初次尝试及Jetty使用相关问题
Jetty介绍 Jetty官网:http://www.eclipse.org/jetty/ 参考:Jetty使用教程(一)--开始使用Jetty 1. 使用 参考上面文档,但是有些更新: echo $ ...
- 夯实基础:彻底搞清楚Cookie 和 Session 关系和区别(转)
原文地址:http://www.sohu.com/a/281228178_120047080 网络请求中的cookie与set-Cookie的交互模式和作用:https://my.oschina.ne ...
- Java Web 深入分析(5) Java ClassLoader 工作机制
Classloader 有3个作用 将class加载到JVM中去 审查每个类由谁去加载,是一种父优先的等级加载 把Class字节码统一编译成JVM统一要求的对象格式 ClassLoader的等级加载机 ...
- sql 添加变量
在sql语句中添加变量. declare @local_variable data_type 声明时需要指定变量的类型, 可以使用set和select对变量进行赋值, 在sql语句中就可以使用@loc ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- 关于ECharts甘特图的实现
对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解 此处只分享甘特图的option,代码如下: option: { title: { text: '项目实施进度表', left: ...