jQuery插件开发——全屏切换插件 - 相关文章

【jQuery插件开发——全屏切换插件】的更多相关文章

jQuery插件开发——全屏切换插件

这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下:  <div class="fullpage-container"> <div class="fullpage-pagebox"> <div id="fullpage-page1" class="fullpage-page-vertical"><h1>1&…

jQuery 扩展全屏切换

(function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS5…

CSS jQuery 图片全屏切换

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ overflow: hidden; } .nav-container{ position: absolute; bottom:0px; } .nav-container a{ text-decorat…

学习 | jQuery全屏滚动插件FullPage.js

简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式兼容性 fullPage.js 支持 IE8+ 及其他现代浏览器.测试代码测试代码 <!DOCTYPE html> <html lang="en">…

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

jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天就给大家说说fullPage.js的使用方法和设置. 简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站主要功能支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机.平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自…

Scrollify – jQuery全屏滚动插件

和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js.不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接.设置过度效果.偏移.是否显示滚动条.回调函数以及 fullPage.js 没有的局部滚动. 兼容 jQuery 兼容兼容 1.7 及以上版本. 浏…

基于Ascensor.js全屏切换页面插件

今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="general"> <div id="content">  <div> <div class="contenu&…

基于jQuery全屏相册插件zoomVisualizer

基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="zoom-visualizer"> <div class="lightbox-ofertas-bg"></div> <div class="lightbox&q…

jQuery鼠标滚动垂直全屏切换代码

体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont…

jquery.fullPage.js全屏滚动插件教程演示

css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -%;} .section3 p { position: relative; bottom: -%;} .section4 p { display: none;} &…