简单做一个js打赏弹窗小功能效果

03191

一般在文章末尾很多网站都有弹框打赏的的小功能，下面说一下如何实现打赏弹窗小功能的方法，比如：

效果图：

简单做一个js打赏弹窗小功能效果插图

使用方法：

提示：需要用到jquery库支持，本站已提供所有CDN版本库和下载地址如下：

jquery超全所有版本下载含CDN引用地址（实时更新）-大雄搜集站
jquery超全所有版本下载含CDN引用地址（实时更新）-大雄搜集站
jquery超全所有版本下载含CDN引用地址（实时更新）
大雄的头像-大雄搜集站钻石会员4年前
06520

1，首先准备一个按钮触发和html结构，这个代码你可以放在前端页面中喜欢的位置上，点击一下就会弹出的位置

hmtl结构：

<button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
<div id="goodcover"></div>
<div id="code">
  <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
  <div class="goodtxt">
  打赏内容
  </div>
  <div class="code-img"></div>
</div>
<button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
<div id="goodcover"></div>
<div id="code">
  <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
  <div class="goodtxt">
  打赏内容
  </div>
  <div class="code-img"></div>
</div>
<button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
<div id="goodcover"></div>
<div id="code">
	<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
	<div class="goodtxt">
	打赏内容
	</div>
	<div class="code-img"></div>
</div>

2，美化的css样式：

#goodcover {
          display: none;
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 133%;
          background-color: #000;
          z-index: 1001;
          -moz-opacity: .8;
          opacity: .7;
          filter: alpha(opacity=80)
      }
      
      #code {
          padding: 10px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-color: #313435;
          z-index: 1002;
          border-radius: 8px;
              display: none;
      }
      
      .close1 {    
          position: relative;
      }
      
      .close1 i{
          font-size: 25px;
          font-weight: 700;
          color: white;
          position: absolute;
              right: -20px;
          top: -30px;
      
      }
      .goodtxt {
          margin-left: 30px; 
      }
      .goodtxt p {
          font-size: 16px;
          color: #fff;    
      }
      .goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
      .code-img {
          width: 250px;
          padding: 10px
      }
      .code-img img {
          width: 240px
      }
#goodcover {
          display: none;
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 133%;
          background-color: #000;
          z-index: 1001;
          -moz-opacity: .8;
          opacity: .7;
          filter: alpha(opacity=80)
      }
      
      #code {
          padding: 10px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-color: #313435;
          z-index: 1002;
          border-radius: 8px;
              display: none;
      }
      
      .close1 {    
          position: relative;
      }
      
      .close1 i{
          font-size: 25px;
          font-weight: 700;
          color: white;
          position: absolute;
              right: -20px;
          top: -30px;
      
      }
      .goodtxt {
          margin-left: 30px; 
      }
      .goodtxt p {
          font-size: 16px;
          color: #fff;    
      }
      .goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
      .code-img {
          width: 250px;
          padding: 10px
      }
      .code-img img {
          width: 240px
      }
#goodcover {
			    display: none;
			    position: fixed;
			    top: 0%;
			    left: 0%;
			    width: 100%;
			    height: 133%;
			    background-color: #000;
			    z-index: 1001;
			    -moz-opacity: .8;
			    opacity: .7;
			    filter: alpha(opacity=80)
			}
			
			#code {
			    padding: 10px;
			    background-size: cover;
			    background-repeat: no-repeat;
			    background-position: 50% 50%;
			    background-color: #313435;
			    z-index: 1002;
			    border-radius: 8px;
			        display: none;
			}
			
			.close1 {    
			    position: relative;
			}
			
			.close1 i{
			    font-size: 25px;
			    font-weight: 700;
			    color: white;
			    position: absolute;
			        right: -20px;
			    top: -30px;
			
			}
			.goodtxt {
			    margin-left: 30px; 
			}
			.goodtxt p {
			    font-size: 16px;
			    color: #fff;    
			}
			.goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
			.code-img {
			    width: 250px;
			    padding: 10px
			}
			.code-img img {
			    width: 240px
			}

3，jq事件触发:

$(function() {
      //alert($(window).height());
      $('#ClickMe').click(function() {
          $('#code').center();
          $('#goodcover').show();
          $('#code').fadeIn();
      });
      $('#closebt').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      $('#goodcover').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      /*var val=$(window).height();
      var codeheight=$("#code").height();
      var topheight=(val-codeheight)/2;
      $('#code').css('top',topheight);*/
      jQuery.fn.center = function(loaded) {
          var obj = this;
          body_width = parseInt($(window).width());
          body_height = parseInt($(window).height());
          block_width = parseInt(obj.width());
          block_height = parseInt(obj.height());
  
          left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
          if (body_width < block_width) {
              left_position = 0 + $(window).scrollLeft();
          };
  
          top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
          if (body_height < block_height) {
              top_position = 0 + $(window).scrollTop();
          };
  
          if (!loaded) {
  
              obj.css({
                  'position': 'fixed'
              });
              obj.css({
                  'top': ($(window).height() - $('#code').height()) * 0.5,
                  'left': left_position
              });
              $(window).bind('resize', function() {
                  obj.center(!loaded);
              });
              $(window).bind('scroll', function() {
                  obj.center(!loaded);
              });
  
          } else {
              obj.stop();
              obj.css({
                  'position': 'absolute'
              });
              obj.animate({
                  'top': top_position
              }, 200, 'linear');
          }
      }
  })
$(function() {
      //alert($(window).height());
      $('#ClickMe').click(function() {
          $('#code').center();
          $('#goodcover').show();
          $('#code').fadeIn();
      });
      $('#closebt').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      $('#goodcover').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      /*var val=$(window).height();
      var codeheight=$("#code").height();
      var topheight=(val-codeheight)/2;
      $('#code').css('top',topheight);*/
      jQuery.fn.center = function(loaded) {
          var obj = this;
          body_width = parseInt($(window).width());
          body_height = parseInt($(window).height());
          block_width = parseInt(obj.width());
          block_height = parseInt(obj.height());
  
          left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
          if (body_width < block_width) {
              left_position = 0 + $(window).scrollLeft();
          };
  
          top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
          if (body_height < block_height) {
              top_position = 0 + $(window).scrollTop();
          };
  
          if (!loaded) {
  
              obj.css({
                  'position': 'fixed'
              });
              obj.css({
                  'top': ($(window).height() - $('#code').height()) * 0.5,
                  'left': left_position
              });
              $(window).bind('resize', function() {
                  obj.center(!loaded);
              });
              $(window).bind('scroll', function() {
                  obj.center(!loaded);
              });
  
          } else {
              obj.stop();
              obj.css({
                  'position': 'absolute'
              });
              obj.animate({
                  'top': top_position
              }, 200, 'linear');
          }
      }
  })
$(function() {
	    //alert($(window).height());
	    $('#ClickMe').click(function() {
	        $('#code').center();
	        $('#goodcover').show();
	        $('#code').fadeIn();
	    });
	    $('#closebt').click(function() {
	        $('#code').hide();
	        $('#goodcover').hide();
	    });
	    $('#goodcover').click(function() {
	        $('#code').hide();
	        $('#goodcover').hide();
	    });
	    /*var val=$(window).height();
	    var codeheight=$("#code").height();
	    var topheight=(val-codeheight)/2;
	    $('#code').css('top',topheight);*/
	    jQuery.fn.center = function(loaded) {
	        var obj = this;
	        body_width = parseInt($(window).width());
	        body_height = parseInt($(window).height());
	        block_width = parseInt(obj.width());
	        block_height = parseInt(obj.height());
	
	        left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
	        if (body_width < block_width) {
	            left_position = 0 + $(window).scrollLeft();
	        };
	
	        top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
	        if (body_height < block_height) {
	            top_position = 0 + $(window).scrollTop();
	        };
	
	        if (!loaded) {
	
	            obj.css({
	                'position': 'fixed'
	            });
	            obj.css({
	                'top': ($(window).height() - $('#code').height()) * 0.5,
	                'left': left_position
	            });
	            $(window).bind('resize', function() {
	                obj.center(!loaded);
	            });
	            $(window).bind('scroll', function() {
	                obj.center(!loaded);
	            });
	
	        } else {
	            obj.stop();
	            obj.css({
	                'position': 'absolute'
	            });
	            obj.animate({
	                'top': top_position
	            }, 200, 'linear');
	        }
	    }
	})

