关键词：
//首先是获取元素距离浏览器顶部和左边的距离
function getPos(obj) { var pos = {left:0, top:0}; while (obj) { pos.left += obj.offsetLeft; pos.top += obj.offsetTop; obj = obj.offsetParent; } return pos; }
//创建一个div 用来当做tips 存放内容
var div = document.createElement('div');
//that 指的是鼠标浮动时的元素 title指tips显示的内容 赋给div用的
function setTips(that,title){
var pos = getPos(that);
var maxWidth = 0 ;
var minWidth = 0 ;
var sreenX = window.innerWidth;
var sreenY = window.innerHeight;
var x = pos.left;
var y = pos.top;
var h = $(that).height();
var w = $(that).width();
div.innerHTML = title;
div.className = 'tip';
div.style.position = 'absolute';
div.style.top = y + h + 10 +'px';
div.style.left = x + (parseInt(w/8)) +'px';
maxWidth = sreenX - (x + (parseInt(w/8)));
div.style.maxWidth = maxWidth +'px';
div.style.zIndex = 100;
// console.log(e.screenX,e.screenY);
document.body.appendChild(div);
}
css部分
.tip{
width:auto;
height:auto;
background: #fff;
color:#000;
padding:3px;
border:1px solid #ddd;
border-radius:3px;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
background-image: radial-gradient(circle,rgba(246,247,243,0.9),rgba(246,247,243,1.0));
}
.tip:before {
position: absolute;
top: -4px;
left: calc(10% - 5px);
width: 10px;
height: 10px;
background: rgba(246,247,243,1.0);
box-shadow: -2px -2px 0 -1px #c4c4c4;
content: "";
transform: rotate(45deg);
}
js小tips之变量声明提前
只讨论变量声明的提前：理解这段代码：varname="aaa";functiontest(){alert(typeofname);varname="bbb";alert(typeofname);}test();-答案：undefined,string-分析：1、两个原理：a、JS中变量的声明会提前；b、JS的作用域原理以及对变量的搜索方式2、第一次... 查看详情
js小tips之tostring返回变量类型
Object.prototype的toString()可以返回变量类型而一般都重写了这个方法借助call()functionclassOf(x){if(x===null)return"NULL";if(x===undefined)returnundefined;returnObject.prototype.toString.call(x).slice(8,-1);}varx=13;console. 查看详情
小tips：js之浅拷贝与深拷贝
浅拷贝：functionextendCopy(p){ varc={}; for(variinp){ c[i]=p[i]; } returnc;}深拷贝：functiondeepCopy(p,c){ varc=c||{}; for(variinp){ if(typeofp[i]===‘object‘){ c[i]=(p[i].constructor===Array)?[]:{ 查看详情
uni-app基础组件—视图容器（viewcontainer）
...ew提供了两个特殊事件：Tips:示例： 我们在使用原生组件，比如map组件时，map会覆盖别的基础组件，遮挡住别的视图，出现在视图最顶层，这时候使用以下两种视图，就能做到覆盖该原生组件。Tips： 查看详情
小tips；css和js“通信”(代码片段)
假如我有一个需求，必须通过js执行动画，还得让css去配合。拿一个简单却不太恰当的例子来说：opacity‘一闪一闪’效果的实现。传统Vue必须要利用“动态style”。<template> <h1:style="opacity:opacity">Vue<... 查看详情
tips_of_js之利用js实现水仙花数的寻找与实现斐波那契数列
一、水仙花数1、啥是水仙花数？水仙花数是指一个n位正整数(n≥3)，它的每个位上的数字的n次幂之和等于它本身。（例如：1^3+5^3+3^3=153）2、利用JS实现对水仙花数的寻找。这一次我们寻找水仙花数的方法，是JS中非常基础的while... 查看详情
重新封装了layer.tips，自定义跟随弹窗
方法重新封装了layer.tips使用前，请仔细阅读此文本*@Author:羽渡尘*@两种实现方法*@需要引用jquery.js、layer.js、ydcTip.js*@统一可传递的参数形式letoption=/*加载您的自定义样式文件(注意*样式文件必须在layer/skin目录下)*/extend:‘yourskin/yo... 查看详情
d3-tip中show在自己调用时需要改变this值
.../d3.v4.min.js"></script><scriptsrc="https://cdn.bootcss.com/d3-tip/0.9.1/d3-tip.js"></script>constsvg=d3.select(‘body‘).append(‘svg‘).attr(‘width‘,500).attr(‘height‘,500);letdataSymbol=[d3.symbolCircle,d3.symbolCross,d3.symbolDiamond,d3.symbolSquare,d3.symbolStar... 查看详情
小tips：在js语句执行机制涉及的一种基础类型completion(代码片段)
看一个如下的例子。在函数foo中，使用了一组try语句。在try中有return语句，finally中的内容还会执行吗？functionfoo()tryreturn0;catch(err)finallyconsole.log("a")得到的结果是：a0。根据结果可以看出finally执行了，return语句也生效了。虽然retur... 查看详情
原生js实现ajax
...来说，大家可能都会习惯用JQuery提供的Ajax方法，但是用原生的js怎么去实现Ajax方法呢？ JQuery提供的Ajax方法：1$.ajax({2url:,3type:‘‘,4dataType:‘‘,5data:{67},8success:function(){910},11error:function(){1213}14}) 原生js实现 查看详情
原生js总结
1.js基本数据类型number string boolean underfined null 2.查找文档中的特定元素document.getElementById("id");document.getElementByTagName("div");document.getElementByClassName("aa"); //有兼容问题document.getEle 查看详情
21000+行原生js的学习之路（第一篇）
...但是总感觉功力还是不够（哈哈），前段时间偶然接触到原生JS代码，边对此产生了兴趣，学习原生JS对于我们深入了解js有很好的帮助比如函数的参数类型、返回值类型等。下来先介绍一下原生JS的语法结构，来帮助大家更好的... 查看详情
原生js和jquery操作dom的区别小结
一.Js原生对象和jQuery实例对象的相互转化:(1).原生JS对象转JQ对象: $(DOM对象);(2).JQ对象转原生JS对象:$(DOM对象).get(index);//注意区分eq(index)是jQuery实例对象;直接下标访问,$(DOM对象)[index]; 二.两者操作DOM的对比一、创建元素节点... 查看详情
ios下js和原生交互，函数互调
现在越来越多的APP都是H5和原生混合开发，这样确实方便快捷，但是H5的部分总避免不了很多与原生的交互，原生调JS函数还比较简单，原生的API函数stringByEvaluatingJavaScriptFromString就可以完成需求，但是JS调原生的函数，系统没有... 查看详情
原生js常用代码汇总
数组相关varcodes=newArray();//创建数组codes.length//数组长度 动态插入数组codes.push(value); 查看详情
js实现获取父元素下的子元素，如下的代码，我想通过getelementbyclassname获取到标签table，
然后获取到tip2，而不是直接getElementByClassName("tip2")，这个该怎么写哇求大神指教<body><tableclass="tbeTarget"><tr><tdclass="tips1">12345abcd</td><tdclass="tips2">23456fvbg</td></tr></t... 查看详情
使用原生js写ajax
//使用原生js封装ajax//兼容xhr对象functioncreateXHR(){if(typeofXMLHttpRequest!="undefined"){//非IE6浏览器returnnewXMLHttpRequest();}elseif(typeofActiveXObject!="undefined"){//IE6浏览器varversion=["MSXML2.XM 查看详情
用原生js实现ajaxjsonp
一、原生js实现ajax$.ajax({url:‘‘,type:‘post‘,data:{name:‘zhaobao‘,age:20},dataType:‘json‘,success:function(data){},error:function(){}})functionajax(options){options=options||{};options.type=(options.type||" 查看详情