1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=”UTF-8″>
5 <title></title>
6 <style type=”text/css”>
7 div { width:600px; margin:20px auto; }
8 p { line-height:1.6;}
9 </style>
10 <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
11 <script type=”text/javascript”>
12 $(function () {
13 //插入图标备用
14 $(‘<img src=”http://simg.sinajs.cn/blog7style/images/common/share.gif” id=”shareit” style=”position:absolute;z-index:1000;display:none”/>’).appendTo($(“body”));
15 //选择文字函数
16 function selctiTxt() {
17 if (document.selection) {//IE
18 return document.selection.createRange().text;
19 } else {//标准
20 return window.getSelection().toString();
21 }
22 }
23 //分享到新浪微博
24 $(“#shareit”).click(function (e) {
25 var e = $.event.fix(e);
26 window.open(“http://v.t.sina.com.cn/share/share.php?searchPic=false&title=” + selctiTxt() + “&url=” + window.location.href);
27 setTimeout(function () {
28 $(“#shareit”).hide();
29 }, 200);
30 e.preventDefault();
31 return false;
32 });
33 //选择问题显示分享图标
34 $(document).bind(“mouseup”, function (e) {
35 var e = $.event.fix(e);
36 var iX = e.pageX,
37 iY = e.pageY;
38 if (selctiTxt().length > 8) {
39 setTimeout(function () {
40 $(“#shareit”).css({
41 “left”: iX + “px”,
42 “top”: iY + “px”
43 }).fadeIn();
44 }, 200);
45 } else {
46 $(“#shareit”).hide();
47 }
48 });
49 //点击别处隐藏
50 $(document).click(function () {
51 $(“#shareit”).hide();
52 })
53 });
54 </script>
55 </head>
56 <body>
57 <div>
58 <p>以前用jQuery写过一个，今天练习用原生的js写了一个，一方面练手另一方面是复习了一些知识点，放上记录下！
59 知识点主要是charCodeAt()以及oninput和onpropertychange ，其余的都是大家比较熟悉的知识了。</p>
60 <p>charCodeAt()返回对应的字符unicode编码，oninput和onpropertychange是用来做到你在文本域中点击右键粘帖的时候触发事件的，因为onkeyup和onchange不能触发右键的粘帖。其中的255这个数字你可以比较的不明白，你可以自己试试除了汉字外的编码都是多大，我大致试了下，其实126也是可以的，好像我没有找到比126的大的非汉字的字符，当然255更好些，汉字都比较的大你可以自己动手试试！
61 另外由于自己太懒布局就从简了^_^</p>
62 </div>
63 </body>
64 </html>
浙公网安备 33010602011771号