动画分享菜单

制作一个动画分享的菜单

效果演示
在这里插入图片描述
注意：在我们的程序开始之前我们一定要导入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);

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/564755.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java 双向链表_23张图！万字详解「链表」，从小白到大佬

java 双向链表_23张图！万字详解「链表」，从小白到大佬

链表和数组是数据类型中两个重要又常用地基础数据类型&#xff0c;数组是连续存储在内存中的数据结构&#xff0c;因此它的优势是可以通过下标迅速的找到元素的位置&#xff0c;而它的缺点则是在插入和删除元素时会导致大量元素的被迫移动&#xff0c;为了解决和平衡此问题于是…
阅读更多...
安庆机器人编程选_安庆市首届中小学机器人创客竞赛举行 460名选手比智慧拼创新 科技感满满！...

安庆机器人编程选_安庆市首届中小学机器人创客竞赛举行 460名选手比智慧拼创新 科技感满满！...

机器人熟练完成“奥林匹克火种”采集、点燃、传递等动作;“小狗皮皮的智能家园”、智能停车场、多功能智能小车等创意智能作品巧思新奇……11月28日&#xff0c;在2020年安庆市中小学机器人创客竞赛活动现场&#xff0c;可谓科技感满满&#xff0c;炫酷十足。本次比赛由市教育体…
阅读更多...
有季节效应的非平稳序列分析之因素分解

有季节效应的非平稳序列分析之因素分解

目录 6.1 因素分解理论 6.2因素分解模型 6.2.1因素分解模型的选择 6.2.2趋势效应的提取 简单中心移动平均的良好属性 R语言中&#xff0c;使用filter函数可以做简单移动平均 6.2.3 季节效应的提取 6.2.4 X11季节调节模型 X11模型分析步骤&#xff1a; ​ 确定性…
阅读更多...
python变量的使用_python – 如何在变量中使用冒号(:)

python变量的使用_python – 如何在变量中使用冒号(:)

你想要一个 slice() object&#xff1a; index slice(0, 2) print(somelist[index]) slice()模拟您可以在[start&#xff1a;stop&#xff1a;stride]预订语法中指定的start,stop和stride值作为对象. 从文档&#xff1a; Return a 07001 object representing the set of indic…
阅读更多...
for循环执行 mybatis_Mybatis中使用循环遍历

for循环执行 mybatis_Mybatis中使用循环遍历

Mybatis中传参数的方法1.使用注解绑定&#xff0c;mapper.xml 对应方法 不需要指定 parameterType,(推荐使用注解绑定方式)方法接口&#xff1a;List selectByExample(Param("example") CalculateIdeacommissionsum example,Param("roleNameList") List ro…
阅读更多...
指数平滑预测模型

指数平滑预测模型

目录 1.分类 2.简单指数平滑 简单指数平滑预测&#xff1a; 平滑系数的确定 R中实现&#xff1a; 3. Holt两参数指数平滑 4. Holt-Winters三参数指数平滑 5.ARIMA加法季节模型 R实现 例题&#xff1a; 1.分类 2.简单指数平滑 简单移动平均法向前预测1期&#xff1a; …
阅读更多...
Java反射机制API

Java反射机制API

实现 Java 反射机制的类都位于 java.lang.reflect 包中&#xff0c;java.lang.Class 类是 Java 反射机制 API 中的核心类。 java.lang.Class 类 java.lang.Class 类是实现反射的关键所在&#xff0c;Class 类的一个实例表示 Java 的一种数据类型&#xff0c;包括类、接口、枚…
阅读更多...
ARIMA乘法季节模型

ARIMA乘法季节模型

目录 ARIMA乘法季节模型 例题1 例题 2 例题3 ARIMA乘法季节模型 序列的季节效应、长期趋势效应和随机波动之间有着复杂的相互关联性,简单的季节模型不能充分地提取其中的相关关系&#xff0c;这时常采用乘积季节模型。 例题1 我国1949-2008年年末人口总数&#xff08;单…
阅读更多...
R语言acres92 region_[R语言 学习笔记] circlize绘制基因组圈图的原理与使用（一）...

R语言acres92 region_[R语言 学习笔记] circlize绘制基因组圈图的原理与使用（一）...

由于图形大多由点、线、多边形等简单图形组成&#xff0c;circlize实现了在圆形作图区域添加图形的低级绘图函数&#xff0c;通过低级绘图函数的不同组合&#xff0c;可以轻松生成更复杂的图形。这一原则确保了各种类型的高级图形不会受软件包本身的通用性限制&#xff0c;并且…
阅读更多...
python生活中哪些运用_【想把python运用在实际生活中?那么python查询价格方法可以帮助你】- 环球网校...

python生活中哪些运用_【想把python运用在实际生活中?那么python查询价格方法可以帮助你】- 环球网校...

