Question

我在java脚本中有一些基本的想法。我从某个站点获得了模板和示例java脚本。我试图旋转我的页面的图像背景在所有浏览器中工作正常，除了IE兼容模式。我正在SAP门户开发工作，所以这里Compatability模式必须.SO在这里我卡住了，请给出一些想法来克服这个问题。我用过PIE.htc克服css3支持。有任何选项可供javascript支持。

CSS FILE：

#slideshow {
    position:relative;
    height:350px;
    z-index:-1;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshow img {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px){
    img.bg {
    left: 50%;
    margin-left: -512px; 
}
}

#page-wrap { 
    position: relative;
    width: 400px; 
    margin: 50px auto; 
    padding: 20px; 
    background: #fff; 
    -moz-box-shadow: 0 0 20px black; 
    -webkit-box-shadow: 0 0 20px black; 
    box-shadow: 0 0 20px black; 
}

p {     
     font-size:14px;
    margin: 2px 2px 10px 5px; 
    color: black;

}

#content {
    width: 1100px;
    height:700px;
    margin: 0 auto;
    background: rgba(11,11,11, 0.5);
    padding: 10px;
}

h1 {

    font-family: 'Arial';
    font-size:14px;
    color: black;
    padding:6px 6px;


}

#content a {
    color: #a82711;
    font-weight: bold;
    text-transform: uppercase;
    background: #000;
    padding: 10px;
}

#bod{
width: 1100px;
    height:900px;
    margin: 0 auto;
    margin-bottom:10px;
    padding: 5px;

    box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset;
    -webkit-box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset;
    -moz-box-shadow: 0 0 10px #333333, 1px 1px 20px #bcbcbc inset;
    color: #666666;
    font-family: arial,serif;
    font-size: 15px;

 border-radius: 2px 2px 2px 2px;

    }

JSP文件

<!DOCTYPE html >


    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    <%@ taglib uri="/SapLogon" prefix="sap" %>

    <jsp:useBean id="logonLocale" class="com.sap.engine.applications.security.logon.beans.ResourceBean" scope="request"/>

    <% String webpath = (String) request.getAttribute("logon.application.real.path"); %>

    <%

    boolean isRTLMode = false;
    boolean uiFrameVisible = true;
    String uiFrameAllign = "center";
    String uiFrameTopMargin = "margin-top:50px;";
    %>


    <link rel="stylesheet" type="text/css" href="<%=webpath%>image/style.css" />
    <link rel="stylesheet" type="text/css" href="<%=webpath%>image/styles.css" />
    <title>Login</title>

    <link href="<%=webpath%>image/fullbody.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%=webpath%>image/jquery-1.2.6.min.js"></script>

    <%@ include file="/sap_user_agent.txt" %>

    <script type="text/javascript">

    function slideSwitch() {
        var $active = $('#slideshow IMG.active');

        if ( $active.length == 0 ) $active = $('#slideshow IMG:last');


        var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');



         var $sibs  = $active.siblings();
         var rndNum = Math.floor(Math.random() * $sibs.length );
        var $next  = $( $sibs[ rndNum ] );


        $active.addClass('last-active');

        $next.css({opacity: 0.0,behavior: url(<%=webpath%>image/PIE.htc)})
            .addClass('active')
            .animate({opacity: 1.0,behavior: url(<%=webpath%>image/PIE.htc)}, 1000, function() {
                $active.removeClass('active last-active');
            });
    }

    $(function() {
        setInterval( "slideSwitch()", 10000 );
    });

    </script>


    <body>




    <div id="bod">

    <div>

    <img src="<%=webpath%>image/logoback.jpg"  style="border-radius: 4px 4px 4px 4px;height:115px; width:1100px;" ></img>

     </div>









    <!-- this will work with any number of images -->
    <!-- set the active class on whichever image you want to show up as the default 
    (otherwise this will be the last image) -->
    <div id="slideshow">
        <img src="<%=webpath%>image/bg1.jpg"  class="active" />
        <img src="<%=webpath%>image/bg2.jpg"  />
        <img src="<%=webpath%>image/bg3.jpg" />
        <img src="<%=webpath%>image/bg4.jpg"  />
        <img src="<%=webpath%>image/bg5.jpg"  />
        <img src="<%=webpath%>image/bg7.jpg"  />
    </div>


    </body>

JavaScript在IE中不兼容模式下工作

0 个答案: