首页 > javascript > 正文


2015-08-02 12:52:22   来源:   评论:0 点击:

Dshare是专属大前端的分享模块,浩子码。首先,大前端用过Bshare、百度分享等分享插件。有以下感触:庞大,加载的图片很大,代码很多;给网

Dshare是专属大前端的分享模块,浩子码。

首先,大前端用过Bshare、百度分享等分享插件。有以下感触:

  1. 庞大,加载的图片很大,代码很多;
  2. 给网站新增3个以上的请求;
  3. 有的自带分享统计,对80%的站点来说没有必要,加载的js可以省了;

对此,有了一个想法,写一个适合大众基本要求的分享模块,让站长具有最高自定义权力,于是,Dshare诞生了(其实也就是一点点js,被我忽悠大了,哈哈)。

Dshare分享模块代码:

//Dshare	dshare();	function dshare() {		var thelink = encodeURIComponent(document.location),			thetitle = encodeURIComponent(document.title.substring(0,60)),			windowName = '分享到',			param = getParamsOfShareWindow(600, 560),			//各大SNS站点的分享机制,可自定义			ds_tqq = 'http://v.t.qq.com/share/share.php?title=" + thetitle + "&url=' + thelink + '&site=',			ds_qzone = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + thelink + '&title=",			ds_tsina = "http://v.t.sina.com.cn/share/share.php?url=' + thelink + '&title=" + thetitle,			ds_douban = "http://www.douban.com/recommend/?url=' + thelink + '&title=" + thetitle,			ds_renren = "http://share.renren.com/share/buttonshare?link=' + thelink + '&title=" + thetitle,			ds_kaixin = "http://www.kaixin001.com/repaste/share.php?rurl=' + thelink + '&rcontent=' + thelink + '&rtitle=" + thetitle,			ds_facebook = "http://facebook.com/share.php?u=' + thelink + '&t=' + thetitle,			ds_twitter = 'http://twitter.com/share?url=' + thelink + '&text=' + thetitle;	 	$('.dshare').each(function() {			$(this).attr('title',windowName + $(this).text());			$(this).click(function() {				var httpUrl = eval($(this).attr('class').substring($(this).attr('class').lastIndexOf('ds_')));				window.open(httpUrl, windowName, param);			});		});		function getParamsOfShareWindow(width, height) {			return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=',(screen.width-width)/2,',top=',(screen.height-height)/2].join('');		}	}

jQuery实现,有需要的可以转为js版本

html部分:

<div>分享到:<a>腾讯微博</a><a>QQ空间</a><a>新浪微博</a><a>人人网</a><a>开心网</a><a>豆瓣</a><a>Facebook</a><a>Twitter</a></div>

css部分:

.dshare{padding-left:20px;margin-right:8px;height:16px;line-height:16px;display:inline-block;cursor:pointer;background:url(../img/share.png) no-repeat}.ds_tqq{background-position:0 0}.ds_tsina{background-position:0 -16px}.ds_douban{background-position:0 -32px}.ds_facebook{background-position:0 -48px}.ds_twitter{background-position:0 -64px}.ds_renren{background-position:0 -112px}.ds_kaixin{background-position:0 -128px}.ds_qzone{background-position:0 -96px}

所需图片:

http://www.daqianduan.com/wp-content/themes/d4/img/share.png

记得改成你所需要的
如何使用,我就不多说了,代码注释的很详细!!
PS:只是简单的实现基本需求,更多交互有待你的参与。

转载请注明出处大前端 » 自码分享到SNS模块-Dshare 更简洁 更友好

相关热词搜索:

上一篇:
下一篇:

分享到: 收藏
评论排行