<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery庸졿젃譯묋퓝�늽�궦�돶�븞餓�</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Josefin+Slab" rel="stylesheet">
<style media="screen">
.outside {
position: relative;
width: 100%;
margin: auto 0;
}
.sans{
font-family: Helvetica, sans-serif;
}
.list {
max-width: 400px;
left: 20%;
text-align: left;
justify-content: center;
position: relative;
}
body{
text-align: center;
font-family: 'Josefin Slab', serif;
}
.container{
width: 50%;
}
.main-container{
position: relative;;
left: 25%;
}
.container > * {
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 4px rgba(0,0,0,.3);
/*left:50%;*/
color: grey;
font-family: 'Comfortaa', cursive;
}
#c{
background-color: Aquamarine;
width: 70px;
display: inline-block;
margin-right: 30px;
}
.code{
font-family: monospace;
white-space: pre-wrap;
background: hsl(30,80%,90%);
}
pre > code {
white-space: pre;
margin-top: -1.00em;
display: block;
color: grey;
background-color: cornsilk;
text-align: left;
width: 65%;
left: 17%;
padding: 5px;
border: 1px grey solid;
position: relative;
}
#c2{
background-color: Aquamarine;
width: 70px;
display: inline-block;
margin-left: 30px;
}
#e {
background-color: Crimson;
height: 60px;
color: white;
}
#a{
background-color: Cornsilk ;
}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>jquery庸졿젃譯묋퓝�늽�궦�돶�븞�룖餓� <span>A jQuery plugin to add sparkles to anything on hover</span></h1>
<div class="htmleaf-links">
</div>
</header>
<div class="main-container">
<div class="container">
<h3 class="sparkle-rollover" id="a">I have all three different sparkles on hover!!</h3>
<br>
<p class="sparkle-rollover" id="b">Rollover me to see the default options.</p>
<br>
<img id="d" src="img/system_preferences.png" width="128" height="128" alt="">
<br>
<br>
<div class="sparkle-rollover" id="c">
or me! images can appear!
</div>
<div id="c2">
any image you WANT!
</div>
<br>
<br>
<div id="e">
I have gravity!
</div>
<br>
<p><i> �윒� I have nothing. �윒�</i></p>
</div>
</div>
</div>
<div class="related">
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/sparkleHover.js"></script>
<script type="text/javascript">
$(document).ready(function() {
'use strict';
//dont pass in anything and use default options
$('#a').sparkleHover();
$('#b').sparkleHover().css('background', 'pink');
$('#c').sparkleHover({
colors : ['#297E97', "#2EB8D5",'#36BEC1'],
num_sprites: 12,
lifespan: 1400,
radius: 400,
sprite_size: 40,
shape: 'circle',
image: 'img/Pumplin.jpg'
});
$('#c2').sparkleHover({
num_sprites: 32,
lifespan: 2000,
radius: 200,
sprite_size: 50,
shape: 'CirCle',
colors: 'rgba(0,0,0,0)',
image: 'img/unicorn.gif'
});
});
$('#d').sparkleHover({
colors : ['yellow', 'orange'],
num_sprites: 72,
lifespan: 3000,
radius: 800,
sprite_size: 14,
shape: "square",
});
$('#a').sparkleHover({
colors : ['purple', 'pink', 'teal', 'grey'],
num_sprites: 72,
lifespan: 500,
radius: 800,
sprite_size: 24,
shape: "triangle"
});
$('#a').sparkleHover({
colors : ['yellow', 'red'],
num_sprites: 32,
lifespan: 700,
radius: 200,
sprite_size: 14,
shape: "circle"
});
$('#a').sparkleHover({
colors : ['green', 'teal','maroon'],
num_sprites: 12,
lifespan: 2000,
radius: 300,
sprite_size: 4,
shape: "square"
});
$('#e').sparkleHover({
colors : ['purple', 'pink', 'teal', 'grey'],
num_sprites: 72,
lifespan: 2000,
radius: 200,
sprite_size: 14,
shape: "triangle",
gravity: "true"
});
</script>
</body>
</html>
基于jQuery插件sparkleHover.js实现鼠标滑过爆炸特效源码.zip
版权申诉
100 浏览量
2022-11-10
00:34:07
上传
评论
收藏 211KB ZIP 举报
基于jQuery插件sparkleHover.js实现鼠标滑过爆炸特效源码.zip （15个子文件） 
132677762505299918 likecs.com_132677762513898160 css 
htmleaf-demo.css 6KB normalize.css 2KB related 
2.jpg 37KB 1.jpg 19KB img 
unicorn.gif 67KB
system_preferences.png 41KB Pumplin.jpg 13KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 5KB js jquery-1.11.0.min.js 94KB sparkleHover.js 11KB readme.html 576B资源评论
