jquery橫向縱向鼠標(biāo)滾輪全屏切換
更新時(shí)間：2017年02月27日 16:35:50 作者：joesmile
這篇文章主要為大家詳細(xì)介紹了jquery橫向縱向鼠標(biāo)滾輪全屏切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了鼠標(biāo)滾輪全屏切換的jquery代碼，供大家參考，具體內(nèi)容如下
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠標(biāo)滾動(dòng)垂直全屏切換代碼</title>
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" >
</head>
<body>
<div id="container">
<div class="section active" id="section0">
<div class="intro">
<h1 class="title">Section One</h1>
</div>
</div>
<div class="section" id="section1">
<div class="intro">
<h1 class="title">Section Two</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section5">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section6">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section7">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section8">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
<div class="section" id="section9">
<div class="intro">
<h1 class="title">Section Three</h1>
</div>
</div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/switchPage.js"></script>
<script type="text/javascript">
$(function(){
$("#container").switchPage({
'loop' : true,
'keyboard' : true,
'direction' : 'vertical'
});
});
</script>
</body>
</html>
css
h1, body, html {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
h1 {
font-size: 2em;
font-weight: normal;
}
#container, .section {
height: 100%;
position: relative;
}
#section0, #section1, #section2, #section3 {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0 {
background-color: #024BCE;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
#section1 {
color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}
#section2 {
background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}
#section3 {
color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}
#section4 {
color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}
#section5 {
background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}
#section6 {
color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}
#section7 {
color: #fff;
text-shadow: 1px 1px 1px #333;
background-color: #31B81D;
}
#section8 {
background-color: #01B5F0;
color: #fff;
text-shadow: 1px 1px 1px #666;
}
#section9 {
color: #008283;
background-color: #5D0FF1;
text-shadow: 1px 1px 1px #fff;
}
.intro {
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
/*右側(cè)導(dǎo)航*/
#pages {
position: fixed;
right: 10px;
top: 50%;
list-style: none;
}
#pages li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 0 10px 5px;
}
#pages li.active {
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
#section0 .title {
-webkit-transform: translateX(-100%);/*內(nèi)容旋轉(zhuǎn)*/
transform: translateX(-100%);
-webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
animation: sectitle0 1s ease-in-out 100ms forwards; /*滑入頁(yè)面*/
}
/*為支持上述滑入特效寫的*/
@-webkit-keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes
sectitle0 { 0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
js
(function($) {
var defaults = {
'container': '#container', //容器
'sections': '.section', //子容器
'easing': 'ease', //特效方式，ease-in,ease-out,linear
'duration': 1000, //每次動(dòng)畫執(zhí)行的時(shí)間
'pagination': true, //是否顯示分頁(yè)
'loop': false, //是否循環(huán)
'keyboard': true, //是否支持鍵盤
'direction': 'vertical', //滑動(dòng)的方向 horizontal,vertical,
'onpageSwitch': function(pagenum) {}
};
var win = $(window);
var iIndex = 0; //當(dāng)前section的索引
var arrElement = [];
var canScroll = true;
var container;
var sections;
var opts;
var flag=false;
var SP = $.fn.switchPage = function(options) {
opts = $.extend({}, defaults, options || {});
container = $(opts.container);
sections = container.find(opts.sections);
sections.each(function() {
arrElement.push($(this));
});
return this.each(function() {
if (opts.direction == 'horizontal') initLayout();
if (opts.pagination) initPagination();
})
}
//重置鼠標(biāo)滾輪事件
$(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
function MouseWheelHandler(e) {
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1, Math.min(1, value));
if (canScroll) {
if (delta < 0) {
SP.moveSectionDown();
} else {
SP.moveSectionUp();
}
}
return false;
}
//向上一張移
SP.moveSectionUp = function() {
if (iIndex) {
iIndex--;
} else if (opts.loop) {
iIndex = arrElement.length - 1;
}
scrollPage(arrElement[iIndex]);
}
//向下一張移
SP.moveSectionDown = function() {
if (iIndex < (arrElement.length - 1)) {
iIndex++
} else if (opts.loop) {
iIndex = 0;
}
scrollPage(arrElement[iIndex]);
}
//當(dāng)設(shè)置橫向移動(dòng)時(shí)初始化橫向頁(yè)面
function initLayout() {
var width = (sections.length * 100) + '%',
cellwidth = (100 / sections.length).toFixed(2) + '%';
// container.width(width).addClass('left');
container.width(width);
sections.width(cellwidth).addClass('left');
}
//導(dǎo)航條初始化 hovertree.com
function initPagination() {
var length = sections.length;
var pageHtml = '<ul id="pages"><li class="active" id="dot_0"></li>'
for (var i = 1; i < length; i++) pageHtml += '<li id="dot_'+i+'"></li>';
pageHtml += '</ul>';
$("body").append(pageHtml);
flag=true;
if(flag==true){
$("li").click(function(){
var liId = $(this).attr("id");
var arr = liId.split('_');
iIndex=arr[1];
scrollPage(arrElement[iIndex]);
});
}
}
/*跳轉(zhuǎn)到dot對(duì)應(yīng)頁(yè)面*/
function clickDot(){
}
//移動(dòng)頁(yè)面
function scrollPage(element) {
var dest = element.position();
if (dest == void 0) return;
initEffects(dest, element);
}
function isSupportCss(property) {
var body = $('body')[0];
for (var i = 0; i < property.length; i++) {
if (property[i] in body.style) {
return true;
}
}
return false;
}
//移動(dòng)頁(yè)面的核心函數(shù)
function initEffects(dest, element) {
canScroll = false;
var translate = "";
if (opts.direction == 'horizontal') {
translate = '-' + dest.left + 'px, 0px, 0px';
} else {
translate = '0px, -' + dest.top + 'px, 0px';
}
container.css({
'transform': "translate3d(" + translate + ")",
'transition': "all " + opts.duration + "ms " + opts.easing
});
container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function() {
canScroll = true;
});
element.addClass("active").siblings().removeClass('active');
if (opts.pagination) {
paginationHandler();
}
}
//每次頁(yè)面移動(dòng)時(shí)，修改導(dǎo)航欄 何問(wèn)起
function paginationHandler() {
var pages = $('#pages li');
pages.eq(iIndex).addClass('active').siblings().removeClass('active');
}
var resizeId;
win.resize(function() {
clearTimeout(resizeId);
resizeId = setTimeout(function(){
rebuild();
}, 500);
});
function rebuild() {
var currentHeight = win.height();
var currentWidth = win.width();
var element = arrElement[iIndex];
if(opts.direction == "horizontal") {
var offsetLeft = element.offset().left;
if (Math.abs(offsetLeft) > (currentWidth/2) && iIndex < (arrElement.length - 1)){
iIndex++
}
}else {
var offsetTop = element.offset().top;
if (Math.abs(offsetTop) > (currentHeight/2) && iIndex < (arrElement.length - 1)){
iIndex++
}
}
var currentElement = arrElement[iIndex],
dest = currentElement.position();
initEffects(dest, currentElement);
if(opts.pagination) paginationHandler();
}
})(jQuery);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
- jquery結(jié)合html實(shí)現(xiàn)中英文頁(yè)面切換
- jQuery實(shí)現(xiàn)鼠標(biāo)移入移出事件切換功能示例
- jQuery實(shí)現(xiàn)的點(diǎn)擊標(biāo)題文字切換字體效果示例【測(cè)試可用】
- jquery實(shí)現(xiàn)圖片放大點(diǎn)擊切換
- jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
- 用jquery的attr方法實(shí)現(xiàn)圖片切換效果
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jquery淡化版banner異步圖片文字效果切換圖片特效
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jQuery實(shí)現(xiàn)的中英文切換功能示例
相關(guān)文章
jQuery實(shí)現(xiàn)可編輯表格并生成json結(jié)果(實(shí)例代碼)
這篇文章主要介紹了 jquery實(shí)現(xiàn)可編輯表格并生成json結(jié)果,該代碼解析和加載功能都用前端js實(shí)現(xiàn)，簡(jiǎn)化了后臺(tái)代碼邏輯，非常不錯(cuò)，具有參考借鑒加載，需要的朋友可以參考下2017-07-07
用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
下面小編就為大家?guī)?lái)一篇用戶管理的設(shè)計(jì)_jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了jQuery添加和刪除指定標(biāo)簽的方法，通過(guò)動(dòng)態(tài)的給元素添加刪除一個(gè)CSS類可以實(shí)現(xiàn)此功能,需要的朋友可以參考下2015-12-12
大部分jQuery插件都是這種類型的插件，由于這種插件是將對(duì)象方法封裝起來(lái)，在jQuery選擇器獲取jQuery對(duì)象過(guò)程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢(shì)2012-09-09
jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法
這篇文章主要介紹了jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法,實(shí)例分析了jQuery中append追加內(nèi)容的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery獲取父元素節(jié)點(diǎn)、子元素節(jié)點(diǎn)及兄弟元素節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2016-04-04
jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了jquery五角星評(píng)分插件示例分享,需要的朋友可以參考下2014-02-02
jQuery實(shí)現(xiàn)的縱向下拉菜單實(shí)例詳解【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的縱向下拉菜單,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)縱向下拉菜單的步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07
jquery常用技巧及常用方法列表集合，學(xué)習(xí)jquery的朋友可以收藏下。方便查找學(xué)習(xí)。2011-04-04