image rollover over, and animation help needed jquery
I have tested my two features separately, but when I put them together they do not work. One is an image rollover that allows the user to mouseover and see a larger image. The other is a simple animation that changes orange to black around around an image border. I would also like to know if anyone has any ideas on how to get the images to not lose their pixelization when making them larger. This is done dynamically, so I cannot make tw开发者_高级运维o images for each image. Thanks in advance. Here is my code. The page will eventually have up to 250 rows of images on it.
<!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>
Try this, I also noticed you had a few commars which you shouldn't have had:
$(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);
});
加载中,请稍侯......
精彩评论