外部动画jquery不工作--php_Php_Jquery_External

外部动画jquery不工作--php

php jquery

外部动画jquery不工作--php,php,jquery,external,Php,Jquery,External,我有一个加载外部php文件的主php文件。这是我的主php文件中的代码： <php> <head> <meta http-equiv="content-type" content="text/php; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="all" href="style.css" /> <script type="text/

我有一个加载外部php文件的主php文件。这是我的主php文件中的代码：

<php>
<head>
    <meta http-equiv="content-type" content="text/php; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />


    <script type="text/javascript" src="ajax.js"></script>
    <link rel="stylesheet" href="colorbox.css" />

        <script src="js/jquery.colorbox.js"></script>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/jquery.colorbox-min.js"></script>

<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>       

    <script type="text/javascript">
      $().ready(function() {
    $('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
    });
</script>


</head>


<div id="tengah" class="jimgMenu" >

  <ul>
    <li class="landscapes"> <a href="javascript:ajaxpage('7.php', 'ResponseDiv');"> </a></li>
    <li class="people"> <a href="javascript:ajaxpage('8.php', 'ResponseDiv');"> </a></li>
    <li class="nature"> <a href="javascript:ajaxpage('9.php', 'ResponseDiv');"> </a></li>
  </ul>

</div>
    <div id="content" class="clearfix shadow">
        <div id="sidebar" class="left">

<div id='ResponseDiv'> </div>
            <div id="menu" class="inner">

            </div>
        </div>

        <div id="main" class="right">
        <h2>Detail</h2>

        <div id='ResponseDiv2'> </div>

        </div>
    </div>
</div>

</php>

问题是，当我尝试将“7.php”加载到main.php时，7.php文件已加载，但7.php中的动画不起作用

有人知道为什么会这样吗

这是7.php的内容

<php>
<html>
<head>
<style type="text/css">
body {
    background: #0F0D0D;
    padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
    position: relative;     
    height: 500px;
    /* Make bigger than a photo, because we need a place for a scrollbar. */
    width: 160px;

    margin-top: 30px;
    overflow: auto;
}
div.sc_menu {
    padding: 15px 0;
}
.sc_menu a {
    display: block;
    margin-bottom: 5px;
    width: 130px;

    border: 2px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;        

    /* When image support is turned off */
    color: #fff;
    background: rgb(79, 79, 79);    
}
.sc_menu a:hover {
    border-color: rgb(130, 130, 130);
    border-style: dotted;
}
.sc_menu img {
    display: block;
    border: none;
}

.sc_menu_wrapper .loading {
    position: absolute;
    top: 50px;
    left: 10px;

    margin: 0 auto;
    padding: 10px;

    width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;    

    text-align: center;
    color: #fff;
    border: 1px solid rgb(79, 79, 79);
    background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
    display: block;
    position: absolute;

    padding: 6px;
    font-size: 12px;    
    color: #fff;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;    

    border: 1px solid rgb(79, 79, 79);
    background: rgb(0, 0, 0);
    /* Make background a bit transparent for browsers that support rgba */  
    background: rgba(0, 0, 0, 0.5);
}

/* Here are styles for a link to an article. Not for you :) */
#back {
    margin-left: 8px;
    color: gray;
    font-size: 18px;
    text-decoration: none;
}
#back:hover {
    text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);

    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;

        // Counts number of images that are succesfully loaded
        images.each(function(){
            if (this.complete) completed++; 
        });

        if (completed == images.length){
            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function(){

                loading.hide();
                // Remove scrollbars    
                wrapper.css({overflow: 'hidden'});                      

                scrollable.slideDown('slow', function(){
                    enable();   
                });                 
            }, 1000);   
        }
    }, 100);

    function enable(){
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 99;                    
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that 
        // var wrapperOffset = wrapper.offset();

        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
            .css('opacity', 0)
            .appendTo(wrapper);

        // Save menu titles
        scrollable.find('a').each(function(){               
            $(this).data('tooltipText', this.title);                
        });

        // Remove default tooltip
        scrollable.find('a').removeAttr('title');       
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');   

        var lastTarget;
        //When user move mouse over menu            
        wrapper.mousemove(function(e){
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();

            var tooltipLeft = e.pageX - wrapperOffset.left;
            // Do not let tooltip to move out of menu.
            // Because overflow is set to hidden, we will not be able too see it 
            tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());

            var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
            // Move tooltip under the mouse when we are in the higher part of the menu
            if (e.pageY - wrapperOffset.top < wrapperHeight/2){
                tooltipTop += 80;
            }               
            tooltip.css({top: tooltipTop, left: tooltipLeft});              

            // Scroll menu
            var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            if (top < 0){
                top = 0;
            }           
            wrapper.scrollTop(top);
        });

        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function(){
            if (!lastTarget) return;    

            var currentText = tooltip.text();

            if (lastTarget.nodeName == 'IMG'){                  
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
                        .stop(true)
                        .css('opacity', 0)  
                        .text(newText)
                        .animate({opacity: 1}, 1000);
                }                   
            }
        }, 200);

        // Hide tooltip when leaving menu
        wrapper.mouseleave(function(){
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });         

        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
            tooltip
                .stop()
                .css('opacity', 0)
                .text($(this).data('tooltipText'))
                .animate({opacity: 1}, 1000);

        }, function(){
            tooltip
                .stop()
                .animate({opacity: 0}, 300);
        });
        */          
    }
}

$(function(){   
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});


</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
    <div style="display: block;" class="sc_menu">
        <a href="#" ><img src="images/1.jpg"></a>
        <a href="#" ><img src="images/2.jpg"></a>
        <a href="#" ><img src="images/3.jpg"></a>       
        <a href="#" ><img src="images/4.jpg"></a>
        <a href="#" ><img src="images/5.jpg"></a>
        <a href="#" ><img src="images/6.jpg"></a>

    </div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>

</body></html>
</php>


身体{
背景：#0F0D0D；
填充：30px 0 50px；
}
div.sc\u菜单\u包装{
位置：相对位置；
高度：500px；
/*要比照片大，因为我们需要一个地方放滚动条*/
宽度：160px；
边缘顶部：30px；
溢出：自动；
}
div.sc_菜单{
填充：15px0；
}
.sc_菜单a{
显示：块；
边缘底部：5px；
宽度：130px；
边框：2个rgb（79,79,79）实心；
-webkit边界半径：4px；
-moz边界半径：4px；
/*关闭图像支持时*/
颜色：#fff；
背景：rgb（79,79,79）；
}
.sc_菜单a：悬停{
边框颜色：rgb（130130130）；
边框样式：虚线；
}
.sc_菜单img{
显示：块；
边界：无；
}
.sc\u菜单\u包装器。正在加载{
位置：绝对位置；
顶部：50px；
左：10px；
保证金：0自动；
填充：10px；
宽度：100px；
-webkit边界半径：4px；
-moz边界半径：4px；
文本对齐：居中；
颜色：#fff；
边框：1px实心rgb（79,79,79）；
背景：#1d；
}
/*样式工具提示*/
.sc\u菜单\u工具提示{
显示：块；
位置：绝对位置；
填充：6px；
字体大小：12px；
颜色：#fff；
-webkit边界半径：4px；
-moz边界半径：4px；
边框：1px实心rgb（79,79,79）；
背景：rgb（0,0,0）；
/*对于支持rgba*/
背景：rgba（0,0,0,0.5）；
}
/*以下是文章链接的样式。不适合你：）*/
#背{
左边距：8px；
颜色：灰色；
字号：18px；
文字装饰：无；
}
#后退：悬停{
文字装饰：下划线；
}
/*

这段代码可以工作…
什么是
和？这只是为了确保它是一个php文件。这真的是问题吗？因为你已经在使用jQuery，你可以将javascript减少到大约2行…7.php文件的内容是什么？@biksupahai：可能不是，但你不应该使用它们。这些不是有效的HTML或PHP标记。
<php>
<html>
<head>
<style type="text/css">
body {
    background: #0F0D0D;
    padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
    position: relative;     
    height: 500px;
    /* Make bigger than a photo, because we need a place for a scrollbar. */
    width: 160px;

    margin-top: 30px;
    overflow: auto;
}
div.sc_menu {
    padding: 15px 0;
}
.sc_menu a {
    display: block;
    margin-bottom: 5px;
    width: 130px;

    border: 2px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;        

    /* When image support is turned off */
    color: #fff;
    background: rgb(79, 79, 79);    
}
.sc_menu a:hover {
    border-color: rgb(130, 130, 130);
    border-style: dotted;
}
.sc_menu img {
    display: block;
    border: none;
}

