jQuery结合GASP制作点击数字滚动插件.zip_gasp文字特效资源-CSDN文库

共6个文件

js：3个

css：2个

html：1个

版权申诉

jquery代码

jquery特效

jquery插件

66 浏览量 2023-09-22 00:14:48 上传评论收藏 66KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery结合GASP制作点击数字滚动插件.zip （6个子文件）

jquery-1.11.0.min.js 94KB

lem_counter.js 7KB

TweenLite.min.js 28KB

css

bootstrap.min.css 118KB

demo.css 582B

index.html 4KB

<!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结合GASP制作点击数字滚动插件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/TweenLite.min.js"></script> <script type="text/javascript" src="js/lem_counter.js"></script> <style type="text/css"> body{background:#fff;color: #333;} .box{ font-size: 40px; } .btn-container{ line-height: 50px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="container"> <div class="row" style="padding:2em 0;"> <h1>示例</h1> <h3>Animate to</h3> <pre> $('.counter-demo-1').lemCounter({ value_to: 100 }); </pre> <div class="col-md-2"> <div class="counter-demo-1 box">100</div> </div> <div class="col-md-10 btn-container"> <button class="btn btn-info" id="btn1">点击开始执行</button> </div> <script type="text/javascript"> $("#btn1").click(function(){ $('.counter-demo-1').lemCounter({ value_to: 100 }); }) </script> </div> <hr> <div class="row"> <h3>Animate from to</h3> <pre> $('.counter-demo-2').lemCounter({ value_to: 100, value_from: 200 }); </pre> <div class="col-md-2"> <div class="counter-demo-2 box">100</div> </div> <div class="col-md-10 btn-container"> <button class="btn btn-info" id="btn2">点击开始执行</button> </div> <script type="text/javascript"> $("#btn2").click(function(){ $('.counter-demo-2').lemCounter({ value_to: 100, value_from: 200 }); }) </script> </div> <hr> <div class="row"> <h3>Value to from content</h3> <pre> $('.counter-demo-3').lemCounter({ value_to_from_content: true }); </pre> <div class="col-md-2"> <div class="counter-demo-3 box">100</div> </div> <div class="col-md-10 btn-container"> <button class="btn btn-info" id="btn3">点击开始执行</button> </div> <script type="text/javascript"> $("#btn3").click(function(){ $('.counter-demo-3').lemCounter({ value_to_from_content: true }); }) </script> </div> <hr> <div class="row"> <h3>Settings from data attribute</h3> <pre> $('.counter-demo-4').lemCounter(); <div class="counter-demo-4" data-lem-counter='{"value_from": 100000, "value_to": 1000, "animate_duration": 3, "locale": "en-US"}'>1,000 </div> </pre> <div class="col-md-2"> <div class="counter-demo-4 box" data-lem-counter='{"value_from": 100000, "value_to": 1000, "animate_duration": 3, "locale": "en-US"}'>1,000 </div> </div> <div class="col-md-10 btn-container"> <button class="btn btn-info" id="btn4">点击开始执行</button> </div> <script type="text/javascript"> $("#btn4").click(function(){ $('.counter-demo-4').lemCounter(); }) </script> </div> <hr> <div class="row" style="padding:2em 0;"> <h3>事件：onComplete</h3> <pre> $('.counter-event-demo-5').lemCounter({ value_to: 100 }); $('.counter-event-demo-5').on('onComplete.lc', function () { $(this).css('color', 'red'); }); </pre> <div class="col-md-2"> <div class="counter-demo-5 box">100</div> </div> <div class="col-md-10 btn-container"> <button class="btn btn-info" id="btn5">点击开始执行</button> </div> <script type="text/javascript"> $("#btn5").click(function(){ $('.counter-demo-5').lemCounter({ value_to: 100 }); $('.counter-demo-5').on('onComplete.lc', function () { $(this).css('color', 'red'); }); }) </script> </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.lanrenzhijia.com/" target="_blank">懒人</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