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

2020-07-02 11:05:48 浏览数 (1)

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

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

代码语言:javascript复制
<!-- 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属性值小于其他层的值,让他位于其它层之下,这样就达到了隐藏的效果。

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

代码语言:javascript复制
<img onclick="kongjian()" src="img/weixin.jpg">

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

代码语言:javascript复制
<script>
	function kongjian(){
		document.getElementById("kongjian").click();
	}
  </script>

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

0 人点赞