zoukankan      html  css  js  c++  java
  • js 实现 浏览器控制台 Elements 选框功能

    移动鼠标看看

    var DomOutLine =  jQuery('<div />',{
    	id: 'DomOutLine',
    	style: `transition: all .2s;background:rgba(0,0,0,.5);position:absolute;z-index: 1000000;pointer-events: none;`
    });
    var DomInfo = jQuery('<div />',{
    	id: 'DomInfo',
    	style: `
    		background: #333740;
    	    position: absolute;
    	    z-index: 1000001;
    	    pointer-events: none;
    	    height: 26px;
    	    border: 1px solid #fff;
    	    border-radius: 3px;
    	    font-size: 12px;
    	    line-height: 26px;
    	    color: #fff;
    	    padding: 0 10px;
    	    top: -26px;
    	    box-sizing: border-box;
    	`
    });
    DomInfo.appendTo(DomOutLine);
    jQuery('body').append(DomOutLine);
    jQuery('body').bind('mousemove',function(e){
    	var d = e.target.getBoundingClientRect();
    	$('#DomOutLine').css({
    		bottom:d.bottom,
    		height:d.height,
    		left:d.left,
    		right:d.right,
    		top:d.top+jQuery(window).scrollTop(),
    		d.width
    	})
    	var idTxt = '';
    	if(e.target.id){
    		idTxt = '#'+e.target.id;
    	}
    	var classTxt = '';
    	if(e.target.classList){
    		e.target.classList.forEach( function(element, index) {
    			classTxt += '.'+element;
    		});
    	}
    	$('#DomInfo').text(`${e.target.nodeName.toLowerCase()}${idTxt}${classTxt}|${d.width}x${d.height}`)
    });
    

      

  • 相关阅读:
    SQL Server 配置管理器不见了
    SQL常用函数使用
    数据库优化
    关于百度地图js api的getCurrentPosition定位不准确的解决方法
    uni-app中使用外部字体
    不定高度,元素垂直居中
    css实现的鼠标悬浮提示
    导入
    下载
    百度地图在地图上标点显示数字
  • 原文地址:https://www.cnblogs.com/luozhangshuai/p/8117776.html
Copyright © 2011-2022 走看看