到此就结束了，下面提供完整版案例：懒癌专属版

打赏图片可自行添加本地的图片。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
                <!-- jquery超全所有版本下载含CDN引用地址（实时更新） https://soujiz.com/1994.html -->
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
      #goodcover {
          display: none;
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 133%;
          background-color: #000;
          z-index: 1001;
          -moz-opacity: .8;
          opacity: .7;
          filter: alpha(opacity=80)
      }
      
      #code {
          padding: 10px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-color: #313435;
          z-index: 1002;
          border-radius: 8px;
              display: none;
      }
      
      .close1 {    
          position: relative;
      }
      
      .close1 i{
          font-size: 25px;
          font-weight: 700;
          color: white;
          position: absolute;
              right: -20px;
          top: -30px;
      
      }
      .goodtxt {
          margin-left: 30px; 
      }
      .goodtxt p {
          font-size: 16px;
          color: #fff;    
      }
      .goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
      .code-img {
          width: 250px;
          padding: 10px
      }
      .code-img img {
          width: 240px
      }
    </style>
  </head>
  <body>
  <button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
  <div id="goodcover"></div>
  <div id="code">
    <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
    <div class="goodtxt">
    打赏内容
    </div>
    <div class="code-img"></div>
  </div>
       <script type="text/javascript">
  $(function() {
      //alert($(window).height());
      $('#ClickMe').click(function() {
          $('#code').center();
          $('#goodcover').show();
          $('#code').fadeIn();
      });
      $('#closebt').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      $('#goodcover').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      /*var val=$(window).height();
      var codeheight=$("#code").height();
      var topheight=(val-codeheight)/2;
      $('#code').css('top',topheight);*/
      jQuery.fn.center = function(loaded) {
          var obj = this;
          body_width = parseInt($(window).width());
          body_height = parseInt($(window).height());
          block_width = parseInt(obj.width());
          block_height = parseInt(obj.height());
  
          left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
          if (body_width < block_width) {
              left_position = 0 + $(window).scrollLeft();
          };
  
          top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
          if (body_height < block_height) {
              top_position = 0 + $(window).scrollTop();
          };
  
          if (!loaded) {
  
              obj.css({
                  'position': 'fixed'
              });
              obj.css({
                  'top': ($(window).height() - $('#code').height()) * 0.5,
                  'left': left_position
              });
              $(window).bind('resize', function() {
                  obj.center(!loaded);
              });
              $(window).bind('scroll', function() {
                  obj.center(!loaded);
              });
  
          } else {
              obj.stop();
              obj.css({
                  'position': 'absolute'
              });
              obj.animate({
                  'top': top_position
              }, 200, 'linear');
          }
      }
  })
