动画分享菜单

最新推荐文章于 2024-07-04 10:00:00 发布
最新推荐文章于 2024-07-04 10:00:00 发布
阅读量123 收藏
点赞数
分类专栏： H5 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45743799/article/details/104722552
版权
本文介绍了如何制作一个带有动画效果的分享菜单，包括效果演示及所需的HTML、CSS和JS代码。在开始前需确保引入jQuery库并使用矢量图标。
摘要由CSDN通过智能技术生成

制作一个动画分享的菜单

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

在这里插入图片描述

风叶翩翩
关注
专栏目录
html5 动画选项卡菜单,超酷实用的CSS3 Tab菜单集合
weixin_36231975的博客
06-04 813
本文作者html5tricks，转载请注明出处在网页应用中，有一种既方便用户浏览又节省空间的应用就是Tab菜单了，今天我们精选了一些基于CSS3的Tab菜单，效果很酷，而且比较实用。1、CSS3华丽的Tab菜单 带小图标动画之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单，结合SVG，Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单，这款...
自己动手写js分享插件 [支持https] (QQ空间，微信，新浪微博。。。)
lxw1844912514的博客
09-21 737
转载：https://blog.csdn.net/libin_1/article/details/52424340 废话不多说，传送门：http://download.csdn.net/detail/cometwo/9620943 支持https：https://www.aishandian.com/news-631.html 参考文章：http://www.cnblogs.com...
HTML5 实现分享功能（QQ 微信 微博）
热门推荐
majunzhu的博客
04-02 3万+
转：http://www.guaichai.com/web/htmlcss/7649.html 今天为大家介绍HTML5如何实现分享功能，有需要的小伙伴参考一下，具体内容如下：这是分享按钮：&lt;buttononclick="call()"&gt;通用分享&lt; button&gt;今天为大家介绍HTML5如何实现分享功能，有需要的小伙伴参考一下，具体内容如下：这是分享按钮：123456&lt...
自己动手写js分享插件 [支持https] (可以分享QQ空间，微信，新浪微博。。。)
weixin_33724659的博客
09-16 206
由于百度分享，jiathis 等分享插件在https下均会报错，就萌生了自己动手写一个分享插件的念头，其实实现起来一点都不难，以下代码都已在https网站运行通过，特附上以下代码；还请各位看官不吝赐教：   附上演示效果网址：https://www.aishandian.com/jiekuan_zhishi-979.html 动画实现效果代码 $(document).on("c...
pc端常用的分享QQ、QQ空间、微信、微博、复制链接
qq_38986504的博客
08-28 1万+
pc端常用的分享QQ、QQ空间、微信、微博、复制链接 网上太多的关于这个的了，但是都没有符合我要求的插件。只好自己写，顺带分享出来给小白们 直接上代码了用的是最基础的代码 这个下载好放到对应的位置 qrcode.min.js（./js/qrcode.min.js） 代码块 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head...
自己动手写js分享插件 [支持https] (QQ空间，微信，新浪微博。。。)
黄沙百战穿金甲，不破楼兰终不还。
09-03 1万+
微信分享效果：QQ空间分享效果：HTML<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery弹出社交分享按钮</title> <link rel="stylesheet" h
iOS 弹性动画之弹出分享菜单的实现
时光的博客
05-03 4139
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)op...
qt之滑动菜单动画效果
kbq的博客
03-06 2405
一、前言 一个美观的让人赏心悦目的程序开始，就是打开软件之后第一眼，只有让人达到了为之一叹，哇塞，后面再有不满意度也会大大减小，今天就分享一个菜单动画效果的方式。 二、环境 qt5.7mingw windows8 三、正文 首先看一下效果gif 功能： 1.可以通过鼠标滑动切换动画，可以通过按键点击切换动画，正常是自动2秒切换一次动画。 2.点击最顶端的图片可以进入相应的...
【好看的CSS动画分享】抽屉式菜单栏CSS
qq_38192105的博客
12-08 726
CSS动画:抽屉式菜单展示
十款绚丽的前端 CSS 菜单导航动画
最新发布
leyang0910的博客
07-04 2451
CSS汉堡菜单是一种非常流行的PC端和移动端web菜单风格，特别是移动端，这种风格的菜单应用更为广泛。这款菜单便非常适合在手机App上使用，它的特点是当顶部菜单弹出时，页面内容将会配合菜单出现适当的联动，让整个页面变得十分协调。今天要给大家分享10个绚丽而实用的前端CSS菜单导航动画，每一个网页菜单组件都通过我的精挑细选，都非常富有创意，包括侧边栏菜单、3D菜单、下拉菜单和右键菜单等等类型。
js实现的动画导航菜单效果代码
11-22
本文实例讲述了js实现的动画导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款简单的动画导航菜单效果，每个菜单项的下边有一个横线会随着鼠标的对应而自动滑动，指明当前菜单的位置。 运行效果截图如下...
swift-KYShareMenu-带弹性动画的分享菜单
08-15
Swift-KYShareMenu 是一个基于 Swift 语言开发的开源项目，专为 iOS 应用程序设计的具有弹性动画效果的分享菜单。这个组件提供了一种优雅的方式来展示分享选项，通过弹性的过渡动画增强了用户体验，使得分享操作更加...
菜单 弹出菜单 分享菜单
07-09
本项目“J2MenuViewController”似乎是一个专门用于iOS平台的菜单组件库，允许开发者方便地创建和管理各种类型的菜单，如常规菜单、浏览器菜单、弹出菜单以及分享菜单。下面将详细探讨这些菜单类型及其在应用开发中...
商品销售管理系统
weixin_45743799的博客
11-22 1万+
用JSP servlet和jquery以及SQLServer数据库实现商品销售管理系统。 功能详解： 1.查询商品 2.添加商品 3.删除商品 4.添加销售记录 5.查看销售记录 效果演示： 进入界面 商品显示页面 删除提示 销售记录查询 商品销售系统需要SQLServer数据库和程序两大部分 一：设计并实现数据库 二：程序设计 在程序正式开始之前先看一下目录结构吧 ==特别注意：==...
Sublime Text 3 详细安装教程
weixin_45743799的博客
03-17 9001
Sublime Text 3 详细安装 下载 官网下载地址https://www.sublimetext.com/3 安装 1 . 下载完成之后安装程序自动运行，默认安装路径，不要修改（如果修改安装路径后期需要配置环境变量） 注意：最好使用默认填入的安装路径，使用此路径无需配置环境变量。 2 . 选择“Add to explorer context menu”，把它加入右键快捷菜单。 3 ....
Js代码大全
weixin_45743799的博客
02-11 8516
Js常用编码 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKe...
IDEA MySql之增删改查
weixin_45743799的博客
12-03 5598
用IDEA开发工具和MySql实现登录和增删改查的功能。 功能分析： 1.登录 2.增加 3.删除 4.修改 5.查询 效果演示 登陆页面 信息显示页面 一 ：数据库设计 MySql数据库名为 school 登录表名为 login 信息表名为 student 登录表插入合适的数据 信息表自己插入 二 ： 代码展示 目录结构 注意：我们需要引入相关架包 完整代码 信息类 Student...
点击按钮切换图片
weixin_45743799的博客
11-03 5590
点击按钮时将当前显示的图片切换为指定要显示的图片 效果图演示 未点击更换图片之前显示的图片 点击更换图片之后 程序详解： 准备两张互相切换的图片 给更换图片按钮添加点击事件 把两张图片放在一个数组里 点击按钮后执行判断如果是第一张图片就换成第二张，如果是第二张图片就换成第一张 代码演示 注意： 我的两个图片命名为0.jpg和1.jpg <!DOCTYPE html> <h...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值