自定义滚动(网格布局)在Javascript / JQuery的导向问题

编辑*继承人JFiddle版本,这样你就可以得到当前问题的一个更好的主意。

http://jsfiddle.net/Tr7Xs/

感谢您抽出时间来帮助我与我的问题,如果您浏览我的查询。

现在,关于我的情况...

我想在基本意义上创造了多方向的滑动页面。 现在,我的代码是怎么样的工作。 有两件事情我一直在试图解决,但不能似乎得到。 希望你们中的一个人萨维能帮助我。

  1. 我似乎无法获得javscript加载主(中心)事业部的负载,而不是西北(左上)
  2. 西南分区是预定区域下方的方框中(如下图,我做了我的说明意图布局)

我想因为我是新的,他们不会让我张贴图片,所以我主持它,你现在可以在下面的链接图。

http://imageshack.us/f/97/mexplanation.jpg/

这是我的HTML布局:

<script> $(document).ready(function() { $('a.panel').click(function () { $('a.panel').removeClass('selected'); $(this).addClass('selected'); current = $(this); $('#wrapper').scrollTo($(this).attr('href'), 800); return false; }); $(window).resize(function () { resizePanel(); }); }); function resizePanel() { width = $(window).width(); height = $(window).height(); mask_width = width * $('.item').length; $('#debug').html(width + ' ' + height + ' ' + mask_width); $('#wrapper, .item').css({width: width, height: height}); $('#mask').css({width: mask_width, height: height}); $('#wrapper').scrollTo($('a.selected').attr('href'), 0); } </script> <style> body { height:100%; width:100%; margin:0;padding:0; overflow:hidden; } #wrapper { width:100%; height:100%; position:absolute; top:0; left:0; background-color:#000; overflow:hidden; } #mask { width:500%; height:100%; background-color:#eee; } .item { width:20%; height:100%; float:left; background-color:#000; } .content { width:400px; height:300px; top:20%; margin:0 auto; background-color:#CCC; position:relative; } .selected { background:#fff; font-weight:700; } .clear { clear:both; } </style> </head> <body> <div id="wrapper"> <div id="mask"> <!-- North West Begins Below --> <div id="itemNW" class="item"> <a name="itemNW"></a> <div class="content">North West <a href="#itemMM" class="panel">Main</a> <a href="#itemNE" class="panel">North East</a> <a href="#itemSW" class="panel">South West</a> </div> </div> <!-- North West Ends Above --> <div class="item"></div> <!-- North East Begins Below --> <div id="itemNE" class="item"> <a name="itemNE"></a> <div class="content">North East <a href="#itemMM" class="panel">Main</a> <a href="#itemNW" class="panel">North West</a> <a href="#itemSE" class="panel">South East</a> </div> </div> <div class="clear"></div> <!-- North East Ends Above --> <div class="item"></div> <!-- Main Page Begins Below --> <div id="itemMM" class="item"> <a name="itemMM"></a> <div class="content">Main <a href="#itemNW" class="panel">North West</a> <a href="#itemNE" class="panel">North East</a> <a href="#itemSW" class="panel">South West</a> <a href="#itemSE" class="panel">South East</a> </div> </div> <!-- Main Page Ends Above --> <div class="clear"></div> <div class="item"></div> <div class="item"></div> <!-- South East Begins Below --> <div id="itemSE" class="item"> <a name="itemSE"></a> <div class="content">South East <a href="#itemMM" class="panel">Main</a> <a href="#itemSW" class="panel">South West</a> <a href="#itemNE" class="panel">North East</a> </div> </div> <!-- South East Ends Above --> <div class="item"></div> <div class="clear"></div> <div class="clear"></div> <!-- South West Begins Below --> <div id="itemSW" class="item"> <a name="itemSW"></a> <div class="content">South West <a href="#itemMM" class="panel">Main</a> <a href="#itemSE" class="panel">South East</a> <a href="#itemNW" class="panel">North West</a> </div> </div> <!-- South West Ends Above --> <div class="item"></div> <div class="item"></div> </div> </div> </body>