</script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
                <!-- jquery超全所有版本下载含CDN引用地址（实时更新） https://soujiz.com/1994.html -->
    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
      #goodcover {
          display: none;
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 133%;
          background-color: #000;
          z-index: 1001;
          -moz-opacity: .8;
          opacity: .7;
          filter: alpha(opacity=80)
      }
      
      #code {
          padding: 10px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50% 50%;
          background-color: #313435;
          z-index: 1002;
          border-radius: 8px;
              display: none;
      }
      
      .close1 {    
          position: relative;
      }
      
      .close1 i{
          font-size: 25px;
          font-weight: 700;
          color: white;
          position: absolute;
              right: -20px;
          top: -30px;
      
      }
      .goodtxt {
          margin-left: 30px; 
      }
      .goodtxt p {
          font-size: 16px;
          color: #fff;    
      }
      .goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
      .code-img {
          width: 250px;
          padding: 10px
      }
      .code-img img {
          width: 240px
      }
    </style>
  </head>
  <body>
  <button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
  <div id="goodcover"></div>
  <div id="code">
    <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
    <div class="goodtxt">
    打赏内容
    </div>
    <div class="code-img"></div>
  </div>
       <script type="text/javascript">
  $(function() {
      //alert($(window).height());
      $('#ClickMe').click(function() {
          $('#code').center();
          $('#goodcover').show();
          $('#code').fadeIn();
      });
      $('#closebt').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      $('#goodcover').click(function() {
          $('#code').hide();
          $('#goodcover').hide();
      });
      /*var val=$(window).height();
      var codeheight=$("#code").height();
      var topheight=(val-codeheight)/2;
      $('#code').css('top',topheight);*/
      jQuery.fn.center = function(loaded) {
          var obj = this;
          body_width = parseInt($(window).width());
          body_height = parseInt($(window).height());
          block_width = parseInt(obj.width());
          block_height = parseInt(obj.height());
  
          left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
          if (body_width < block_width) {
              left_position = 0 + $(window).scrollLeft();
          };
  
          top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
          if (body_height < block_height) {
              top_position = 0 + $(window).scrollTop();
          };
  
          if (!loaded) {
  
              obj.css({
                  'position': 'fixed'
              });
              obj.css({
                  'top': ($(window).height() - $('#code').height()) * 0.5,
                  'left': left_position
              });
              $(window).bind('resize', function() {
                  obj.center(!loaded);
              });
              $(window).bind('scroll', function() {
                  obj.center(!loaded);
              });
  
          } else {
              obj.stop();
              obj.css({
                  'position': 'absolute'
              });
              obj.animate({
                  'top': top_position
              }, 200, 'linear');
          }
      }
  })
