经验分享程序开发文档资料数据资源其它资源

jquery悬停栅格效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery悬停栅格效果特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery悬停栅格效果特效代码

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=utf-8" />
<title>jquery悬停栅格效果</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>
<script type="text/javascript">
            
            $(function(){
                $('.row1').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
                $('.row2').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'sliceDown'
                });
                $('.row3').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRandom'
                });
                $('.row4').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'foldLeft'
                });
                $('.row5').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRainGrowReverse'
                });
                $('.row6').adipoli({
                    'startEffect' : 'grayscale',
                    'hoverEffect' : 'normal'
                });
            });
            
        </script>
</head>
<body>
<div id="container">
  <div class="effect-container">
    <div class="effect-details">startEffect : normal, hoverEffect : popout</div>
    <img class="img-style row1" src="images/1_1.png"/> <img class="img-style row1" src="images/1_2.png"/> </div>
  <div class="effect-container">
    <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div>
    <img class="img-style row2" src="images/1_1.png"/> <img class="img-style row2" src="images/1_2.png"/> </div>
  <div class="effect-container">
    <div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div>
    <img class="img-style row3" src="images/3_1.png"/> <img class="img-style row3" src="images/3_2.png"/> </div>
  <div class="effect-container">
    <div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div>
    <img class="img-style row4" src="images/4_1.png"/> <img class="img-style row4" src="images/4_2.png"/> </div>
  <div class="effect-container">
    <div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div>
    <img class="img-style row5" src="images/3_1.png"/> <img class="img-style row5" src="images/4_2.png"/> </div>
</div>
</body>
</html>

JS代码(jquery.adipoli.min.js):

