添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 图文相册 >

jQuery鼠标滑过图片显示说明遮罩层动画特效

时间:2015-08-03      来源:互联网     
特效说明:
一款jQuery鼠标滑过图片显示说明遮罩层动画特效免费下载,jquery hover特效代码仿腾讯课堂鼠标悬停经过图片遮罩显示文字说明透明层滑动效果。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link rel="stylesheet" type="text/css" href="css/style.css" />

2、调用JS插件代码:
<script type="text/javascript" src="js/jquery.js"></script>

3、添加HTML代码:
<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

4、JS代码:
<script type="text/javascript">
$(".con ul li").hover(function(){
    $(this).find(".txt").stop().animate({height:"198px"},400);
    $(this).find(".txt h3").stop().animate({paddingTop:"60px"},400);
},function(){
    $(this).find(".txt").stop().animate({height:"45px"},400);
    $(this).find(".txt h3").stop().animate({paddingTop:"0px"},400);
})
</script>
相关特效



最新更新特效

设计分享