首先将效果图放上
在页面上添加如下样式,样式的名称自定义即可
<style>
.img_sina_share {
display: none;
position: absolute;
cursor: pointer;
}
</style>
在页面上添加如下js脚本文件
<script type="text/javascript">
var selectTxtShareToSinaWeibo = function (eleShare, eleContainer) {
var eleTitle = document.getElementsByTagName("title")[0];//这个title是在页面上head里面title的内容,强烈建议设置,这样方便网络搜索到自己的网页。
eleContainer = eleContainer || document;
var funGetSelectTxt = function () {
var txt = "";
if (document.selection) {
txt = document.selection.createRange().text; // IE
} else {
txt = document.getSelection();
}
return txt.toString();
};
eleContainer.onmouseup = function (e) {
e = e || window.event;
var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40, top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if (txt) {
eleShare.style.display = "inline";
eleShare.style.left = left + "px";
eleShare.style.top = top + "px";
} else {
eleShare.style.display = "none";
}
};
eleShare.onclick = function () {
var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML) ? eleTitle.innerHTML : "未命名页面";
if (txt) {
window.open('http://service.weibo.com/share/share.php?title=' + txt + '分享来自页面"' + title + '"的文字片段&url=' + window.location.href);
}
};
};
</script>
3.在页面上把盛放的容器放到页面末尾,然后样式定义为上面的样式名称:
<div class="img_sina_share" id="imgSinaShare">
<p>
<img title="将选中内容分享到新浪微博" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" />
<!--<img title="将选中内容分享到QQ空间" src="http://qzonestyle.gtimg.cn/aoi/img/logo/favicon.ico" /></p>--> //还可以添加QQ空间等
</div>
4.最后加载js选中的事件.
<script type="text/javascript">
selectTxtShareToSinaWeibo( document.getElementById("imgSinaShare"));</script>
这样就完成了分享到新浪微博的功能。如果js能力技术强的话,可以进行分享到其他的站点。