/* * Adipoli jQuery Image Hover Plugin * http://jobyj.in/adipoli * * Copyright 2012,Joby Joseph * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * */
(function(a){
	a.fn.adipoli=function(b){
	function g(a){
	var b=document.createElement("canvas");
	var c=b.getContext("2d");
	var d=new Image;
	d.src=a;
	b.width=d.width;
	b.height=d.height;
	c.drawImage(d,0,0);
	var e=c.getImageData(0,0,b.width,b.height);
	for(var f=0;
	f<e.height;
	f++){
	for(var g=0;
	g<e.width;
	g++){
	var h=f*4*e.width+g*4;
	var i=(e.data[h]+e.data[h+1]+e.data[h+2])/3;
	e.data[h]=i;
	e.data[h+1]=i;
	e.data[h+2]=i}
}
c.putImageData(e,0,0,0,0,e.width,e.height);
	return b.toDataURL()}
function f(a){
	for(var b,c,d=a.length;
	d;
	b=parseInt(Math.random()*d),c=a[--d],a[d]=a[b],a[b]=c);
	return a}
function e(b,c){
	var d=Math.round(b.width()/c.boxCols);
	var e=Math.round(b.height()/c.boxRows);
	for(var f=0;
	f<c.boxRows;
	f++){
	for(var g=0;
	g<c.boxCols;
	g++){
	if(g==c.boxCols-1){
	b.children(".adipoli-after").append(a('<div class="adipoli-box"></div>').css({
	opacity:0,left:d*g+"px",top:e*f+"px",width:b.width()-d*g+"px",height:e+"px",background:'url("'+b.children("img").attr("src")+'") no-repeat -'+(d+g*d-d)+"px -"+(e+f*e-e)+"px"}
))}
else{
	b.children(".adipoli-after").append(a('<div class="adipoli-box"></div>').css({
	opacity:0,left:d*g+"px",top:e*f+"px",width:d+"px",height:e+"px",background:'url("'+b.children("img").attr("src")+'") no-repeat -'+(d+g*d-d)+"px -"+(e+f*e-e)+"px"}
))}
}
}
}
function d(b,c){
	for(var d=0;
	d<c.slices;
	d++){
	var e=Math.round(b.width()/c.slices);
	if(d==c.slices-1){
	b.children(".adipoli-after").append(a('<div class="adipoli-slice"></div>').css({
	left:e*d+"px",width:b.width()-e*d+"px",height:"0px",opacity:"0",background:'url("'+b.children("img").attr("src")+'") no-repeat -'+(e+d*e-e)+"px 0%"}
))}
else{
	b.children(".adipoli-after").append(a('<div class="adipoli-slice"></div>').css({
	left:e*d+"px",width:e+"px",height:"0px",opacity:"0",background:'url("'+b.children("img").attr("src")+'") no-repeat -'+(e+d*e-e)+"px 0%"}
))}
}
}
var c=a.extend({
	startEffect:"transparent",hoverEffect:"normal",imageOpacity:.5,animSpeed:300,fillColor:"#000",textColor:"#fff",overlayText:"",slices:10,boxCols:5,boxRows:3,popOutMargin:10,popOutShadow:10}
,b);
	a(this).one("load",function(){
	a(this).wrap(function(){
	return'<div class="adipoli-wrapper '+a(this).attr("class")+'" style="width:'+a(this).width()+"px;
	height:"+a(this).height()+'px;
	"/>'}
);
	a(this).parent().append('<div class="adipoli-before '+a(this).attr("class")+'" style="display:none;
	width:'+a(this).width()+"px;
	height:"+a(this).height()+'px;
	"><img src="'+a(this).attr("src")+'"/></div>');
	a(this).parent().append('<div class="adipoli-after '+a(this).attr("class")+'" style="display:none;
	width:'+a(this).width()+"px;
	height:"+a(this).height()+'px;
	"></div>');
	if(c.startEffect=="transparent"){
	a(this).hide();
	a(this).siblings(".adipoli-before").css({
	"-ms-filter":'"progid:DXImageTransform.Microsoft.Alpha(Opacity='+c.imageOpacity*100+')"',filter:"alpha(opacity="+c.imageOpacity*100+")","-moz-opacity":c.imageOpacity,"-khtml-opacity":c.imageOpacity,opacity:c.imageOpacity}
).show()}
else if(c.startEffect=="grayscale"){
	var b=a(this);
	b.hide();
	b.siblings(".adipoli-before").show();
	b.siblings(".adipoli-before").children("img").each(function(){
	this.src=g(this.src)}
)}
else if(c.startEffect=="normal"){
	a(this).hide();
	a(this).siblings(".adipoli-before").show()}
else if(c.startEffect=="overlay"){
	b=a(this);
	b.hide();
	a(this).siblings(".adipoli-before").html(c.overlayText).css({
	"-ms-filter":'"progid:DXImageTransform.Microsoft.Alpha(Opacity='+c.imageOpacity*100+')"',filter:"alpha(opacity="+c.imageOpacity*100+")","-moz-opacity":c.imageOpacity,"-khtml-opacity":c.imageOpacity,opacity:c.imageOpacity,background:c.fillColor,color:c.textColor}
).fadeIn();
	b.show()}
a(this).parent().bind("mouseenter",function(){
	if(c.hoverEffect=="normal"){
	var b=a(this);
	b.children(".adipoli-after").html('<img src="'+b.children("img").attr("src")+'"/>').fadeIn(c.animSpeed)}
else if(c.hoverEffect=="popout"){
	b=a(this);
	var g=b.children("img").width();
	var h=b.children("img").height();
	b.children(".adipoli-after").html('<img src="'+b.children("img").attr("src")+'"/>');
	var i=b.children(".adipoli-after").children("img");
	i.width(g+2*c.popOutMargin);
	i.height(h+2*c.popOutMargin);
	b.children(".adipoli-after").width(g+2*c.popOutMargin);
	b.children(".adipoli-after").height(h+2*c.popOutMargin);
	b.children(".adipoli-after").css({
	left:"-"+c.popOutMargin+"px",top:"-"+c.popOutMargin+"px","box-shadow":"0px 0px "+c.popOutShadow+"px #000"}
).show()}
else if(c.hoverEffect=="sliceDown"||c.hoverEffect=="sliceDownLeft"||c.hoverEffect=="sliceUp"||c.hoverEffect=="sliceUpLeft"||c.hoverEffect=="sliceUpRandom"||c.hoverEffect=="sliceDownRandom"){
	a(this).children(".adipoli-after").show();
	d(a(this),c);
	var j=0;
	var k=0;
	var l=a(".adipoli-slice",a(this));
	if(c.hoverEffect=="sliceDownLeft"||c.hoverEffect=="sliceUpLeft")l=a(".adipoli-slice",a(this))._reverse();
	if(c.hoverEffect=="sliceUpRandom"||c.hoverEffect=="sliceDownRandom")l=f(a(".adipoli-slice",a(this)));
	l.each(function(){
	var b=a(this);
	if(c.hoverEffect=="sliceDown"||c.hoverEffect=="sliceDownLeft"){
	b.css({
	top:"0px"}
)}
else if(c.hoverEffect=="sliceUp"||c.hoverEffect=="sliceUpLeft"){
	b.css({
	bottom:"0px"}
)}
if(k==c.slices-1){
	setTimeout(function(){
	b.animate({
	height:"100%",opacity:"1.0"}
,c.animSpeed,"",function(){
}
)}
,100+j)}
else{
	setTimeout(function(){
	b.animate({
	height:"100%",opacity:"1.0"}
,c.animSpeed)}
,100+j)}
j+=50;
	k++}
)}
else if(c.hoverEffect=="sliceUpDown"||c.hoverEffect=="sliceUpDownLeft"){
	a(this).children(".adipoli-after").show();
	d(a(this),c);
	j=0;
	k=0;
	var m=0;
	l=a(".adipoli-slice",a(this));
	if(c.hoverEffect=="sliceUpDownLeft")l=a(".adipoli-slice",a(this))._reverse();
	l.each(function(){
	var b=a(this);
	if(k==0){
	b.css("top","0px");
	k++}
else{
	b.css("bottom","0px");
	k=0}
if(m==c.slices-1){
	setTimeout(function(){
	b.animate({
	height:"100%",opacity:"1.0"}
,c.animSpeed,"",function(){
}
)}
,100+j)}
else{
	setTimeout(function(){
	b.animate({
	height:"100%",opacity:"1.0"}
,c.animSpeed)}
,100+j)}
j+=50;
	m++}
)}
else if(c.hoverEffect=="fold"||c.hoverEffect=="foldLeft"){
	a(this).children(".adipoli-after").show();
	b=a(this);
	d(b,c);
	j=0;
	k=0;
	l=a(".adipoli-slice",b);
	if(c.hoverEffect=="foldLeft")l=a(".adipoli-slice",a(this))._reverse();
	l.each(function(){
	var b=a(this);
	var d=b.width();
	b.css({
	top:"0px",height:"100%",width:"0px"}
);
	if(k==c.slices-1){
	setTimeout(function(){
	b.animate({
	width:d,opacity:"1.0"}
,c.animSpeed,"",function(){
}
)}
,100+j)}
else{
	setTimeout(function(){
	b.animate({
	width:d,opacity:"1.0"}
,c.animSpeed)}
,100+j)}
j+=50;
	k++}
)}
else if(c.hoverEffect=="boxRandom"){
	a(this).children(".adipoli-after").show();
	b=a(this);
	e(b,c);
	var n=c.boxCols*c.boxRows;
	k=0;
	j=0;
	var o=f(a(".adipoli-box",b));
	o.each(function(){
	var b=a(this);
	if(k==n-1){
	setTimeout(function(){
	b.animate({
	opacity:"1"}
,c.animSpeed,"",function(){
}
)}
,100+j)}
else{
	setTimeout(function(){
	b.animate({
	opacity:"1"}
,c.animSpeed)}
,100+j)}
j+=20;
	k++}
)}
else if(c.hoverEffect=="boxRain"||c.hoverEffect=="boxRainReverse"||c.hoverEffect=="boxRainGrow"||c.hoverEffect=="boxRainGrowReverse"){
	a(this).children(".adipoli-after").show();
	b=a(this);
	e(b,c);
	n=c.boxCols*c.boxRows;
	k=0;
	j=0;
	var p=0;
	var q=0;
	var r=new Array;
	r[p]=new Array;
	o=a(".adipoli-box",b);
	if(c.hoverEffect=="boxRainReverse"||c.hoverEffect=="boxRainGrowReverse"){
	o=a(".adipoli-box",b)._reverse()}
o.each(function(){
	r[p][q]=a(this);
	q++;
	if(q==c.boxCols){
	p++;
	q=0;
	r[p]=new Array}
}
);
	for(var s=0;
	s<c.boxCols*2;
	s++){
	var t=s;
	for(var u=0;
	u<c.boxRows;
	u++){
	if(t>=0&&t<c.boxCols){
	(function(b,d,e,f,g){
	var h=a(r[b][d]);
	var i=h.width();
	var j=h.height();
	if(c.hoverEffect=="boxRainGrow"||c.hoverEffect=="boxRainGrowReverse"){
	h.width(0).height(0)}
if(f==g-1){
	setTimeout(function(){
	h.animate({
	opacity:"1",width:i,height:j}
,c.animSpeed/1.3,"",function(){
}
)}
,100+e)}
else{
	setTimeout(function(){
	h.animate({
	opacity:"1",width:i,height:j}
,c.animSpeed/1.3)}
,100+e)}
}
)(u,t,j,k,n);
	k++}
t--}
j+=100}
}
}
);
	a(this).parent().bind("mouseleave",function(){
	a(this).children(".adipoli-after").html("").hide()}
)}
).each(function(){
	if(this.complete)a(this).load()}
);
	return a(this)}
;
	a.fn._reverse=[].reverse}
)(jQuery)

CSS代码(zzsc.css):

body{font-family:'Advent Pro',georgia,arial,sans-serif;font-size:20px;margin:0;padding:0;text-align:center;position:absolute;width:100%;line-height:30px;color:#666;}
#header{width:100%;border-bottom:1px solid #ccc;text-align:center;font-size:1.5em;padding-top:20px;}
#header>h1{padding:20px;color:#FF9721;text-shadow:2px 2px 2px #E0B17B;}
.menu{text-align:center;position:fixed;background:#EEE;z-index:1000;height:40px;line-height:40px;width:100%;}
.menu a,.menu a:visited{margin-right:30px;text-decoration:none;color:#1F8AE0;font-weight:normal;}
.menu a:hover{border-bottom:1px solid #FF96EC;}
#container{width:960px;margin:auto;text-align:left;}
.effect-container{float:left;width:100%;padding-top:10px;padding-bottom:10px;text-align:center;}
.effect-container .img-style{margin:7px;}
.effect-details{font-family:'Advent Pro',sans-serif;font-size:20px;color:#666;}
hr{border:none;border-bottom:1px solid #ccc;margin-bottom:40px;margin-top:40px;width:100%;}
.code{font-family:monospace;font-size:14px;color:#78123B;display:block;border:1px solid #ED8A34;background:#FFF5ED;padding:10px;margin-bottom:10px;margin-top:10px;}
.button{position:relative;top:0;left:0;margin:0 2px 20px 0;padding:10px 15px;line-height:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer;width:auto;overflow:visible;font-weight:normal;font-size:14px;/*Pixels for consistancy*/
 text-shadow:0 1px 0 #fff;color:#666;text-decoration:none;vertical-align:middle;box-sizing:border-box;display:inline-block;*display:inline;/*IE ONLY*/
 zoom:1;text-shadow:0 -1px 0 #EF0251;color:#fff;border:1px solid #EF0251;background:rgb(255,93,177);/* Old browsers */
 background:-moz-linear-gradient(top,rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,93,177,1)),color-stop(100%,rgba(239,1,124,1)));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%);/* IE10+ */
 background:linear-gradient(top,rgba(255,93,177,1) 0%,rgba(239,1,124,1) 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1',endColorstr='#ef017c',GradientType=0 );/* IE6-9 */
 font-size:1.3em;padding:15px 25px;}
.button:hover{text-shadow:0 1px 0 #EF0251;border:1px solid #EF0251;background:rgb(255,169,213);/* Old browsers */
 background:-moz-linear-gradient(top,rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,169,213,1)),color-stop(100%,rgba(254,112,185,1)));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%);/* IE10+ */
 background:linear-gradient(top,rgba(255,169,213,1) 0%,rgba(254,112,185,1) 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa9d5',endColorstr='#fe70b9',GradientType=0 );/* IE6-9 */
}
.browser-img{width:125px;margin:10px;}
.adipoli-wrapper{margin:auto;position:relative;display:inline-block;}
.adipoli-wrapper>img{position:absolute;z-index:1;}
.adipoli-before{position:absolute;z-index:5;}
.adipoli-after{position:absolute;z-index:10;}
.adipoli-slice{display:block;position:absolute;z-index:15;height:100%;}
.adipoli-box{display:block;position:absolute;z-index:15;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
717.29 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
717.29 KB
立即下载
沈茗
了解
打赏作者 鼓励作者
Html JS 图片特效1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章