overtrue / share.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>http://codepen.io/jacketwpbb/pen/akPLyb</title> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); body{ background-color:#73A857; font-family:"Raleway", sans-serif; font-weight:500; color:#73A857; } .content{ min-height:180px; width:600px; background-color:#fff; margin:100px auto 0; position:relative; border-radius:10px; } .quote{ padding:40px 50px 0px; font-size:1.7em; text-align:center; } .quote i{ font-size:1.0em; margin-right:0.4em; } .fa{ display:inline-block; font:normal normal normal 14px/1 FontAwesome; } .author{ padding:0px 50px 20px; text-align:right; font-size:1.2em; } .author span:before{ content:"-" } .social-share{ margin-left:30px; float-left; } .change{ float:right; margin-right:30px; height:35px; border-radius:5px; padding:0 15px; font-size:0.8em; background-color:#73A857; color:#fff!important; outline:none; border:0; box-shadow:1px 1px 2px 2px #aaa; } .clearfix:before, .clearfix:after{ display:table; content:" "; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } .button{ padding-bottom:15px; } </style> </head> <body> <div class="content"> <div class="quote"><i class="fa fa-quote-left"></i><span id="quote"></span></div> <p class="author"><span id="author"></span></p> <div class="button clearfix"> <button id="change" class="change">New quote</button> <div class="social-share"></div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.15/js/jquery.share.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.15/css/share.min.css"> <script type="text/javascript"> $(document).ready(function(){ var color=["#bdbb99","#2c3e50","#9b59b6","#27ae60","#e74C3C","#e6a085","#F39C12","#73a857"]; $("#change").click(function(){ $.ajax({ headers: { "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V", Accept: "application/json", "Content-Type": "application/x-www-form-urlencoded" }, url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=', type:"GET", success:function(response){ var re=JSON.parse(response); var i=Math.floor(Math.random()*8); $("#quote,#author").animate({ opacity:0 },function(){ $("#quote").text(re.quote); $("#author").text(re.author); }); $("body,#change").animate({ backgroundColor:color[i], color:color[i] }); $("#quote,#author").animate({ opacity:1 }); }, error:function(){ alert("error"); } }); }); $("#change").trigger("click"); }); var $config = { sites:['qzone','qq','weibo','wechat'], disabled:['google','facebook','twitter'], wechatQrcodeHelper : '<p>微信里点“发现”，扫一下</p><p>便可将本文分享至朋友圈。</p>', url:'https://www.baidu.com/' }; $('.social-share').share($config); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 社会化分享 喜欢 (0)or分享 (0)
