0

下面是仅在 jsfiddle 中有效的代码，但是当我在浏览器中使用时它不起作用

http://jsfiddle.net/5r6mx/18/ 下面是我在 jsfiddle 链接中的浏览器中使用的代码

//脚本

$(document).ready(function() { 
$(".image_stack").delegate('img', 'mouseenter', function() {
    if ($(this).hasClass('stackphotos')) {

        var $parent = $(this).parent();

$parent.find('div.namehover').addClass('rotate3');
$parent.find('div.namehover').css("left","77px");          
$parent.find('img#photo1').addClass('rotate1');
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px"); 
$parent.find('img#photo3').css("left","50px");
   }
})
.delegate('img', 'mouseleave', function() {
    $('img#photo1').removeClass('rotate1');
        $('img#photo2').removeClass('rotate2');
        $('img#photo3').removeClass('rotate3');
        $('div.namehover').removeClass('rotate3');
 $('div.namehover').css("left","");   


        $('img#photo1').css("left","");
$('img#photo3').css("left","");

});;
});

​</p>

html

<div style="border:0px;clear:both;padding-bottom:240px;">

 <div class="image_stack" style="margin-left:0px;" >
 <img id="photo1" class="stackphotos" src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg"  >
 <img id="photo2" class="stackphotos" src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg" >
  <img id="photo3" class="stackphotos"  src="http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg" >

 <div class="namehover"> Perfumes</div>

 </div>

css

.image_stack img { /* css style for photo stack */
border: none;
text-decoration: none;
position: absolute;
margin-left:0px;
width: 170px;
height: 180px;
}
.image_stack { /* css style for photo stack */
width: 200px;
position: relative;
padding-left:20px;
margin-bottom:40px;
float:left;

}
.image_stack img { /* css style for photo stack */
position: absolute;
border: 4px solid #FFF;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
z-index: 9999;
/* Firefox */
-moz-transition: all 0.2s ease;
/* WebKit */
-webkit-transition: all 0.2s ease;
/* Opera */
-o-transition: all 0.2s ease;
/* Standard */
transition: all 0.2s ease;
}
.image_stack #photo1 {  /* position of last photo in the stack */
top: 8px;
left: 108px;
}
.image_stack #photo2 {/* position of middle photo in the stack */
top: 6px;
left: 104px;
}
.image_stack #photo3 {/* position of first photo at the top in the stack */
top: 4px;
left: 100px;
right: 100px; 
}
.image_stack .rotate1 {/* rotate last image 15 degrees to the right */
-webkit-transform: rotate(15deg); /* safari and chrome */
-moz-transform: rotate(15deg);/*firefox browsers */
transform: rotate(15deg);/*other */
-ms-transform:rotate(15deg); /* Internet Explorer 9 */
-o-transform:rotate(15deg); /* Opera */
}
.image_stack .rotate2 {/* css not used*/
-webkit-transform: rotate(0deg); /* safari and chrome */
-moz-transform: rotate(0deg);/*firefox browsers */
transform: rotate(0deg);/*other */
-ms-transform:rotate(0deg); /* Internet Explorer 9 */
-o-transform:rotate(0deg); /* Opera */
}
.image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
-webkit-transform: rotate(-15deg); /* safari and chrome */
-moz-transform: rotate(-15deg); /*firefox browsers */
transform: rotate(-15deg);/*other */
-ms-transform:rotate(-15deg); /* Internet Explorer 9 */
-o-transform:rotate(-15deg); /* Opera */
cursor: pointer;
}
.namehover{
position:absolute;left:105px;top:167px;z-index:99999;
display:block;background:#333;color:#fff;width:169px;}

​</p>

4

5 回答 5

1

您的脚本是否位于外部文件中？它在html页面上吗？在javascript console.log("checking script");函数顶部，紧跟在$(document).ready(function() {. 如果您使用的是 firebug/chrome 开发人员，请在加载页面时检查您的控制台。如果您在控制台行中没有看到“检查脚本”，则它没有链接到您的 html 页面。

如果没有，请仔细检查您的资源。您的文件路径可能有问题。

于 2012-07-26T17:59:51.117 回答
0

您必须将其包含在您的 html 文件中。这可能不会发生。你的页面上需要这样的东西

<script type="text/javascript" src="jquery.js"></script>
于 2012-07-26T17:56:29.220 回答
0

您是否尝试过 .js 文件的绝对路径？

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

于 2012-07-26T17:58:13.040 回答
0

JSFiddle 为您提供了 jQuery。您是否在应用程序中正确包含 jQuery？

在浏览器的 JavaScript 控制台中查找特定的 JavaScript 错误消息并将其发布在此处。

于 2012-07-26T17:53:57.403 回答
0 
//jquery code below is applicable for the photo stack only . Not for the single image zoom effect
$(document).ready(function() { 
$(".image_stack").delegate('img', 'mouseenter', function() {//when user hover mouse on   image with div id=stackphotos 
    if ($(this).hasClass('stackphotos')) {//
    // the class stackphotos is not really defined in css , it is only assigned  to each images in the photo stack to trigger the mouseover effect on  these photos only 

        var $parent = $(this).parent();
        $parent.find('div.namehover').addClass('rotate3');
$parent.find('div.namehover').css("left","77px");  
$parent.find('img#photo1').addClass('rotate1');//add class rotate1,rotate2,rotate3 to  each image so that it rotates to the correct degree in the correct direction ( 15 degrees  one to the left , one to the right ! )
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px"); // reposition the first and last image 
$parent.find('img#photo3').css("left","50px");

    }
})
.delegate('img', 'mouseleave', function() {// when user removes cursor from the   image stack
    $('img#photo1').removeClass('rotate1');// remove the css class that was   previously added to make it to its original position
        $('img#photo2').removeClass('rotate2');
        $('img#photo3').removeClass('rotate3');
        $('div.namehover').removeClass('rotate3');

        $('img#photo1').css("left","");// remove the css property 'left'   value from the dom
$('img#photo3').css("left","");
$('div.namehover').css("left","");

});;
});
于 2012-07-26T18:16:58.330 回答