Question

我已经分别测试了我的两个功能，但是当我把它们放在一起时它们不起作用。一种是图像翻转，允许用户鼠标悬停并查看更大的图像。另一种是简单的动画，在图像边框周围将橙色变为黑色。我还想知道是否有人有任何关于如何让图像在变大时不丢失像素化的想法。这是动态完成的，因此我不能为每个图像制作两个图像。提前致谢。这是我的代码。该页面最终将包含多达250行图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
.container {
    width: 400px;
    position: absolute;
    margin-top:40px;
    margin-left:40px;
}
ul.thumb {
    float: left;
    list-style: none;
    width: 400px;
}
ul.thumb li {
    float: left;
    position: relative;
    width: 80px;
    height: 60px;
}
ul.thumb li img {
    width: 80px; height: 60px;
    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic; 
}

.images {
    border: 5px solid;
}
</style>

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
 <script src="http://ditio.net/wp-content/uploads/2010/01/jquery-resize.js"></script>

<script type="text/javascript"> 
$(document).ready(function(){

 $(".images").each(function setAnim() {
          $(this).      
                    animate({
                        borderTopColor:'orange',
                        borderRightColor:'orange',
                        borderBottomColor:'orange',
                        borderLeftColor:'orange',
                        }, 1000).
                        animate({
                        borderTopColor:'black',
                        borderRightColor:'black',
                        borderBottomColor:'black',
                        borderLeftColor:'black'}, 1000, setAnim);
                         });

});
//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-80px', 
            marginLeft: '-80px', 
            top: '50%', 
            left: '50%', 
            width: '160px', 
            height: '120px',
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width: '80px', 
            height: '60px', 
        }, 400);



});
</script> 
</head>

<body>
<div class="container">
<ul class="thumb">

    <li><a href="test.html"><img src="images/desert.jpg" class="images" alt="" /></a></li>
    <li><a href="test.html"><img src="images/flower.jpg" class="images" alt="" /></a></li>
    <li><a href="test.html"><img src="images/jellyfish.jpg" class="images" alt="" /></a></li>


</ul>
<ul class="thumb">

    <li><a href="test.html"><img src="images/desert.jpg" class="images" alt="" /></a></li>
    <li><a href="test.html"><img src="images/flower.jpg" class="images" alt="" /></a></li>
    <li><a href="test.html"><img src="images/jellyfish.jpg" class="images" alt="" /></a></li>


</ul>

</div>


</body>
</html>

Answer 1

试试这个，我也注意到你有一些你不应该拥有的逗号：

$(function() {

    $(".images").each(function() {

        $(this).animate({
            borderTopColor: 'orange',
            borderRightColor: 'orange',
            borderBottomColor: 'orange',
            borderLeftColor: 'orange'
        }, 1000).animate({
            borderTopColor: 'black',
            borderRightColor: 'black',
            borderBottomColor: 'black',
            borderLeftColor: 'black'
        }, 1000);
    });

});

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {

    $(this).css({'z-index': '10'});
    $(this).find('img').addClass("hover").stop().animate({
        marginTop: '-80px',
        marginLeft: '-80px',
        top: '50%',
        left: '50%',
        width: '160px',
        height: '120px'
    }, 200);

}, function() {

    $(this).css({'z-index': '0'});
    $(this).find('img').removeClass("hover").stop().animate({
        marginTop: '0',
        marginLeft: '0',
        top: '0',
        left: '0',
        width: '80px',
        height: '60px'
    }, 400);

});

图像翻转结束，动画帮助需要jquery

1 个答案: