关于技术您现在的位置是:首页 > 关于技术
选中文字分享至微博
2019-02-02 13:28:05 【Javascript】 681 人已围观 0 条评论
简介
今天我们用JS简单地实现选中文字分享,比如分享到新浪微博。 我们要实现的效果呢,就是下面这样的: 简单分析下就 […]
今天我们用JS简单地实现选中文字分享,比如分享到新浪微博。
我们要实现的效果呢,就是下面这样的:
简单分析下就是,先选中文字(10个字以上,可以在js里设置最少选中字数),然后松开鼠标,在鼠标的位置显示一个微博小图标,点击小图标即可跳转到微博分享页面,然后登陆微博账号即可分享啦。
Html结构的话就是一个简单的p标签,一段文字而已。
页面结构CSS样式的话,自己按需定义就好了。
主要是JS的实现,原生JS简单实现:
window.onload = function(){ // 获取选中文字 function selectText(){ if(document.selection){//ie return document.selection.createRange().text; } else{//标准 return window.getSelection().toString(); } } // 获取元素 var oP = document.getElementById('p1'); var oDiv = document.getElementById('div1'); // 添加事件 oP.onmouseup = function(ev){ var ev = ev || window.event; var left = ev.clientX; var top = ev.clientY; // 如果选取文字长度大于10,显示新浪小图标,定位到鼠标的位置 if(selectText().length > 10){ setTimeout(function(){ oDiv.style.display = 'block'; oDiv.style.left = left + 'px'; oDiv.style.top = top + 'px'; },100); } else{ oDiv.style.display = 'none'; // 否则不显示图标 } }; // 阻止事件冒泡 oP.onclick = function(ev){ var ev = ev || window.event; ev.cancelBubble = true; }; // 点击页面其它地方隐藏小图标 document.onclick = function(){ oDiv.style.display = 'none'; }; // 点击小图标跳转网页至微博分享页面 oDiv.onclick = function(){ window.location.href = 'https://service.weibo.com/share/share.php?url=https://www.baidu.com/&title=' + selectText(); }; }
以上就实现了,选中文字分享至新浪微博啦,想试一下手感的狠戳这里吧。相信大家还有很多好的方法,我们,加油!
Over~拜
上一篇: 封装一个模态弹出框
下一篇: 封装插件之-tab选项卡