【摘要】通过本次课程可以让python学员了解一下python查询价格方法&#xff0c;对代码编程有个感性的认知。也好让大家能够理性选择&#xff0c;不要盲目跟从&#xff0c;选择适合自己当前阶段的学习内容&#xff0c;循序渐进&#xff0c;以兴趣自我探索为向导&#xff0c;所以…
阅读更多...
机器学习之二分类LDA线性判别（最大特征值法）

机器学习之二分类LDA线性判别（最大特征值法）

目录 一、实验数学原理 二、算法实现步骤 三、实例分析 四、实验结果及分析 一、实验数学原理 线性判别分析((Linear Discriminant Analysis &#xff0c;简称 LDA)是一种经典的线性学习方法&#xff0c;在二分类问题上因为最早由 [Fisher,1936] 提出&#xff0c;亦称 ”Fi…
阅读更多...
Java通过反射访问构造方法

Java通过反射访问构造方法

为了能够动态获取对象构造方法的信息&#xff0c;首先需要通过下列方法之一创建一个 Constructor 类型的对象或者数组。 getConstructors()getConstructor(Class<?>…parameterTypes)getDeclaredConstructors()getDeclaredConstructor(Class<?>...parameterTypes…
阅读更多...
python正则匹配ip_[求助] 正则表达式匹配 IP 地址的问题求助

python正则匹配ip_[求助] 正则表达式匹配 IP 地址的问题求助

需求&#xff1a; 有一个列表&#xff0c;表中元素包含IP地址&#xff0c;空元素&#xff0c;文字。想从这个列表中匹配出特定规律的IP地址&#xff0c;列表见下图 testip [‘’, ‘’, ‘’, ‘IP&#xff08;30位&#xff09;’, ‘’, ‘24.45.127.2’, ‘24.45.127.6’, ‘…
阅读更多...
在布局空间标注的尺寸量不对_卫生间最佳布局尺寸，合理布局做到1毫米都不浪费!...

在布局空间标注的尺寸量不对_卫生间最佳布局尺寸，合理布局做到1毫米都不浪费!...

房子不论大小里面都会配置一个卫生间&#xff0c;卫生间分为大致三个区域&#xff0c;一个是洗涮区&#xff0c;可以在这里每天洗脸刷牙&#xff0c;还有就是淋浴区我们可以每天在这里洗澡&#xff0c;洗掉一天的疲惫。最后就是如厕区。这三大区域各个设计尺寸不同&#xff0c;…
阅读更多...
机器学习 —— 向量机(matlab)

机器学习 —— 向量机(matlab)

目录 一、SVM基本介绍 1.1 SVM算法定义 1.2 SVM和逻辑回归的区别 二、实验数学原理 三、实验算法和实验步骤 四、实例分析 一、SVM基本介绍 1.1 SVM算法定义 SVM全称是supported vector machine&#xff08;支持向量机&#xff09;&#xff0c;即寻找到一个超平面使样本…
阅读更多...
Java通过反射执行方法

Java通过反射执行方法

要动态获取一个对象方法的信息&#xff0c;首先需要通过下列方法之一创建一个 Method 类型的对象或者数组。 getMethods()getMethods(String name,Class<?> …parameterTypes)getDeclaredMethods()getDeclaredMethods(String name,Class<?>...parameterTypes)访问…
阅读更多...
python中的运算符_Python中的运算符

python中的运算符_Python中的运算符

说完常用的数据类型&#xff0c;再来说下运算符。运算符用于将各种类型的数据进行运算&#xff0c;让静态的数据跑起来。 编程语言中的运算大致分为以下几个大类&#xff1a; 算术运算&#xff0c; 用于加减乘除等数学运算 赋值运算&#xff0c;用于接收运算符或方法调用返回的…
阅读更多...
excel如何去重统计户数_公式解读第三期 单元格中数字如何去重排序？

excel如何去重统计户数_公式解读第三期 单元格中数字如何去重排序？

公式解读 第三期 -单元格中数字的去重排序&#xff01;本期涉及到函数较多&#xff0c;你可以一次性根据这个案例&#xff0c;学习多少很多常用 函数的用法&#xff0c;同时我也会讲解思路&#xff0c;这个很重要&#xff0c;思路决定了出路。直接先看一下我们的效果图&#xf…
阅读更多...
机器学习 —— 神经网络（matlab）

机器学习 —— 神经网络（matlab）

目录 一、介绍 二、实验数学原理 三、实验算法和实验步骤 四、实例分析 一、介绍 神经网络是一种运算模型&#xff0c;由大量的节点&#xff08;或称“神经元”&#xff0c;或“单元”&#xff09;和之间相互联接构成。每个节点代表一种特定的输出函数&#xff0c;称为激励…
阅读更多...
Java通过反射访问成员变量

Java通过反射访问成员变量

通过下列任意一个方法访问成员变量时将返回 Field 类型的对象或数组。 getFields()getField(String name)getDeclaredFields()getDeclaredField(String name)上述方法返回的 Field 对象代表一个成员变量。例如&#xff0c;要访问一个名称为 price 的成员变量&#xff0c;示例代…
阅读更多...
最新文章

Copyright @ 2022~2023