以下是 jQuery图标嵌入悬浮按钮特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery图标嵌入悬浮按钮</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/zalki_hover_img.css" type="text/css" media="screen">
<link href="http://fonts.googleapis.com/css?family=Nunito:400,700,300" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
<script src="jQuery/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.zalki_hover_img.min-0.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$('.main_box').ZalkiHoverImg(
);
});
</script>
</head>
<body>
<div id="container">
<div class="main_box user_style1" data-hipop="one">
<!-- Main Box Open --><img src="photo/1.jpg"> <a href="#" class="popup">
</a></div>
<!-- Main Box Close -->
<div class="main_box user_style2" data-hipop="two">
<!-- Main Box Open --><img src="photo/2.jpg"> <a href="#" class="popup">
</a><a href="#" class="popup2"></a></div>
<!-- Main Box Close -->
<div class="main_box user_style3" data-hipop="one-horizontal">
<!-- Main Box Open --><img src="photo/3.jpg"> <a href="#" class="popup">
BUY</a> </div>
<!-- Main Box Close -->
<div class="main_box user_style4" data-hipop="two-horizontal">
<!-- Main Box Open --><img src="photo/4.jpg"> <a href="#" class="popup">
</a><a href="#" class="popup2"></a></div>
<!-- Main Box Close -->
<!-- text elements -->
<div class="main_box user_style5" data-hipop="text_content">
<!-- Main Box Open --><img src="photo/5.jpg" title alt="Img preview">
<p class="textTitle">
<!-- Title open -->Title Here </p>
<!-- Title close -->
<p class="textBox">
<!-- Text Box open -->Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel
gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper,
libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl. Etiam
pharetra sodales dui, nec dignissim nisi adipiscing vel. Integer luctus
mi elementum mi ullamcorper eu varius enim rutrum. Morbi gravida dolor eu
leo dictum vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel
gravida non, egestas nec eros. <a href="#">Read More</a><!-- Link -->
</p>
<!-- Text Box close --></div>
<!-- Main Box Close -->
<div class="main_box user_style6" data-hipop="text_content">
<!-- Main Box Open --><img src="photo/6.jpg" title alt="Img preview">
<p class="textTitle">
<!-- Title open -->Title Here </p>
<!-- Title close -->
<p class="textBox">
<!-- Text Box open -->Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel
gravida non, egestas nec eros. Vivamus euismod, erat quis lobortis ullamcorper,
libero justo hendrerit velit, in ornare erat ipsum scelerisque nisl.
<a href="#">Link</a><!-- Link --> </p>
<!-- Text Box close --></div>
<!-- Main Box Close -->
<div class="main_box user_style11" data-hipop="text_content2">
<!-- Main Box Open --><img src="photo/11.jpg" title alt="Img preview">
<p class="textTitle">
<!-- Title open -->$7 </p>
<!-- Title close -->
<p class="textBox">
<!-- Text Box open -->Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ut nec est viverra velit venenatis faucibus. Maecenas adipiscing,
lectus a hendrerit vulputate, tellus urna accumsan felis, semper tempor
mauris massa in odio. Duis sit amet nunc eu sem sagittis malesuada.
<a href="#">Link</a><!-- Link --> </p>
<!-- Text Box close --></div>
<!-- Main Box Close -->
<div class="main_box user_style12" data-hipop="one-horizontal">
<!-- Main Box Open --><img src="photo/12.jpg"> <a href="#" class="popup">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec est viverra
velit venenatis faucibus. Maecenas adipiscing, lectus a hendrerit vulputate,
tellus urna accumsan felis, semper tempor mauris massa in odio. Duis sit
amet nunc eu sem sagittis malesuada. </a></div>
<!-- Main Box Close -->
<div class="main_box user_style13" data-hipop="one">
<!-- Main Box Open --><img src="photo/13.jpg"> <a href="#" class="popup">
</a></div>
<!-- Main Box Close -->
<div class="main_box user_style7" data-hipop="text_content2">
<!-- Main Box Open --><img src="photo/7.jpg" title alt="Img preview">
<p class="textTitle">
<!-- Title open -->Title Here </p>
<!-- Title close -->
<p class="textBox">
<!-- Text Box open -->Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aliquam vel mauris orci, nec lobortis sem. Ut urna dui, vehicula vel
gravida non, egestas nec eros. <a href="#">Link</a><!-- Link --> </p>
<!-- Text Box close --></div>
<!-- Main Box Close -->
<div class="main_box user_style8" data-hipop="rub">
<!-- Main Box Open --><img src="photo/8.jpg">
<a href="#" class="r_board">AWESOME</a> </div>
<!-- Main Box Close -->
<div class="main_box user_style9" data-hipop="rub">
<!-- Main Box Open --><img src="photo/9.jpg">
<a href="#" class="r_board"></a></div>
<!-- Main Box Close -->
<div class="main_box user_style10" data-hipop="rub">
<!-- Main Box Open --><img src="photo/10.jpg">
<a href="#" class="r_board">$7</a> </div>
<!-- Main Box Close --></div>
</body>
</html>
JS代码(jquery.zalki_hover_img.min-0.2.js):
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){
return r[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}
(';
(o($,2i,2s){
$.2S.2Q=o(2q){
w 3=$.2O({
2d:b,1k:U,1i:U,11:\'14\',1N:q,2k:q,1t:\'14\',2g:17,2a:2D,1x:\'2T\',2M:q,2C:q,1z:\'13\',2j:q,2G:q,1w:\'13\',1Y:q,2b:U,2c:0.5,1D:\'2Z\',1F:0.5,1d:U,1e:U,X:\'2N\',2u:2z,2F:2D,1h:\'2W\',2H:1J,1L:17,1j:\'13\',1Q:2z,1U:q,1l:\'2U\',22:1J,29:q,1n:\'2R\',1o:0.5,2f:q,2h:q,1p:\'14\',2p:17,2t:17,1u:\'14\',2w:2V,2x:2X,1v:\'13\'}
,2q);
32 2B.2P(o(){
w 1=$(2B),s=$(\'.s\'),z=$(\'.z\'),M=$(\'.M\'),S=$("<x 12=\'S\'></x>"),u=$("<x 12=\'u\'></x>"),H=$("<x 12=\'H\'></x>"),F=$("<x 12=\'F\'></x>"),A=$(\'.A\'),B=$(\'.B\');
9(3.2d==b){
w r=1.E(\'2e\').l(),h=1.E(\'2e\').k()}
a{
w r=1.l(),h=1.k()}
;
w Q=1.8(s).l(),v=1.8(s).k(),16=1.8(z).l(),G=1.8(z).k(),2v=1.8(M).k(),19=1.8(M).l(),1y=1.E(A).2y(b),1H=1.E(A).2A(b),1A=1.E(B).2y(b),1g=1.E(B).2A(b),1C=h/2-v/2,1a=r/2-Q/2,1G=r/2-16/2,2I=h/2-2v/2,2J=r/2-19/2,1I=h/2-G/2+v/2+10,1K=h/2-G/2-v/2-10,1b=h/2-v/2-G/2-10;
w 1c={
c:1a}
,1O={
c:1G}
,1P={
d:1C}
,1R={
d:-v*2}
,1S={
d:1b}
,1T={
P:1K}
,1V={
d:-v*2}
,1W={
P:-G*2}
,1X={
c:-16*2}
,1f={
c:-Q*2}
,2Y={
c:r*2}
,1Z={
c:0}
,21={
W:0}
,23={
c:-1A*2}
,24={
W:-1y*2}
,25={
d:0}
,26={
P:0}
,27={
d:-1g*2}
,28={
P:-1H*2}
;
1.e({
\'k\':h,\'l\':r}
);
9(1.7(\'6-4\')==\'m\'||1.7(\'6-4\')==\'p\'||1.7(\'6-4\')==\'m-n\'||1.7(\'6-4\')==\'p-n\'){
1.1m(S)}
a 9(1.7(\'6-4\')==\'N\'||1.7(\'6-4\')==\'O\'){
1.1m(u)}
a 9(1.7(\'6-4\')==\'D\'){
1.1m(H,F)}
;
1.8(S).e({
\'k\':h,\'l\':r}
);
1.8(u).e({
\'k\':h,\'l\':r}
);
1.8(H).e({
\'k\':h,\'l\':0}
);
1.8(F).e({
\'k\':h,\'l\':0}
);
w 1q=1.8(u).l(),1r=1.8(u).k();
w 2l={
d:0}
,2m={
d:-1r}
,2n={
c:0}
,2o={
c:-1q}
;
o 1s(f,i,2r,j){
f.8(S).g().V(i,2r,j)}
;
o R(f,18,i,j){
f.8(s).g(b,b).t(18,i,j)}
;
o T(f,L,K,i,J,j,I){
f.8(s).g(b,b).t(L,i,j);
f.8(z).g(b,b).t(K,J,I)}
;
o 1B(f,18,i,j){
f.8(M).g(b,b).t({
c:18}
,i,j)}
;
o Y(f,2E,i,j){
f.8(u).g(b,b).t(2E,i,j)}
;
o Z(f,L,K,i,J,j,I){
f.8(B).g(b,b).t(L,i,j);
f.8(A).g(b,b).t(K,J,I)}
;
o 1E(f,L,K,i,J,j,I){
f.8(H).g(b,b).t({
l:L}
,i,j);
f.8(F).g(b,b).t({
l:K}
,J,I)}
;
9(1.7(\'6-4\')==\'m\'){
1.8(s).e({
\'c\':-Q*2,\'d\':1C,\'C\':\'y\'}
)}
a 9(1.7(\'6-4\')==\'p\'){
1.8(s).e({
\'c\':-Q*2,\'d\':1b,\'C\':\'y\'}
);
1.8(z).e({
\'c\':-16*2,\'d\':1I,\'C\':\'y\'}
)}
a 9(1.7(\'6-4\')==\'m-n\'){
1.8(s).e({
\'c\':1a,\'d\':-v*2,\'C\':\'y\'}
)}
a 9(1.7(\'6-4\')==\'p-n\'){
1.8(s).e({
\'c\':1a,\'d\':-v*2,\'C\':\'y\'}
);
1.8(z).e({
\'c\':1G,\'P\':-G*2,\'C\':\'y\'}
)}
a 9(1.7(\'6-4\')==\'N\'){
1.8(u).e({
\'d\':-1r,\'c\':0}
).g().V(15,3.1F);
1.8(B).e({
d:0,c:-1A*2}
);
1.8(A).e({
d:0,W:-1y*2,k:h-20,2K:\'2L\'}
)}
a 9(1.7(\'6-4\')==\'O\'){
1.8(u).e({
\'d\':0,\'c\':-1q}
).g().V(15,3.1F);
1.8(B).e({
d:-1g*2,c:0}
);
1.8(A).e({
P:-1H*2,W:0,k:h-20,2K:\'2L\'}
)}
a 9(1.7(\'6-4\')==\'D\'){
1.8(H).e({
\'d\':0,\'c\':0}
).g().V(15,3.1o);
1.8(F).e({
\'d\':0,\'W\':0}
).g().V(15,3.1o);
1.8(M).e({
\'c\':-19*2,\'d\':2I,\'C\':\'y\'}
)}
;
1.30({
31:o(){
9(1.7(\'6-4\')==\'m\'){
R(1,1c,3.1k,3.11)}
a 9(1.7(\'6-4\')==\'p\'){
T(1,1c,1O,3.1k,3.1N,3.11,3.1t)}
a 9(1.7(\'6-4\')==\'m-n\'){
R(1,1P,3.2g,3.1x)}
a 9(1.7(\'6-4\')==\'p-n\'){
T(1,1S,1T,3.2M,3.2j,3.1z,3.1w)}
a 9(1.7(\'6-4\')==\'N\'){
Z(1,1Z,21,3.1Q,3.22,3.1l,3.1n)}
a 9(1.7(\'6-4\')==\'O\'){
Z(1,25,26,3.2u,3.2H,3.1h,3.1j)}
a 9(1.7(\'6-4\')==\'D\'){
1B(1,2J,3.2w,3.1v)}
;
9(1.7(\'6-4\')==\'m\'||1.7(\'6-4\')==\'p\'||1.7(\'6-4\')==\'m-n\'||1.7(\'6-4\')==\'p-n\'){
1s(1,3.1Y,3.2c,3.1D)}
a 9(1.7(\'6-4\')==\'N\'){
Y(1,2l,3.1d,3.X)}
a 9(1.7(\'6-4\')==\'O\'){
Y(1,2n,3.1d,3.X)}
a 9(1.7(\'6-4\')==\'D\'){
1E(1,1M.33(r/2),1M.34(r/2),3.2f,3.2p,3.1p,3.1u)}
}
,35:o(){
9(1.7(\'6-4\')==\'m\'){
R(1,1f,3.1i,3.11)}
a 9(1.7(\'6-4\')==\'p\'){
T(1,1f,1X,3.1i,3.2k,3.11,3.1t)}
a 9(1.7(\'6-4\')==\'m-n\'){
R(1,1R,3.2a,3.1x)}
a 9(1.7(\'6-4\')==\'p-n\'){
T(1,1V,1W,3.2C,3.2G,3.1z,3.1w)}
a 9(1.7(\'6-4\')==\'N\'){
Z(1,23,24,3.1U,3.29,3.1l,3.1n)}
a 9(1.7(\'6-4\')==\'O\'){
Z(1,27,28,3.2F,3.1L,3.1h,3.1j)}
a 9(1.7(\'6-4\')==\'D\'){
1B(1,-19*2,3.2x,3.1v)}
;
9(1.7(\'6-4\')==\'m\'||1.7(\'6-4\')==\'p\'||1.7(\'6-4\')==\'m-n\'||1.7(\'6-4\')==\'p-n\'){
1s(1,3.2b,0,3.1D)}
a 9(1.7(\'6-4\')==\'N\'){
Y(1,2m,3.1e,3.X)}
a 9(1.7(\'6-4\')==\'O\'){
Y(1,2o,3.1e,3.X)}
a 9(1.7(\'6-4\')==\'D\'){
1E(1,0,0,3.2h,3.2t,3.1p,3.1u)}
}
}
)}
)}
}
)(36,2i,2s);
',62,193,'|himself||setting|hipop||data|attr|find|if|else|true|top|left|css|el1|stop|thisWidth|speed|easing|width|height|one|horizontal|function|two|700|thisHeight|popup|animate|overlayText|popupWidth|var|div|block|popup2|textBox|textTitle|display|rub|children|overlayRubBottom|popup2Width|overlayRubTop|easing2|speed2|calPopup2|calPopup|r_board|text_content|text_content2|right|popupHeight|onePopup|overlayPop|twoPopup|500|fadeTo|bottom|overlayTextEasing|overlayTextInOut|textContent||popupEasing|class|easeInOutElastic|easeOutBounce|200|popup2Height|800|calPosition|r_boardHeight|calPopupTop|calPopupLeft2|coordinateOneDown|overlayTextSpeedIn|overlayTextSpeedOut|coordinateOneUp|textTitleWidth|textHTitleEasing|popupSpeedUp|textHBoxEasing|popupSpeedDown|textVTitleEasing|prepend|textVBoxEasing|doubleOverlayOpacity|doubleOverlay1Easing|overlayTextHeight|overlayTextWidth|overlayInOut|popup2Easing|doubleOverlay2Easing|boardEasing|popupRightEasing|popupHorizontalEasing|textBoxHeight|popupLeftEasing|textTitleHeight|oneBoard|calPopupLeft|popupOverlayEasing|doubleOverlay|overlayTextOpacity|calPopupTop2|textBoxWidth|calPopup2Left|1100|calPopup2Right|textHBoxSpeedOut|Math|popup2SpeedDown|coordinateTwoDown|coordinateOneLeft|textVTitleSpeedIn|coordinateOneLeftBack|coordinateOneTwoLeft|coordinateOneTwoRight|textVTitleSpeedOut|coordinateOneTwoLeftBack|coordinateOneTwoRightBack|coordinateTwoUp|popupOverlaySpeedIn|coordinateTitleVertical||coordinateBoxVertical|textVBoxSpeedIn|coordinateTitleVerticalBck|coordinateBoxVerticalBck|coordinateTitleHorizontal|coordinateBoxHorizontal|coordinateTitleHorizontalBck|coordinateBoxHorizontalBck|textVBoxSpeedOut|popupHorizontalSpeedOut|popupOverlaySpeedOut|popupOverlayOpacity|parentDivSize|img|doubleOverlay1SpeedIn|popupHorizontalSpeedIn|doubleOverlay1SpeedOut|window|popupRightHorizontalSpeedIn|popup2SpeedUp|coordinateTextOverlayLeft|coordinateTextOverlayLeftBack|coordinateTextOverlayTop|coordinateTextOverlayTopBack|doubleOverlay2SpeedIn|options|opacity|document|doubleOverlay2SpeedOut|textHTitleSpeedIn|r_boardWidth|boardSpeedIn|boardSpeedOut|outerHeight|1300|outerWidth|this|popupLeftHorizontalSpeedOut|900|coordinate|textHTitleSpeedOut|popupRightHorizontalSpeedOut|textHBoxSpeedIn|calR_boardLeft|calR_boardTop|padding|10px|popupLeftHorizontalSpeedIn|easeInOutQuart|extend|each|ZalkiHoverImg|easeOutCirc|fn|easeOutExpo|easeInOutBack|1500|easeOutBack|400|coordinateOneBottom|swing|on|mouseenter|return|ceil|floor|mouseleave|jQuery'.split('|'),0,{
}
))CSS代码(style.css):
body{background:url(img/bg.png);font-family:'Nunito',sans-serif;font-size:14px;}
#container{width:1060px;background:#272727;height:1910px;padding-left:10px;padding-top:10px;margin-right:auto;margin-left:auto;-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);/* Firefox */
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);/* Safari and Chrome */
box-shadow:0 0 10px rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.shadow(direction=120,color=#000000,strength=4);}
分享到QQ
分享到微博
微信扫一扫
