实现原理
通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。
下面写代码
html结构:
1 |
<a id="logo" href="http://fatkun.com"><span>fatkun.com</span></a> |
css代码:
#logo{ margin:0 auto; position:relative;/*相对定位,为了下面hover的绝对定位*/ background:url(fatkun.png) left top no-repeat;/*设置背景图*/ width:150px; height:40px;/*注意这里高度*/ display:block; text-indent:-9999px; } #logo .hover{/*为JQ准备*/ background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/ position:absolute;/*为了使两张图片重叠在一起*/ top:0; left:0; height:40px; width:150px; } |
最后最重要的JQuery代码出现了
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来 $(".hover").css('opacity', 0);//先不显示 $(".hover").parent().hover( function(){ $(".hover").stop().animate({opacity: '1'},1000); }, function(){ $(".hover").stop().animate({opacity: '0'},1000); }); </script>
相关推荐
jQuery实现的图片墙全屏淡入淡出切换展示效果.zip
今天我们要来分享一款利用jQuery实现的3D图片翻牌切换效果,当你点击上一张下一张按钮或者滚动滚轮的时候图片就能够以淡入淡出的方式切换,类似翻牌的效果,非常酷。另外我们再推荐一款很棒的jQuery焦点图插件:...
纯jquery实现图片的淡入淡出,内容简单 一看即懂 实用
reveal-it.js是一款jQuery文字淡入淡出显示特效插件。该文字特效插件可以使文字从左向右淡入淡出显示。该插件小巧简单,非常适合用于制作标题文字的动画效果。
crossfade.js是一个非常小的jQuery插件程序.当您滚动鼠标时图像实现叉淡入淡出效果。浏览器要求ie8以上版本。演示地址:http://www.jq22.com/jquery-info459
JQuery 图片浏览,淡入淡出,可设定时间,不限数量,有高级和普通两个演示页面,随意改动,代替focus.swf。
实现效果: jQuery点击淡入淡出显示图片特效,点击下方圆中的图片,在上面显示大图,淡入淡出的一种效果,还是很酷炫的!
jQuery 仿Flash四焦点图片淡入淡出切换
jQuery放大缩小淡入淡出焦点图特效是 一款基于slick插件实现的jQuery图片放大缩小淡入淡出过渡动画焦点图特效效果,它还支持手机移动触摸设备。
Jquery淡入淡出幻灯片特效图片切换源码下载
jQuery实现带缩略图的图片淡入淡出幻灯片切换.zip
jquery图片淡入淡出切换特效是一款点击左右箭头,图片谈出消失,图片淡入显示。
轮播实现双层效果,底层淡入淡出,上层动画进入
能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签ul,li或是div,p标签都可以。 可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是...
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
使用JQuery淡入淡出实现的自动切换图片的源码。
超实用的jQuery淡入淡出焦点图插件 带3D相框 超实用的jQuery淡入淡出焦点图插件 带3D相框
jQuery图片渐隐切换菜单,具有渐显效果会切换的jQuery菜单_淡入淡出菜单,兼容IE,FF,Safari,Opera等浏览器。菜单按钮多少可以按需求添加,范例添加了5个。