图像翻转和动画帮助需要jquery

image rollover over, and animation help needed jquery

本文关键字：jquery 帮助动画翻转图像更新时间：2023-09-26

我已经分别测试了我的两个功能，但是当我把它们放在一起时，它们不起作用。一种是图像翻转，允许用户将鼠标移到上方并查看更大的图像。另一个是简单的动画，将图像边框周围的橙色变为黑色。我也想知道是否有人对如何让图像在放大时不失去像素化有任何想法。这是动态完成的，所以我不能为每个图像创建两个图像。提前感谢。这是我的代码。该页面最终将有多达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>

试试这个，我还注意到你有一些你不应该有的逗号:

$(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);
});