</script>
  </body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
                <!-- jquery超全所有版本下载含CDN引用地址（实时更新） https://soujiz.com/1994.html -->
		<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<style>
			#goodcover {
			    display: none;
			    position: fixed;
			    top: 0%;
			    left: 0%;
			    width: 100%;
			    height: 133%;
			    background-color: #000;
			    z-index: 1001;
			    -moz-opacity: .8;
			    opacity: .7;
			    filter: alpha(opacity=80)
			}
			
			#code {
			    padding: 10px;
			    background-size: cover;
			    background-repeat: no-repeat;
			    background-position: 50% 50%;
			    background-color: #313435;
			    z-index: 1002;
			    border-radius: 8px;
			        display: none;
			}
			
			.close1 {    
			    position: relative;
			}
			
			.close1 i{
			    font-size: 25px;
			    font-weight: 700;
			    color: white;
			    position: absolute;
			        right: -20px;
			    top: -30px;
			
			}
			.goodtxt {
			    margin-left: 30px; 
			}
			.goodtxt p {
			    font-size: 16px;
			    color: #fff;    
			}
			.goodtxt .vtip{ font-size: 12px; color: #b3b3b3;}
			.code-img {
			    width: 250px;
			    padding: 10px
			}
			.code-img img {
			    width: 240px
			}
		</style>
	</head>
	<body>
	<button type="button" id="ClickMe"> <i class="icon iconfont icon-yulebao"></i>打赏</button>
	<div id="goodcover"></div>
	<div id="code">
		<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="aa.png"></a></div>
		<div class="goodtxt">
		打赏内容
		</div>
		<div class="code-img"></div>
	</div>
       <script type="text/javascript">
	$(function() {
	    //alert($(window).height());
	    $('#ClickMe').click(function() {
	        $('#code').center();
	        $('#goodcover').show();
	        $('#code').fadeIn();
	    });
	    $('#closebt').click(function() {
	        $('#code').hide();
	        $('#goodcover').hide();
	    });
	    $('#goodcover').click(function() {
	        $('#code').hide();
	        $('#goodcover').hide();
	    });
	    /*var val=$(window).height();
	    var codeheight=$("#code").height();
	    var topheight=(val-codeheight)/2;
	    $('#code').css('top',topheight);*/
	    jQuery.fn.center = function(loaded) {
	        var obj = this;
	        body_width = parseInt($(window).width());
	        body_height = parseInt($(window).height());
	        block_width = parseInt(obj.width());
	        block_height = parseInt(obj.height());
	
	        left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
	        if (body_width < block_width) {
	            left_position = 0 + $(window).scrollLeft();
	        };
	
	        top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
	        if (body_height < block_height) {
	            top_position = 0 + $(window).scrollTop();
	        };
	
	        if (!loaded) {
	
	            obj.css({
	                'position': 'fixed'
	            });
	            obj.css({
	                'top': ($(window).height() - $('#code').height()) * 0.5,
	                'left': left_position
	            });
	            $(window).bind('resize', function() {
	                obj.center(!loaded);
	            });
	            $(window).bind('scroll', function() {
	                obj.center(!loaded);
	            });
	
	        } else {
	            obj.stop();
	            obj.css({
	                'position': 'absolute'
	            });
	            obj.animate({
	                'top': top_position
	            }, 200, 'linear');
	        }
	    }
	})
</script>
	</body>
</html>
© 版权声明
版权声明 本站名称：大雄搜集站
本站永久网址：https://soujiz.com
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买 ，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。
THE END
主题美化技术教程
喜欢点个赞支持一下吧
点赞1赏币 分享
The course of true love never did run smooth.
真诚的爱情之路永不会是平坦的
大雄的头像-大雄搜集站钻石会员
相关推荐
评论交流 抢沙发

请登录后发表评论

    暂无评论内容

AI影视导航
悬赏猫任务平台破解去授权版-大雄搜集站

1悬赏猫任务平台破解去授权版

大雄的头像-大雄搜集站钻石会员3年前
免费303
WordPress开发进群V2主题多种引流-大雄搜集站

2WordPress开发进群V2主题多种引流

大雄的头像-大雄搜集站钻石会员1个月前
免费40
流浪猫流浪狗宠物领养平台H5源码-大雄搜集站

3流浪猫流浪狗宠物领养平台H5源码

大雄的头像-大雄搜集站钻石会员3年前
166
WordPress设置网站标签页动态切换标题-大雄搜集站

4WordPress设置网站标签页动态切换标题

大雄的头像-大雄搜集站钻石会员3年前
206
给网站加好看霸气的老虎福字背景图代码分享-大雄搜集站

5给网站加好看霸气的老虎福字背景图代码分享

大雄的头像-大雄搜集站钻石会员3年前
948
科技感炫酷纯HTML个人简历(原创)-大雄搜集站

6科技感炫酷纯HTML个人简历(原创)

大雄的头像-大雄搜集站钻石会员3年前
R币 10534
TOP1
TOP2
TOP3
TOP4
TOP5
TOP6
 

AI影视导航

 
汇聚数百款全球AI工具。各种免费VIP影视免费观看
立即进入🚀
最新评论
江海寄余生的头像-大雄搜集站

江海寄余生22天前0

111111111111111111
一***1的头像-大雄搜集站

一***122天前0

谢谢站长
寻***央的头像-大雄搜集站

寻***央24天前0

123478
poiuy的头像-大雄搜集站

poiuy25天前0

夸就完事了
没必要，真就没必要的头像-大雄搜集站

没必要，真就没必要31天前0

6666666666666
shadow的头像-大雄搜集站

shadow32天前0

大佬，请教下安装完后台打开提示 链接服务器失败 怎么解决
minecraft的头像-大雄搜集站

minecraft38天前0

9884854894
hxhvip1989的头像-大雄搜集站

hxhvip19891个月前0

感谢分享
标签云
重装系统设计视频表白表情包舔狗日记脚本网页模板编程素材程序源码福利破解独立部署特效源码开源源码二开源码买断游戏油猴脚本摸鱼插件接码短信平台抖音影视
坚持每天来逛逛，会让你
生活也美好了！
心情也舒畅了！
走路也有劲了！
腿也不痛了！
腰也不酸了！
工作也轻松了！
你好我也好，不要忘记哦!