动画分享菜单
制作一個動畫分享的菜單
效果演示
注意：在我們的程序開始之前我們一定要導入jquery.js架包并且找到如圖所示的矢量圖標。
完整代碼
html代碼
css代碼
.socialShare {display: block;width: 54px;height: 54px;position: relative;z-index: 1;margin: 0px auto;left: -150px; }.socialShare .msb_main {display: block;width: 46px;height: 46px;position: absolute;top: 0;left: 0;z-index: 2;cursor: pointer;text-indent: -9999px;border: 4px solid #FFF;box-shadow: 0 0 5px #DDD;border-radius: 36px; }.socialShare .msb_main:hover {box-shadow: 0 0 5px #BBB; }.socialShare .msb_main img {width: 46px;height: 46px;cursor: pointer;border-radius: 23px;border: none;float: left }.socialShare .msb_network_button {width: 31px;height: 31px;position: absolute;top: 9px;left: 92px;z-index: 1;cursor: pointer;text-indent: -9999px;display: none;background: no-repeat;border: 6px solid #f5f5f5;border-radius: 50%; }.socialShare .msb_network_button.sina {background: url(../images/social.png) no-repeat -130px -87px; }.socialShare .msb_network_button.tQQ {background: url(../images/social.png) no-repeat -185px -20px; }.socialShare .msb_network_button.qZone {background: url(../images/social.png) no-repeat -73px -20px; }.socialShare .msb_network_button.douban {background: url(../images/social.png) no-repeat -130px -151px; }.socialShare .msb_network_button.weixin {background: url(../images/social.png) no-repeat -73px -87px; }.socialShare .msb_network_button:hover {transition: -moz-transform 2s ease-out 0s;border: 6px solid #eee; }js代碼
; (function($, window, document, undefined) {//插件初始化function init(target, options) {var settings = $.extend({}, $.fn.socialShare.defaults, options);//初始化各個組件var $msb_main = "<a class='msb_main'><img title='分享' src='images/share_core_square.jpg'></a>";var $social_group = "<div class='social_group'>"+ "<a target='_blank' class='msb_network_button weixin'>weixin</a>"+ "<a target='_blank' class='msb_network_button sina'>sina</a>"+ "<a target='_blank' class='msb_network_button tQQ'>tQQ</a>"+ "<a target='_blank' class='msb_network_button qZone'>qZone</a>"+ "<a target='_blank' class='msb_network_button douban'>douban</a>"+ "</div>";$(target).append($msb_main);$(target).append($social_group);$(target).addClass("socialShare");//添加騰訊微博分享事件$(document).on("click",".msb_network_button.tQQ",function(){tQQ(this,settings);});//添加QQ空間分享事件$(document).on("click",".msb_network_button.qZone",function(){qZone(this,settings);});//添加新浪微博分享事件$(document).on("click",".msb_network_button.sina",function(){sinaWeibo(this,settings);});//添加豆瓣分享事件$(document).on("click",".msb_network_button.douban",function(){doubanShare(this,settings);});//添加微信分享事件$(document).on("click",".msb_network_button.weixin",function(){weixinShare(this,settings);});$(document).on("click",".msb_main",function(){if ($(this).hasClass("disabled")) return;var e = 500;//動畫時間var t = 250;//延遲時間var r = $(this).parent().find(".msb_network_button").length; //分享組件的個數var i = 60;var s = e + (r - 1) * t;var o = 1;var a = $(this).outerWidth();var f = $(this).outerHeight();var c = $(this).parent().find(".msb_network_button:eq(0)").outerWidth();var h = $(this).parent().find(".msb_network_button:eq(0)").outerHeight();var p = (a - c) / 2; //起始位置var d = (f - h) / 2; //起始位置var v = 0 / 180 * Math.PI;if (!$(this).hasClass("active")) {$(this).addClass("disabled").delay(s).queue(function(e) {$(this).removeClass("disabled").addClass("active");e()});$(this).parent().find(".msb_network_button").each(function() {var n = p + (p + i * o) * Math.cos(v); //結束位置var r = d + (d + i * o) * Math.sin(v); //結束位置$(this).css({display: "block",left: p + "px",top: d + "px"}).stop().delay(t * o).animate({left: n + "px",top: r + "px"}, e);o++})} else {o = r;$(this).addClass("disabled").delay(s).queue(function(e) {$(this).removeClass("disabled").removeClass("active");e()});$(this).parent().find(".msb_network_button").each(function() {$(this).stop().delay(t * o).animate({left: p,top: d}, e);o--})}});}function replaceAPI (api,options) {api = api.replace('{url}', options.url);api = api.replace('{title}', options.title);api = api.replace('{content}', options.content);api = api.replace('{pic}', options.pic);return api;}function tQQ(target,options){var options = $.extend({}, $.fn.socialShare.defaults, options);window.open(replaceAPI(tqq,options));}function qZone(target,options){var options = $.extend({}, $.fn.socialShare.defaults, options);window.open(replaceAPI(qzone,options));}function sinaWeibo(target,options){var options = $.extend({}, $.fn.socialShare.defaults, options);window.open(replaceAPI(sina,options));}function doubanShare(target,options){window.open(replaceAPI(douban,$.extend({},$.fn.socialShare.defaults,options)));}function weixinShare(target,options){window.open(replaceAPI(weixin,$.extend({},$.fn.socialShare.defaults,options)));}$.fn.socialShare = function(options, param) {if(typeof options == 'string'){var method = $.fn.socialShare.methods[options];if(method)return method(this,param);}elseinit(this,options);}//插件默認參數$.fn.socialShare.defaults = {url: window.location.href,title: document.title,content: '',pic: ''}//插件方法$.fn.socialShare.methods = {//初始化方法init:function(jq,options){return jq.each(function(){init(this,options);});},tQQ:function(jq,options){return jq.each(function(){tQQ(this,options);})},qZone:function(jq,options){return jq.each(function(){qZone(this,options);})},sinaWeibo:function(jq,options) {return jq.each(function(){sinaWeibo(this,options);});},doubanShare:function(jq,options) {return jq.each(function(){doubanShare(this,options);});},weixinShare:function(jq,options){return jq.each(function(){weixinShare(this,options);});}}//分享地址var qzone = 'http://www.baidu.com/';var sina = 'http://www.baidu.com/';var tqq = 'http://www.baidu.com/';var douban = 'http://www.baidu.com/';var weixin = 'http://www.baidu.com/';})(jQuery, window, document);總結
- 上一篇： 各种语言的 Hello World
- 下一篇： 错误Read timed out.