jQuery鼠标经过出现星星动画特效.zip资源-CSDN文库

共22个文件

js：6个

css：4个

woff：2个

版权申诉

html5

196 浏览量 2023-09-27 22:14:40 上传评论收藏 514KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery鼠标经过出现星星动画特效.zip （22个子文件）

jquery-stars.js 5KB

jquery-1.11.0.min.js 94KB

bootstrap-3.3.4.js 309B

highlight.min.js 41KB

smothscrool.js 8KB

jquery.main.js 1KB

css

foundation.min.css 739B

bootstrap.min.css 111KB

font-awesome.min.css 21KB

all.css 3KB

index.html 6KB

images

candy-cane-stars.png 7KB

jstar-map.png 6KB

fonts

FontAwesome.otf 84KB

glyphicons-halflings-regular.svg 61KB

glyphicons-halflings-regular.ttf 40KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

fontawesome-webfont.eot 55KB

fontawesome-webfont.woff 64KB

fontawesome-webfont.svg 280KB

fontawesome-webfont.ttf 110KB

<!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" href="css/foundation.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> <link media="all" rel="stylesheet" href="css/all.css"> </head> <body><script src="/demos/googlegg.js"></script> <section id="examples" class="example-box blue"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 visible-md-block visible-lg-block"> <pre><code class="javascript"> jQuery('#example-1').jstars({ image_path: 'images' }); </code></pre> </div> <div class="col-md-6 col-sm-12"> <h2>Example 1: White</h2> <p>This example illustrates "white" style. As you can see we do not specify any parameters, so style and frequency are set to "white" and "12" automatically.</p> </div> <div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block"> <pre><code class="javascript"> jQuery('#example-1').jstars({ image_path: 'images' }); </code></pre> </div> </div> </div> </section> <section id="example-blue" class="example-box white"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <h2 style="color: #fff;">Example 2: Blue</h2> <p style="color: #fff;">This one illustrates "blue" style.</p> <p style="color: #fff;">Also we increased frequency a bit.</p> </div> <div class="col-md-6 col-sm-12"> <pre><code class="javascript"> jQuery('#example-blue').jstars({ image_path: 'images', style: 'blue', frequency: 15 }); </code></pre> </div> </div> </div> </section> <section id="example-yellow" class="example-box green"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 visible-md-block visible-lg-block"> <pre><code> jQuery('#example-yellow').jstars({ image_path: 'images', style: 'yellow', frequency: 20 }); </code></pre> </div> <div class="col-md-6 col-sm-12"> <h2>Example 3: Yellow</h2> <p>This example illustrates "yellow" style.</p> <p>And the frequency is set to max value.</p> </div> <div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block"> <pre><code> jQuery('#example-yellow').jstars({ image_path: 'images', style: 'yellow', frequency: 20 }); </code></pre> </div> </div> </div> </section> <section id="example-red" class="example-box white"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <h2 style="color: #fff;">Example 4: Red</h2> <p style="color: #fff;">This example illustrates "red" style.</p> <p style="color: #fff;">The frequency is low here, so the stars shine rarely.</p> </div> <div class="col-md-6 col-sm-12"> <pre><code class="javascript"> jQuery('#example-red').jstars({ image_path: 'images', style: 'red', frequency: 5 }); </code></pre> </div> </div> </div> </section> <section id="example-green" class="example-box blue"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12 visible-md-block visible-lg-block"> <pre><code class="javascript"> jQuery('#example-green').jstars({ image_path: 'images', style: 'green' }); </code></pre> </div> <div class="col-md-6 col-sm-12"> <h2>Example 5: Green</h2> <p>This example illustrates "green" style.</p> </div> <div class="col-md-6 col-sm-12 visible-xs-block visible-sm-block"> <pre><code class="javascript"> jQuery('#example-green').jstars({ image_path: 'images', style: 'green' }); </code></pre> </div> </div> </div> </section> <section id="example-rand" class="example-box green"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <h2>Example 6: Red</h2> <p>Our plugin has tricky mode - to show all stars colors randomly.</p> <p>You should use style "rand" for this feature.</p> </div> <div class="col-md-6 col-sm-12"> <pre><code class="javascript"> jQuery('#example-rand').jstars({ image_path: 'images', style: 'rand' }); </code></pre> </div> </div> </div> </section> <section id="custom" class="example-box blue"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-12"> <h2>Customize the image</h2> <p>You can try to prepare your own asset to display different image instead of stars.</p> <p>To do that you should make a sprite of 9 images, each next part is differ from previous with 40 degrees angle.</p> <p>Let's try how candy cane looks... It will be good for Xmas eve :)</p> </div> <div class="col-md-6 col-sm-12"> <pre><code class="javascript"> jQuery('#example-rand').jstars({ image_path: 'images', image: 'candy-cane-stars.png', style: 'white', width: 34, height: 34, delay: 700, frequency: 5 }); </code></pre> </div> </div> </div> </section> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/bootstrap-3.3.4.js"></script> <script src="js/highlight.min.js"></script> <script type="text/javascript" src="js/jquery-stars.js"></script> <script type="text/javascript" src="js/smothscrool.js"></script> <script type="text/javascript" src="js/jquery.main.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