使用不同网页的水平网页转置功能在Chrome中无效

时间:2015-08-14 07:41:10

标签: javascript jquery ajax animation transition

我想用不同的网页更改网址进行水平页面转换。 下面的代码不能在chrome中工作,但在mozilla中工作正常

 (function(a){
    a.fn.preload=function(){
    this.each(function(){`enter code here`
    var b=new Image();b.src=this})};
    a.fn.SliderFunc=function(f){
    var y={homeButton:".home-button",prevButton:".prev-button",nextButton:".next-button",transition:"horizontal-slide",transitionSpeed:600,autoplay:false,loop:true,slideDuration:2,easing:"swing",preloadSlides:true,enableKeyboardNavigation:true};
    if(f)
    {a.extend(y,f)}
    if(this.length>1)
    {this.each(function(){a(this).SliderFunc(f)});return this}
    var m=this;var s=a(m);var o=s.children("div.slides");var r=o.children("div.slide");
    var w=s.children(".resources");
    var k=w.find("li");
    var l=k.size()>0?k.size():r.size();
    var e=false;var q=0;
    var v=function(){x();height=a(window).height();width=a(window).width();s.css({height:height,width:width,position:"relative",overflow:"hidden"});c();o.css("position","absolute");r.css({position:"relative",width:width,height:height,overflow:"auto"});if(y.transition=="horizontal-slide"){o.css("width",l*width);r.css("float","left")}A();d();g(s);C(s);B();if(y.preloadSlides){u()}};
    var d=function(){
    a.address.init(function(D){a.address.autoUpdate(false)}).change(function(D){var E=D.value;if(p()){if(E.indexOf("#")!=-1){E=E.split("#")[1]}else{if(E.indexOf("/")!=-1){E=E.split("/")[1]}}}else{E=D.value.substring(1)}if(E!=""&&typeof(E)!="undefined"){if(r.filter("#"+E).size()>0){m.selectById(E)}else{m.gotoHome()}}else{m.gotoHome()}})};
    var x=function(){a("html, body").css({margin:0,padding:0,overflow:"hidden"});if(p()){a("html, body").css({overflow:"auto"})}a(window).resize(function(){height=a(window).height();width=a(window).width();s.css({width:width,height:height});r.css({width:width,height:height});
    var D=t().index();
    if(D!=-1)
    {if(y.transition=="horizontal-slide"){o.css({width:l*width});s.stop().scrollLeft(D*width)}else{if(y.transition=="vertical-slide"){s.stop().scrollTop(D*height)}}}})};function p(){if(parseFloat(navigator.appVersion.split("MSIE")[1])==7){return true}return false}var g=function(D){D.find(".special-anchor").not(".prev-button, .next-button, .home-button").click(function(E){var F=a(this).attr("href");if(p()){F=F.split("#")[1]}F=F.replace(/^#/,"");a.address.value(F);a.address.update();return false})};
    var C=function(D){D.find(y.homeButton+".special-anchor").bind("click",function(E){E.preventDefault();m.gotoHome()});D.find(y.prevButton+".special-anchor").bind("click",function(E){E.preventDefault();m.selectPrevious()});D.find(y.nextButton+".special-anchor").bind("click",function(E){E.preventDefault();m.selectNext()})};var A=function(){if(y.enableKeyboardNavigation){a(document).keydown(function(D){if(D.target.type!=="textarea"&&D.target.type!=="text"){var E=D.keyCode||D.which;switch(E){case 37:case 38:m.selectPrevious();break;case 39:case 40:m.selectNext();break;default:break}}})}};var B=function(){if(y.autoplay){if(!t().hasClass("loading")){clearInterval(q);if(!y.loop){if(t().index()==l-1){return false}}q=setInterval(m.selectNext,y.slideDuration*1000)}}return true};this.selectById=function(F,E){var D=r.filter("#"+F).index();b(D,E)};this.gotoHome=function(D){a.address.value(r.eq(0).attr("id"));a.address.update();if(D){D()}};this.selectNext=function(E){var D=t().index();if(++D==l){D=0}a.address.value(r.eq(D).attr("id"));a.address.update();if(E){E()}};this.selectPrevious=function(E){var D=t().index();if(--D<0){D=l-1}a.address.value(r.eq(D).attr("id"));a.address.update();if(E){E()}};var b=function(D,G){var E=t();if(D!=E.index()&&D!=-1){clearInterval(q);i().removeClass("prev");E.removeClass("current").addClass("prev");r.eq(D).addClass("current");if(z(D)){n(D)}if(!e){var F=y.transitionSpeed;y.transitionSpeed=0;e=true}switch(y.transition){case"vertical-slide":h(G);break;default:case"none":case"horizontal-slide":j(G);break}y.transitionSpeed=F}else{if(G){G()}}};var j=function(D){s.stop().animate({scrollLeft:t().index()*width},y.transitionSpeed,y.easing,function(){B();if(D){D()}})};var h=function(D){s.stop().animate({scrollTop:t().index()*height},y.transitionSpeed,y.easing,function(){B();if(D){D()}})};var u=function(){for(var D=0;D<k.length;D++){if(z(D)){n(D,u);return false}}return false};var n=function(F,H){var E=k.eq(F).children("a").attr("href");var D=r.eq(F);var G=function(){D.removeClass("loading").addClass("loaded");g(D);C(D);if(D.index()==t().index()){B()}if(H){H()}};if(z(F)){D.addClass("loading").load(E,G)}};var c=function(){var F="";for(var D=0;D<l;D++){var E=k.eq(D).children("a").attr("id");F+="<div id='"+E+"' class='slide'></div>"}o.append(F);r=o.children("div.slide")};var t=function(){return r.filter("div.current")};var i=function(){return r.filter("div.prev")};var z=function(F){var E=k.eq(F).children("a").attr("href");var D=r.eq(F);if(typeof(E)!="undefined"&&E!="#"&&E!=" "&&E!=""){if(!D.hasClass("loaded")&&!D.hasClass("loading")){return true}}return false};v();return this}})(jQuery);

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href="css/styles-min.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-address.js"></script>
        <script type="text/javascript" src="js/jquery.fss-1.0.js"></script>
        <title>FSS - Full Screen Sliding Website Plugin</title>
        <script type="text/javascript">
            $(function() {
                $(['images/home-button-on.png', 'images/prev-button-on.png', 'images/next-button-on.png']).preload();
                $(".slider").SliderFunc();
            });
        </script>
    </head>
    <body>

        <!-- Slider starts -->
        <div class="slider">
            <div class="slides">
                <!-- Nothing here, the content will be loaded dynamically. -->
            </div> <!-- end slides -->

            <div class="resources" style="display: none; visibility: hidden;">
                <ul>
                    <li><a id="introduction" href="sample-content/page1.html">1</a></li>
                    <li><a id="deep-linking" href="sample-content/page2.html">2</a></li>
                    <li><a id="ajax" href="sample-content/page3.html">3</a></li>
                    <li><a id="options" href="sample-content/page4.html">4</a></li>
                    <li><a id="advanced-usage" href="sample-content/page5.html">5</a></li>
                </ul>
            </div>
        </div>
        <!-- Slider ends -->

    </body>
</html>