jQuery鼠标点击弹出粒子效果动画.zip资源-CSDN文库

共11个文件

js：4个

png：4个

jpg：1个

版权申诉

javascript

html5

jQuery

2 浏览量 2022-11-22 17:15:07 上传评论收藏 98KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery鼠标点击弹出粒子效果动画.zip （11个子文件）

jQuery鼠标点击弹出粒子效果动画

jQuery鼠标点击弹出粒子效果动画.jpg 33KB

jiaoben3534

css

bootstrap.min.css 115KB

particle-1.png 744B

particle-4.png 777B

index.html 2KB

clickspark.min.js 5KB

jquery-2.1.4.min.js 82KB

clickspark.js 10KB

bootstrap.js 66KB

particle-2.png 449B

particle-3.png 892B

<!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>jQuery鼠标点击弹出粒子效果动画 - 网页模板</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.js"></script> <script type="text/javascript" src="js/clickspark.min.js"></script> <script> $(document).ready(function () { $('.button-1').clickSpark(); $('.button-2').clickSpark({ particleImagePath: 'particle-2.png', particleCount: 35, particleSpeed: 10, particleSize: 15, particleRotationSpeed: 20 }); $(document).ready(function () { $('.button-3').click(function () { clickSpark.setParticleCount(50); clickSpark.setParticleSize(12); clickSpark.setParticleSpeed(12); clickSpark.setParticleImagePath('particle-4.png'); clickSpark.fireParticles($('.sparklingDiv')); }); }); }); </script> <style> .bg-info { padding: 1px 0 15px 15px; } .sparklingDiv { border: 1px solid grey; height: 60px; width: 100px; } .sparklingDivContainer { position: absolute; top: 0px; right: 30px; } </style> </head> <body> <div class="container"> <br><br><br><br> <div class="row"> <div class="col-sm-4"> <div class="bg-info"> <h4 class="text-muted">演示</h4> <button class="btn btn-default button-1">点击我！</button> </div> </div> <div class="col-sm-4"> <div class="bg-info"> <h4 class="text-muted">演示</h4> <button class="btn btn-default button-2">点击我！</button> </div> </div> <div class="col-sm-4"> <div class="bg-info"> <h4 class="text-muted">演示</h4> <button class="btn btn-default button-3">点击我！</button> <div class="sparklingDivContainer"> target div <div class="sparklingDiv"></div> </div> </div> </div> </div> </div> </div> <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.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