更改分享功能的默认图标为自定义图标（二）

OECOM

发布于 2020-07-02 03:05:48

1.2K00

代码可运行

文章被收录于专栏：OECOMOECOM

运行总次数：0

代码可运行

在上一篇文章中，我介绍了一种分享的方式，他有一定的局限性，当你要分享的网址有参数且不止一个时，你会发现他分享出去的网址参数不全。这篇文章是对上一篇文章的一个补充，也可以说是另一种写法。我们布好局后，点击相应图标来触发他分享功能的a标签，这样也可以实现分享功能，并且简单可靠。下面我来给大家说一下具体的方法。

我们还用jiathis来做例子。首先我们需要引入他给好的代码。

<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32" >
	<a id="kongjian" class="jiathis_button_qzone" style="margin-right:10px;"></a>   
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_cqq"></a>
	<a class="jiathis_button_douban"></a>
	
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

将这段代码插入到</body>标签之前。有的朋友会说了，这样引入之后他的图标就正常显示出来了，要怎样将他隐藏呢，其实很简单，给他设置css属性，让他非常的小，并且他的z-index属性值小于其他层的值，让他位于其它层之下，这样就达到了隐藏的效果。

下面就是我们要点击的图片了

<img onclick="kongjian()" src="img/weixin.jpg">

给这个图片设置一个onclick事件，在js中设置一下，看一下代码。

<script>
	function kongjian(){
		document.getElementById("kongjian").click();
	}
  </script>

这样就实现了点击图片时触发点击a标签的效果。这只是其中一个例子，大家有兴趣的可以多试试其他的，只要给相应的a标签设置id，然后设置点击事件即可。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-05-08，如有侵权请联系 cloudcommunity@tencent.com 删除

css

onclick

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

onclick

登录后参与评论

暂无评论

更改分享功能的默认图标为自定义图标（二）

更改分享功能的默认图标为自定义图标（二）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