PHPIN.NET

 找回密码
 立即注册
查看: 5002|回复: 0

[jQuery/Js/AJAX] jQuery特效:jQuery点击弹出+1放大效果

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2015-2-5 11:57:25 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
jQuery特效:jQuery点击弹出+1放大效果

效果截图:
演示截图.png

代码如下:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8" />
  5. <title>jQuery点击弹出+1放大效果</title>
  6. <style type="text/css">
  7. body{margin:0;padding:0;font:12px/1.5 arial;color:#3E3E3E;}
  8. #btn{width:90px;height:36px;border:none;background-color:#069;color:#fff;font-size:14px;font-family:Microsoft YaHei;cursor:pointer;}
  9. </style>
  10. </head>
  11. <body>
  12. <p style="margin-top:120px;text-align:center;"><button id="btn">点击我</button></p>
  13. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  14. <script>
  15. ;(function($) {
  16.         $.extend({
  17.                 tipsBox: function(options) {
  18.                         options = $.extend({
  19.                                 obj: null,  //jq对象,要在那个html标签上显示
  20.                                 str: "+1",  //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
  21.                                 startSize: "12px",  //动画开始的文字大小
  22.                                 endSize: "30px",    //动画结束的文字大小
  23.                                 interval: 1000,  //动画时间间隔
  24.                                 color: "red",    //文字颜色
  25.                                 callback: function() {}    //回调函数
  26.                         }, options);
  27.                         $("body").append("<span class='num'>"+ options.str +"</span>");
  28.                         var box = $(".num");
  29.                         var left = options.obj.offset().left + options.obj.width() / 2;
  30.                         var top = options.obj.offset().top - options.obj.height();
  31.                         box.css({
  32.                                 "position": "absolute",
  33.                                 "left": left + "px",
  34.                                 "top": top + "px",
  35.                                 "z-index": 9999,
  36.                                 "font-size": options.startSize,
  37.                                 "line-height": options.endSize,
  38.                                 "color": options.color
  39.                         });
  40.                         box.animate({
  41.                                 "font-size": options.endSize,
  42.                                 "opacity": "0",
  43.                                 "top": top - parseInt(options.endSize) + "px"
  44.                         }, options.interval , function() {
  45.                                 box.remove();
  46.                                 options.callback();
  47.                         });
  48.                 }
  49.         });
  50. })(jQuery);
  51. </script>
  52. <script type="text/javascript">
  53. $(function(){
  54.         $("#btn").click(function(){
  55.                 $.tipsBox({
  56.                         obj: $(this),
  57.                         interval:1000,
  58.                         str: "+1",
  59.                         callback: function(){
  60.                                 //alert(5);
  61.                         }
  62.                 });
  63.         });
  64. });
  65. </script>
  66. </body>
  67. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 04:32

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表