关于我们

很简单的图片翻滚特效

发布日期：2014-03-14 00:00:00  995

滚动图片特效是前端开发常用的特效，适合在有限的空间展示更多的内容，今天介绍的这款jQuery横向无缝图片滚动代码，可左右滚动显示图片，兼容各大主流浏览器，包括IE6这类古董级东东，推荐试用！

<!DOCTYPE html>

<html>

<head>

<title>深圳网站建设 - 深圳乐道网络科技</title>

*{ margin:0; padding:0;}

.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}

.list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}

.list li img{ float:left; width:150px; height:80px; border:none;}

.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

</style>

$(function () {

$('.list li').hover(function () {

$(this).children('a,img').stop();

$(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {

$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);

});

}, function () {

$(this).children('a,img').stop();

$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {

$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);

});

</script>

</head>

<body>

</ul>

</body>

</html>

News新闻

相关关键词

关于我们

最新文章

很简单的图片翻滚特效

相关文章