前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >更改分享功能的默认图标为自定义图标(二)

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

作者头像
OECOM
发布2020-07-02 11:05:48
1.1K0
发布2020-07-02 11:05:48
举报
文章被收录于专栏:OECOM

在上一篇文章中,我介绍了一种分享的方式,他有一定的局限性,当你要分享的网址有参数且不止一个时,你会发现他分享出去的网址参数不全。这篇文章是对上一篇文章的一个补充,也可以说是另一种写法。我们布好局后,点击相应图标来触发他分享功能的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,然后设置点击事件即可。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-05-08,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档