js划词效果和文档插件生成导航栏的代码

//划词功能
    let workType = false; //当前划词状态
    let workTool = false; //当前取词状态
        document.onmousedown = function(event) {
            var event = event || window.event;
            if ((event.button == "0" || event.button == "1") && !workTool) {
                if (workTool) { //如果用户在取词则不进行二次划词操作
                    return 0;
                }
                if (document.getElementById("bblock") && !workTool) {
                    document.body.removeChild(document.getElementById("bblock"));
                }
                workType = true;
                document.onmouseup = function(event) {
                    if (workType) {
                        workType = false;
                        var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
                        txt = txt + "";
                        txt = txt.replace(/^\s+|\s+$/g, "");
                        if (txt != "") {
                            creatDiv(txt);
                        }
                    }
                }
            }

        }

    function mousePosition(evt) { //当前鼠标位于页面位置
        evt = evt || window.event;
        var xPos = evt.pageX;
        var yPos = evt.pageY;
        return [xPos, yPos];
    }

    function creatDiv(str) {
        var arr = mousePosition();
        var newDiv = document.createElement('div'); //创建一个div元素;
        var newContent = document.createTextNode(str);
        newDiv.appendChild(newContent);
        newDiv.id = "bblock";
        newDiv.style.width = "50px";
        newDiv.style.position = "absolute";
        newDiv.style.left = arr[0] + 10 + "px";
        newDiv.style.top = arr[1]- 25  + "px";
        newDiv.style.zIndex = "1000";
        newDiv.innerHTML = "<img id='openTag' src='text/images/total.png' οnclick='openDilog(\""+str+"\")'>";
        var bo = document.body; //获取body对象
        bo.insertBefore(newDiv, bo.lastChild); //动态插入到body中
        bingDiv();
    }
    function bingDiv() {
        document.getElementById("bblock").onmouseover = function() {
            workTool = true;
        }
        document.getElementById("bblock").onmouseout = function() {
            workTool = false;
        }
    }

//html代码
<ul id="ContentMenuId"></ul>
//下面是导航栏生成的代码
	var n1 = 1;
	var n2 = 1;
	var n3 = 1;
	function creatMenus(i, obj) {
		if ($(obj).get(0).tagName == 'H1') {
			$('#ContentMenuId').append(
					'<li class="doc_vavigat_h1"><a  id="linkmark'
							+ i + '">'
							+ n1 + $(obj).text() + '</a></li>');
			n1++;
			n2 = 1;
			n3 = 1;
		}
		if ($(obj).get(0).tagName == 'H2') {
			$('#ContentMenuId')
					.append(
							'<li class="doc_vavigat_h2"><a  id="linkmark'
									+ i + '">'
									+ (n1 - 1) + '.' + n2 + $(obj).text()
									+ '</a></li>');
			n2++;
			n3 = 1;
		}
		if ($(obj).get(0).tagName == 'H3') {
			$('#ContentMenuId').append(
					'<li class="doc_vavigat_h2"><a  id="linkmark'
									+ i + '">'
							+ (n1 - 1) + '.' + (n2 - 1) + '.' + n3
							+ $(obj).text() + '</a></li>');
			n3++;
		}
	}
	function initLeftMenu() {
		$('#docContentMenuId').affix({
			offset : {
				top : 50,
				bottom : 5
			}
		})
		$('h1,h2,h3', '#docContentsId').each(function(i, obj) {
			creatMenus(i, obj);
			$(obj).before("<a name='mark" + i + "'></a>");
			$('#linkmark' + i).bind('click', function() {
				$('html,body').animate({
					scrollTop : $("a[name='mark" + i + "']").offset().top - 100
				}, 500);
			});
		});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值