.sc_menu_wrapper .loading {
    position: absolute;
    top: 50px;
    left: 10px;

    margin: 0 auto;
    padding: 10px;

    width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;    

    text-align: center;
    color: #fff;
    border: 1px solid rgb(79, 79, 79);
    background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
    display: block;
    position: absolute;

    padding: 6px;
    font-size: 12px;    
    color: #fff;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;    

    border: 1px solid rgb(79, 79, 79);
    background: rgb(0, 0, 0);
    /* Make background a bit transparent for browsers that support rgba */  
    background: rgba(0, 0, 0, 0.5);
}

/* Here are styles for a link to an article. Not for you :) */
#back {
    margin-left: 8px;
    color: gray;
    font-size: 18px;
    text-decoration: none;
}
#back:hover {
    text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);

    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);

    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;

        // Counts number of images that are succesfully loaded
        images.each(function(){
            if (this.complete) completed++; 
        });

        if (completed == images.length){
            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function(){

                loading.hide();
                // Remove scrollbars    
                wrapper.css({overflow: 'hidden'});                      

                scrollable.slideDown('slow', function(){
                    enable();   
                });                 
            }, 1000);   
        }
    }, 100);

    function enable(){
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 99;                    
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that 
        // var wrapperOffset = wrapper.offset();

        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
            .css('opacity', 0)
            .appendTo(wrapper);

        // Save menu titles
        scrollable.find('a').each(function(){               
            $(this).data('tooltipText', this.title);                
        });

        // Remove default tooltip
        scrollable.find('a').removeAttr('title');       
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');   

        var lastTarget;
        //When user move mouse over menu            
        wrapper.mousemove(function(e){
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();

            var tooltipLeft = e.pageX - wrapperOffset.left;
            // Do not let tooltip to move out of menu.
            // Because overflow is set to hidden, we will not be able too see it 
            tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());

            var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
            // Move tooltip under the mouse when we are in the higher part of the menu
            if (e.pageY - wrapperOffset.top < wrapperHeight/2){
                tooltipTop += 80;
            }               
            tooltip.css({top: tooltipTop, left: tooltipLeft});              

            // Scroll menu
            var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            if (top < 0){
                top = 0;
            }           
            wrapper.scrollTop(top);
        });

        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function(){
            if (!lastTarget) return;    

            var currentText = tooltip.text();

            if (lastTarget.nodeName == 'IMG'){                  
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
                        .stop(true)
                        .css('opacity', 0)  
                        .text(newText)
                        .animate({opacity: 1}, 1000);
                }                   
            }
        }, 200);

        // Hide tooltip when leaving menu
        wrapper.mouseleave(function(){
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });         

        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
            tooltip
                .stop()
                .css('opacity', 0)
                .text($(this).data('tooltipText'))
                .animate({opacity: 1}, 1000);

        }, function(){
            tooltip
                .stop()
                .animate({opacity: 0}, 300);
        });
        */          
    }
}

$(function(){   
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});


</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
    <div style="display: block;" class="sc_menu">
        <a href="#" ><img src="images/1.jpg"></a>
        <a href="#" ><img src="images/2.jpg"></a>
        <a href="#" ><img src="images/3.jpg"></a>       
        <a href="#" ><img src="images/4.jpg"></a>
        <a href="#" ><img src="images/5.jpg"></a>
        <a href="#" ><img src="images/6.jpg"></a>

    </div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>

</body></html>
</php>

<a href="#" onmouseover="javascript:ajaxpage('ajaxfiles/hotel.html', 'rightcolumn'); loadobjs('css/style.css', 'css/slide.css', 'js/jquery1.3.2-min.js', 'js/jquery-ui1.5.3-min.js', 'js/featured.js')">See Hotel</a>