动画分享菜单

制作一个动画分享的菜单

效果演示
在这里插入图片描述
注意：在我们的程序开始之前我们一定要导入jquery.js架包并且找到如图所示的矢量图标。

完整代码
html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画菜单分享</title>
<link rel="stylesheet" href="css/share.css" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/share.js" type="text/javascript"></script>
</head><body><div class="kePublic">
<!--效果html开始-->
<div id="socialShare"></div><script>$(function() {$("#socialShare").socialShare({content: '',url:'',titile:''});});$("#shareQQ").on("click",function(){$(this).socialShare("tQQ");})
</script> 
<!--效果html结束--></body>
</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);