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 = "";
        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(
					'
  • + i + '">' + n1 + $(obj).text() + '
  • '
    ); n1++; n2 = 1; n3 = 1; } if ($(obj).get(0).tagName == 'H2') { $('#ContentMenuId') .append( '
  • + i + '">' + (n1 - 1) + '.' + n2 + $(obj).text() + '
  • '
    ); n2++; n3 = 1; } if ($(obj).get(0).tagName == 'H3') { $('#ContentMenuId').append( '
  • + i + '">' + (n1 - 1) + '.' + (n2 - 1) + '.' + n3 + $(obj).text() + '
  • '
    ); n3++; } } function initLeftMenu() { $('#docContentMenuId').affix({ offset : { top : 50, bottom : 5 } }) $('h1,h2,h3', '#docContentsId').each(function(i, obj) { creatMenus(i, obj); $(obj).before(""); $('#linkmark' + i).bind('click', function() { $('html,body').animate({ scrollTop : $("a[name='mark" + i + "']").offset().top - 100 }, 500); }); });

    你可能感兴趣的:(前端,js,javascript)