8种jQuery图片鼠标悬停效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 8种jQuery图片鼠标悬停效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为8种jQuery图片鼠标悬停效果，属于站长常用代码" />
<title>8种jQuery图片鼠标悬停效果</title>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>

</head>
<body>
<!-- 代码 开始 -->
<div id="content">

    <!--Circle-->	
    <div class="mosaic-block circle">
        <a href="#" class="mosaic-overlay">&nbsp;</a>
        <div class="mosaic-backdrop"><img src="images/mosaic.jpg"/></div>
    </div>

    <!--Fade-->
    <div class="mosaic-block fade">
        <a href="#" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Mighty Social Icons</h4>
                <p>By Build Internet</p>
            </div>
        </a>
        <div class="mosaic-backdrop"><img src="images/mightyicons.jpg"/></div>
    </div>

    <!--Bar-->
    <div class="mosaic-block bar">
        <a href="#" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Sloppy Art - A Mess of Inspiration</h4>
                <p>via the Nonsense Society (image credit: Florian</p>
            </div>
        </a>
        <div class="mosaic-backdrop"><img src="images/florian.jpg"/></div>
    </div>

    <!--Bar 2-->
    <div class="mosaic-block bar2">
        <a href="#" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>I Am Not Human - Unique Self Portraits</h4><br/>
                <p>via the Nonsense Society (photo credit: Dan Deroches)</p>
            </div>
        </a>
        <div class="mosaic-backdrop"><img src="images/desroches.jpg"/></div>
    </div>

    <!--Bar 3-->
    <div class="mosaic-block bar3">
        <a href="#" target="_blank" class="mosaic-overlay">
            <div class="details">
                <h4>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h4>
                <p>via Desktopped</p>
            </div>
        </a>
        <a href="#" target="_blank" class="mosaic-backdrop"><img src="images/64tb.jpg"/></a>
    </div>

    <!--Cover-->
    <div class="mosaic-block cover">
        <div class="mosaic-overlay"><img src="images/imac.jpg"/></div>
        <a href="#" target="_blank" class="mosaic-backdrop">
            <div class="details">
                <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
                <p>via Desktopped</p>
            </div>
        </a>
    </div>

    <!--Cover 2-->
    <div class="mosaic-block cover2">
        <a href="#" target="_blank" class="mosaic-overlay"><img src="images/yourather.jpg"/></a>
        <a href="#" target="_blank" class="mosaic-backdrop">
            <div class="details">
                <h4>Hardest Choice Ever</h4>
                <p>via You Rather</p>
            </div>
        </a>
    </div>

    <!--Cover 3-->
    <div class="mosaic-block cover3">
        <div class="mosaic-overlay"><img src="images/omr-office.jpg"/></div>
        <a href="#" target="_blank" class="mosaic-backdrop">
            <div class="details">
                <h4>One Mighty Roar Office</h4>
                <p>via Officeal</p>
            </div>
        </a>
    </div>

    <div class="clearfix"></div>
</div>
<script type="text/javascript" src="js/lrtk.js">  </script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(lrtk.js):

jQuery(function($){
	$('.circle').mosaic({
	opacity:0.8//Opacity for overlay (0-1)}
);
	$('.fade').mosaic();
	$('.bar').mosaic({
	animation:'slide'//fade or slide}
);
	$('.bar2').mosaic({
	animation:'slide'//fade or slide}
);
	$('.bar3').mosaic({
	animation:'slide',//fade or slide anchor_y:'top'//Vertical anchor position}
);
	$('.cover').mosaic({
	animation:'slide',//fade or slide hover_x:'400px'//Horizontal position on hover}
);
	$('.cover2').mosaic({
	animation:'slide',//fade or slide anchor_y:'top',//Vertical anchor position hover_y:'80px'//Vertical position on hover}
);
	$('.cover3').mosaic({
	animation:'slide',//fade or slide hover_x:'400px',//Horizontal position on hover hover_y:'300px'//Vertical position on hover}
);
}
);

JS代码(mosaic.1.0.1.min.js):

/*Mosaic - Sliding Boxes and Captions jQuery PluginVersion 1.0.1www.buildinternet.com/project/mosaicBy Sam Dunn / One Mighty Roar (www.onemightyroar.com)Released under MIT License / GPL License*/
(function(a){
	if(!a.omr){
	a.omr=new Object()}
a.omr.mosaic=function(c,b){
	var d=this;
	d.$el=a(c);
	d.el=c;
	d.$el.data("omr.mosaic",d);
	d.init=function(){
	d.options=a.extend({
}
,a.omr.mosaic.defaultOptions,b);
	d.load_box()}
;
	d.load_box=function(){
	if(d.options.preload){
	a(d.options.backdrop,d.el).hide();
	a(d.options.overlay,d.el).hide();
	a(window).load(function(){
	if(d.options.options.animation=="fade"&&a(d.options.overlay,d.el).css("opacity")==0){
	a(d.options.overlay,d.el).css("filter","alpha(opacity=0)")}
a(d.options.overlay,d.el).fadeIn(200,function(){
	a(d.options.backdrop,d.el).fadeIn(200)}
);
	d.allow_hover()}
)}
else{
	a(d.options.backdrop,d.el).show();
	a(d.options.overlay,d.el).show();
	d.allow_hover()}
}
;
	d.allow_hover=function(){
	switch(d.options.animation){
	case"fade":a(d.el).hover(function(){
	a(d.options.overlay,d.el).stop().fadeTo(d.options.speed,d.options.opacity)}
,function(){
	a(d.options.overlay,d.el).stop().fadeTo(d.options.speed,0)}
);
	break;
	case"slide":startX=a(d.options.overlay,d.el).css(d.options.anchor_x)!="auto"?a(d.options.overlay,d.el).css(d.options.anchor_x):"0px";
	startY=a(d.options.overlay,d.el).css(d.options.anchor_y)!="auto"?a(d.options.overlay,d.el).css(d.options.anchor_y):"0px";
	var f={
}
;
	f[d.options.anchor_x]=d.options.hover_x;
	f[d.options.anchor_y]=d.options.hover_y;
	var e={
}
;
	e[d.options.anchor_x]=startX;
	e[d.options.anchor_y]=startY;
	a(d.el).hover(function(){
	a(d.options.overlay,d.el).stop().animate(f,d.options.speed)}
,function(){
	a(d.options.overlay,d.el).stop().animate(e,d.options.speed)}
);
	break}
}
;
	d.init()}
;
	a.omr.mosaic.defaultOptions={
	animation:"fade",speed:150,opacity:1,preload:0,anchor_x:"left",anchor_y:"bottom",hover_x:"0px",hover_y:"0px",overlay:".mosaic-overlay",backdrop:".mosaic-backdrop"}
;
	a.fn.mosaic=function(b){
	return this.each(function(){
	(new a.omr.mosaic(this,b))}
)}
}
)(jQuery);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;border:none;outline:none;}
/*General Mosaic Styles*/
.mosaic-block{float:left;position:relative;overflow:hidden;width:400px;height:250px;margin:10px;background:#111 url(../images/progress.gif) no-repeat center center;border:1px solid #fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);}
.mosaic-backdrop{display:none;position:absolute;top:0;height:100%;width:100%;background:#111;}
.mosaic-overlay{display:none;z-index:5;position:absolute;width:100%;height:100%;background:#111;}
/*** Custom Animation Styles (You can remove/add any styles below) ***/
.circle .mosaic-overlay{background:url(../images/hover-magnify.png) no-repeat center center;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";filter:alpha(opacity=00);display:none;}
.fade .mosaic-overlay{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";filter:alpha(opacity=00);background:url(../images/bg-black.png);}
.bar .mosaic-overlay{bottom:-100px;height:100px;background:url(../images/bg-black.png);}
.bar2 .mosaic-overlay{bottom:-50px;height:100px;opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);}
.bar2 .mosaic-overlay:hover{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);}
.bar3 .mosaic-overlay{top:-100px;height:100px;background:url(../images/bg-black.png);}
#content{width:845px;margin:20px auto;padding:10px 30px;}
.clearfix{display:block;height:0;clear:both;visibility:hidden;}
.details{margin:15px 20px;}
h4{font:300 16px 'Helvetica Neue',Helvetica,Arial,sans-serif;line-height:160%;letter-spacing:0.15em;color:#fff;text-shadow:1px 1px 0 rgb(0,0,0);}
a{text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)