jq实现酷炫的鼠标经过图片翻滚效果

前端技术 2023/09/01 JavaScript
短短的十多行代码就实现了一个酷炫的图片翻滚代码，要实现这个效果并不难，只要思路对了，一切都好办，不多说了，直接上代码看效果！

html结构：
复制代码 代码如下:

<ul class=\"list\">
<li><img src=\"images/10.jpg\" alt=\"\" /><a href=\"#\"><span>1</span></a></li>
<li><img src=\"images/11.jpg\" alt=\"\" /><a href=\"#\"><span>2</span></a></li>
<li><img src=\"images/12.jpg\" alt=\"\" /><a href=\"#\"><span>3</span></a></li>
<li><img src=\"images/13.jpg\" alt=\"\" /><a href=\"#\"><span>4</span></a></li>
<li><img src=\"images/10.jpg\" alt=\"\" /><a href=\"#\"><span>5</span></a></li>
<li><img src=\"images/11.jpg\" alt=\"\" /><a href=\"#\"><span>6</span></a></li>
<li><img src=\"images/12.jpg\" alt=\"\" /><a href=\"#\"><span>7</span></a></li>
<li><img src=\"images/13.jpg\" alt=\"\" /><a href=\"#\"><span>8</span></a></li>

</ul>

css代码：
复制代码 代码如下:

*{ 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;}

jq代码（注意要引入jq库）：
复制代码 代码如下:

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

});
});

});

是不是很简单的几句jq代码？亲，不妨copy下来看下效果呗！

本文地址：https://www.stayed.cn/item/1735

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案