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

时间: 作者:很上

  

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

  短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果!

  
  
html结构:  
代码如下:

  
      
  • 1
  •   
  • 2
  •   
  • 3
  •   
  • 4
  •   
  • 5
  •   
  • 6
  •   
  • 7
  •   
  • 8
  •   
      
  
  
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下来看下效果呗!

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


HOME | 常用代码 | css特效

Copyright © 2020-2022 齐天娱乐 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 齐天娱乐