这是JavaScript / jQuery的布局依赖于(与jQuery的-1.3.1.min.js):

;(function( $ ){ var $scrollTo = $.scrollTo = function( target, duration, settings ){ $(window).scrollTo( target, duration, settings ); }; $scrollTo.defaults = { axis:'xy', duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1 }; // Returns the element that needs to be animated to scroll the window. // Kept for backwards compatibility (specially for localScroll & serialScroll) $scrollTo.window = function( scope ){ return $(window)._scrollable(); }; // Hack, hack, hack :) // Returns the real elements to scroll (supports window/iframes, documents and regular nodes) $.fn._scrollable = function(){ return this.map(function(){ var elem = this, isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1; if( !isWin ) return elem; var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem; return $.browser.safari || doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement; }); }; $.fn.scrollTo = function( target, duration, settings ){ if( typeof duration == 'object' ){ settings = duration; duration = 0; } if( typeof settings == 'function' ) settings = { onAfter:settings }; if( target == 'max' ) target = 9e9; settings = $.extend( {}, $scrollTo.defaults, settings ); // Speed is still recognized for backwards compatibility duration = duration || settings.speed || settings.duration; // Make sure the settings are given right settings.queue = settings.queue && settings.axis.length > 1; if( settings.queue ) // Let's keep the overall duration duration /= 2; settings.offset = both( settings.offset ); settings.over = both( settings.over ); return this._scrollable().each(function(){ var elem = this, $elem = $(elem), targ = target, toff, attr = {}, win = $elem.is('html,body'); switch( typeof targ ){ // A number will pass the regex case 'number': case 'string': if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){ targ = both( targ ); // We are done break; } // Relative selector, no break! targ = $(targ,this); case 'object': // DOMElement / jQuery if( targ.is || targ.style ) // Get the real position of the target toff = (targ = $(targ)).offset(); } $.each( settings.axis.split(''), function( i, axis ){ var Pos = axis == 'x' ? 'Left' : 'Top', pos = Pos.toLowerCase(), key = 'scroll' + Pos, old = elem[key], max = $scrollTo.max(elem, axis); if( toff ){// jQuery / DOMElement attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] ); // If it's a dom element, reduce the margin if( settings.margin ){ attr[key] -= parseInt(targ.css('margin'+Pos)) || 0; attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0; } attr[key] += settings.offset[pos] || 0; if( settings.over[pos] ) // Scroll to a fraction of its width/height attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos]; }else{ var val = targ[pos]; // Handle percentage values attr[key] = val.slice && val.slice(-1) == '%' ? parseFloat(val) / 100 * max : val; } // Number or 'number' if( /^\d+$/.test(attr[key]) ) // Check the limits attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max ); // Queueing axes if( !i && settings.queue ){ // Don't waste time animating, if there's no need. if( old != attr[key] ) // Intermediate animation animate( settings.onAfterFirst ); // Don't animate this axis again in the next iteration. delete attr[key]; } }); animate( settings.onAfter ); function animate( callback ){ $elem.animate( attr, duration, settings.easing, callback && function(){ callback.call(this, target, settings); }); }; }).end(); }; // Max scrolling position, works on quirks mode // It only fails (not too badly) on IE, quirks mode. $scrollTo.max = function( elem, axis ){ var Dim = axis == 'x' ? 'Width' : 'Height', scroll = 'scroll'+Dim; if( !$(elem).is('html,body') ) return elem[scroll] - $(elem)[Dim.toLowerCase()](); var size = 'client' + Dim, html = elem.ownerDocument.documentElement, body = elem.ownerDocument.body; return Math.max( html[scroll], body[scroll] ) - Math.min( html[size] , body[size] ); }; function both( val ){ return typeof val == 'object' ? val : { top:val, left:val }; }; })( jQuery );

请如果有人能花时间来检查我的文件,我真的很感激了! 谢谢你的帮助!

分类:JavaScript的 时间:2012-10-10 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.479 (s). 10 q(s)