虚拟定位提示网络异常

先来IE的，这是最大的用户群，如果这部分开发不出来，基本可以说不用做了。IE虽然有Gradient滤镜，但对比其他浏览器的实现特弱，没有多重渐变（stop-color），不能实现角度渐变，而且还经常失效。我的思路是这样，假如有一个带文本的DIV，要实现多重线性渐变，我们首先得把它里面的文本取出来，然后里面放几个DIV，有几重就放几个，然后把它们渐变。如果是垂直渐变，这好办，什么也不用做，只需设置其滤镜与各个高就行了。如果水平，就让其浮动或绝对定位，放到适当的位置，设置其滤镜与宽。但渐变滤镜竟然会在浮动后或定位后失效，这是在使用透明滤镜时闻所未闻的。没有办法，祭出上古神器table。但设置长与宽时，使用style来设置是不顶用的，一定要用DOM属性。渐变则由它的td元素负责。为了去除table元素与td元素之间，td元素与其内容之间的空白，我们还得用到cellPadding与cellSpacing。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

safari，chrome与opera打算都用SVG实现。为了减少函数的长度，特意搞了两个辅助函数。

复制代码代码如下:

 
var createSVG = function(tag){ 
return document.createElementNS("http://www.w3.org/2000/svg",tag); 
}; 
var attr= function(node,bag){ 
for(var i in bag){ 
if(bag.hasOwnProperty(i)) 
node.setAttribute(i,bag[i]) 
} 
}; 
var COSgradient = function(entity,stops,width,height,type){ 
var svg = createSVG("svg"); 
attr(svg,{width:width+"px",height:height+"px"}) 
entity.appendChild(svg); 
. 
var defs = createSVG("defs"); 
svg.appendChild(defs); 
var linearGradient = createSVG("linearGradient"); 
defs.appendChild(linearGradient); 
attr(linearGradient,{id:"nasami",x1:"0%",y1:"0%"}) 
if(type){ 
attr(linearGradient,{x2:"100%",y2:"0%"}) 
}else{ 
attr(linearGradient,{x2:"0%",y2:"100%"}) 
} 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
var offset = stops[i].split(",")[0] + "%", 
color = stops[i].split(",")[1], 
stop = createSVG("stop"); 
attr(stop,{offset:offset,"stop-color":color}); 
linearGradient.appendChild(stop); 
} 
var rect = createSVG("rect"); 
svg.appendChild(rect); 
attr(rect,{x:"0px",y:"0px",width:width+"px",height:height+"px",fill:"url(#nasami)"}); 
} 

firefox则利用其私有属性：

复制代码代码如下:

 
var FFgradient= function(entity,stops,width,height,type){ 
var cssText = ";background: -moz-linear-gradient(" 
cssText += type? "top,bottom," :"left,right,"; 
. 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
var offset = stops[i].split(",")[0] + "%", 
color = stops[i].split(",")[1]; 
cssText += "color-stop("+[offset,color]+")," 
} 
cssText = cssText.replace(/,$/,"")+") no-repeat;"; 
entity.style.cssText = cssText+"width:"+width+"px;height:"+height+"px;" 
} 

不过今天研磨一下，发现firefox还是支持SVG的线性渐变的，因此纠正我原来的观点。上面的函数只是作用一种实现手段放在这里，它并没有整合到我最终的版本中（虽然它比SVG实现短很多。）这样一来，在老一点版本的firefox中我们也能实现线性渐变了。
下面这个运行框里的渐变效果可在所有主流浏览器中正常运作。

<!doctype html> 
<title>javascript线性渐变 by 司徒正美</title> 
<meta charset="utf-8"/> 
<meta name="keywords" content="javascript线性渐变 by 司徒正美" /> 
<meta name="description" content="javascript线性渐变 by 司徒正美" /> 
<style type="text/css"> 
#gradient{ 
width:800px; 
height:100px; 
border:1px solid red; 
} 
</style> 
<script type="text/javascript"> 
var attr= function(node,bag){ 
for(var i in bag){ 
if(bag.hasOwnProperty(i)) 
node.setAttribute(i,bag[i]) 
} 
}; 
//④使用IE滤镜实现渐变 
function setFilter(el,start,end,type){ 
el.style.filter = "progid:DXImageTransform.Microsoft.Gradient(enabled='true',startColorstr="+start+",GradientType="+type+", endColorstr="+end+")"; 
} 
//③每个渐变体的实现，是用table还是div 
function createStop(parent,top,left,width,height,type){ 
if(type){ 
var table = document.createElement("table"); 
parent.appendChild(table); 
var tr = table.insertRow(0), 
td = tr.insertCell(0) 
attr(table,{height:height+"px",width:width+"px",cellPadding:0,cellSpacing:0}) 
css(table,{position:"absolute",top:top+"px",left:left+"px"}); 
td.innerHTML =" "; 
return td; 
} 
var div = document.createElement("div"); 
parent.appendChild(div); 
css(div,{height:height+"px",width:width+"px"}) 
return div; 
}; 
var createSVG = function(tag){ 
return document.createElementNS("http://www.w3.org/2000/svg",tag); 
}; 
var css = function(node,bag){ 
var str = ";" 
for(var i in bag){ 
if(bag.hasOwnProperty(i)) 
str += i+":"+bag[i]+";"; 
} 
node.style.cssText = str; 
} 
var SVGgradient = function(entity,stops,width,height,type){ 
var svg = createSVG("svg"); 
attr(svg,{width:width+"px",height:height+"px"}) 
entity.appendChild(svg); 
var defs = createSVG("defs"); 
svg.appendChild(defs); 
var linearGradient = createSVG("linearGradient"); 
defs.appendChild(linearGradient); 
attr(linearGradient,{id:"nasami",x1:"0%",y1:"0%"}) 
if(type){ 
attr(linearGradient,{x2:"100%",y2:"0%"}) 
}else{ 
attr(linearGradient,{x2:"0%",y2:"100%"}) 
} 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
var offset = stops[i].split(",")[0] + "%", 
color = stops[i].split(",")[1], 
stop = createSVG("stop"); 
attr(stop,{offset:offset,"stop-color":color}); 
linearGradient.appendChild(stop); 
} 
var rect = createSVG("rect"); 
svg.appendChild(rect); 
attr(rect,{x:"0px",y:"0px",width:width+"px",height:height+"px",fill:"url(#nasami)"}); 
} 
//②渐变的具体实现，确定要使用多少渐变体，每个渐变体的颜色（是渐变色还是纯色）与长宽坐标 
var IEgradient = function(entity,stops,width,height,type){ 
var offset,color,beforeColor,stopWidth,stopHeight,left,top,stop; 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
offset = stops[i].split(",")[0]; 
color = stops[i].split(",")[1]; 
stopWidth = (offset/100 * width).toFixed(1); 
stopHeight = (offset/100 * height).toFixed(1); 
switch(i){ 
case 0 : 
beforeColor = color; 
left = stopWidth; 
top = stopHeight; 
if(offset != 0){ 
//插入一个纯色的table 
stop = type? createStop(entity,0,0,stopWidth,height,type) : 
createStop(entity,0,0,width,stopHeight,type); 
css(stop,{background:color}); 
} 
break; 
case l-1: 
//先插入一个渐变的table 
var w2 = ((100-offset)/100 * width).toFixed(1), 
h2 = ((100-offset)/100 * height).toFixed(1), 
stop = type? createStop(entity,0,left,width - left -w2,height,type): 
createStop(entity,0,0,width,height - top -h2,type); 
setFilter(stop,beforeColor,color,type); 
if(offset != 100){ 
//再插入一个纯色的table 
var stop2 = type? createStop(entity,0,stopWidth,w2,height,type): 
createStop(entity,0,0,width,h2,type); 
css(stop2,{background:color}); 
} 
break; 
default : 
//插入一个渐变的table 
stop = type ? createStop(entity,0,left,stopWidth - left,height,type) : 
createStop(entity,0,0,width,stopHeight-top,type); 
setFilter(stop,beforeColor,color,type); 
beforeColor = color; 
left = stopWidth; 
top = stopHeight; 
break; 
} 
} 
} 
//①渐变的主体函数 
var gradient = function(id){ 
var entity = document.getElementById(id), 
options = arguments[1] || {}, 
width = options.width, 
height = options.height, 
type = options.type , 
stops = options["color-stop"]; 
css(entity,{position:"relative"}); 
var content = entity.innerHTML; 
entity.innerHTML = ""; 
!+"\v1"? IEgradient(entity,stops,width,height,type): 
SVGgradient(entity,stops,width,height,type) 
var contentDiv = document.createElement("div"); 
css(contentDiv,{position:"absolute",top:0,left:0}) 
contentDiv.innerHTML = content; 
entity.appendChild(contentDiv); 
} 
window.onload = function(){ 
gradient("gradient",{width:800,height:100,type:1,"color-stop":["0,red","16,orange","32,yellow","48,green","64,blue","80,indigo","100,violet"]}) 
} 
</script> 
<div id="gradient">javascript线性渐变 by 司徒正美 实现多重水平渐变效果</div> 
https://developer.mozilla.org/en/SVG/Tutorial/Fill_Stroke_and_Gradients

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

再把它做成类。扼要说明一下：它的第一个参数为IE，第二个为哈希。哈希中的各参数都为必选的，width，height的单位为px；type为0或者1，0代表垂直，1为水平；color-stop代表渐变体，由一个字符串数组构成，每个字符串都是由数字加逗号加颜色值组成，数字表代偏移量，单位为%，颜色值可以是red,green等名词，也可以是六位或三位的哈希值。渐变体至少要有一个。

复制代码代码如下:

 
new Gradient("gradient",{width:800,height:100,type:0,"color-stop":["0,red", 
3."16,orange","32,yellow","48,green","64,blue","80,indigo","100,violet"]}) 

<!doctype html> 
<title>javascript线性渐变 by 司徒正美</title> 
<meta charset="utf-8"/> 
<meta name="keywords" content="javascript线性渐变 by 司徒正美" /> 
<meta name="description" content="javascript线性渐变 by 司徒正美" /> 
<style type="text/css"> 
.gradient{ 
width:800px; 
height:100px; 
} 
</style> 
<script type="text/javascript"> 
var Gradient = function(id){ 
var entity = document.getElementById(id), 
options = arguments[1] || {}, 
width = options.width, 
height = options.height, 
type = options.type , 
stops = options["color-stop"]; 
this.init(entity,stops,width,height,type); 
} 
Gradient.prototype ={ 
constructor: Gradient, 
init: function(entity,stops,width,height,type) { 
this.css(entity,{position:"relative"}); 
var content = entity.innerHTML; 
entity.innerHTML = ""; 
!+"\v1"? this.IEgradient(entity,stops,width,height,type): 
this.SVGgradient(entity,stops,width,height,type) 
var contentDiv = document.createElement("div"); 
this.css(contentDiv,{position:"absolute",top:0,left:0}) 
contentDiv.innerHTML = content; 
entity.appendChild(contentDiv); 
}, 
css: function(node,bag){ 
var str = ";" 
for(var i in bag){ 
if(bag.hasOwnProperty(i)) 
str += i+":"+bag[i]+";"; 
} 
node.style.cssText = str; 
}, 
attr: function(node,bag){ 
for(var i in bag){ 
if(bag.hasOwnProperty(i)) 
node.setAttribute(i,bag[i]) 
} 
}, 
createSVG:function(tag){ 
return document.createElementNS("http://www.w3.org/2000/svg",tag); 
}, 
setFilter:function(el,start,end,type){ 
el.style.filter = "progid:DXImageTransform.Microsoft.Gradient(enabled='true',startColorstr="+ 
start+",GradientType="+type+", endColorstr="+end+")"; 
}, 
createStop:function(parent,top,left,width,height,type){ 
if(type){ 
var table = document.createElement("table"); 
parent.appendChild(table); 
var tr = table.insertRow(0), 
td = tr.insertCell(0) 
this.attr(table,{height:height+"px",width:width+"px",cellPadding:0,cellSpacing:0}) 
this.css(table,{position:"absolute",top:top+"px",left:left+"px"}); 
td.innerHTML =" "; 
return td; 
} 
var div = document.createElement("div"); 
parent.appendChild(div); 
this.css(div,{height:height+"px",width:width+"px"}) 
return div; 
}, 
IEgradient:function(entity,stops,width,height,type){ 
var offset,color,beforeColor,stopWidth,stopHeight,left,top,stop; 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
offset = stops[i].split(",")[0]; 
color = this.hex(stops[i].split(",")[1]); 
stopWidth = (offset/100 * width).toFixed(1); 
stopHeight = (offset/100 * height).toFixed(1); 
switch(i){ 
case 0 : 
beforeColor = color; 
left = stopWidth; 
top = stopHeight; 
if(offset != 0){ 
//插入一个纯色的table 
stop = type? this.createStop(entity,0,0,stopWidth,height,type) : 
this.createStop(entity,0,0,width,stopHeight,type); 
this.css(stop,{background:color}); 
} 
break; 
case l-1: 
//先插入一个渐变的table 
var w2 = ((100-offset)/100 * width).toFixed(1), 
h2 = ((100-offset)/100 * height).toFixed(1), 
stop = type? this.createStop(entity,0,left,width - left -w2,height,type): 
this.createStop(entity,0,0,width,height - top -h2,type); 
this.setFilter(stop,beforeColor,color,type); 
if(offset != 100){ 
//再插入一个纯色的table 
var stop2 = type? this.createStop(entity,0,stopWidth,w2,height,type): 
this.createStop(entity,0,0,width,h2,type); 
this.css(stop2,{background:color}); 
} 
break; 
default : 
//插入一个渐变的table 
stop = type ? this.createStop(entity,0,left,stopWidth - left,height,type) : 
this.createStop(entity,0,0,width,stopHeight-top,type); 
this.setFilter(stop,beforeColor,color,type); 
beforeColor = color; 
left = stopWidth; 
top = stopHeight; 
break; 
} 
} 
}, 
SVGgradient:function(entity,stops,width,height,type){ 
var svg = this.createSVG("svg"), 
id = "id" + (new Date().getTime()* Math.random()).toFixed(0); 
this.attr(svg,{width:width+"px",height:height+"px"}) 
entity.appendChild(svg); 
var defs = this.createSVG("defs"); 
svg.appendChild(defs); 
var linearGradient = this.createSVG("linearGradient"); 
defs.appendChild(linearGradient); 
this.attr(linearGradient,{id:id,x1:"0%",y1:"0%"}) 
if(type){ 
this.attr(linearGradient,{x2:"100%",y2:"0%"}) 
}else{ 
this.attr(linearGradient,{x2:"0%",y2:"100%"}) 
} 
for(var i=0,j=0,l=stops.length;i<l;i++,j++){ 
var offset = stops[i].split(",")[0] + "%", 
color = this.hex(stops[i].split(",")[1]), 
stop = this.createSVG("stop"); 
this.attr(stop,{offset:offset,"stop-color":color}); 
linearGradient.appendChild(stop); 
} 
var rect = this.createSVG("rect"); 
svg.appendChild(rect); 
this.attr(rect,{x:"0px",y:"0px",width:width+"px",height:height+"px", 
fill:"url(#"+linearGradient.getAttribute("id")+")"}); 
}, 
hex:function(value){ 
if(/^#/.test(value)){ 
value = value.replace('#', ''); 
return "#" + (value.length == 3 ? value.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : value); 
} 
return value; 
} 
} 
window.onload = function(){ 
new Gradient("text1",{width:800,height:100,type:1,"color-stop":["0,red","16,orange","32,yellow","48,green","64,blue","80,indigo","100,violet"]}) 
new Gradient("text2",{width:800,height:100,type:0,"color-stop":["0,red","16,orange","32,yellow","48,green","64,blue","80,indigo","100,violet"]}) 
} 
</script> 
<div id="text1" class="gradient">javascript线性渐变 by 司徒正美 实现多重水平渐变效果</div> <div id="text2" class="gradient">javascript线性渐变 by 司徒正美 实现多重垂直渐变效果</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

虚拟定位提示网络异常

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

miui9能虚拟定位吗
IE还有一个利器至今没有被使用过，那就是VML。虽然比不上SVG，但它还是非常强大的。在实现渐变上，其fill还比IE的Gragient滤镜强悍得多了。不过VML出现得比较早，只支持很少的颜色名，如red,blue,yellow，其他如orange就可以搞死它了。因此要使用VML做线性渐变，我们得对这些颜…...
2024/4/30 10:19:05
电脑如何开虚拟定位器
自写的滑动门式菜单/ *{margin:0;padding:0;} body{ margin:auto;font:14px "宋体",Verdana, Arial, Helvetica, sans-serif;color:#333;} ul,li{padding:0; list-style:none;} a:link,a:visited{color:#333;text-decoration:none;} a:hover{color:#d00;text-dec…...
2024/4/25 1:44:06
微信不能虚拟定位
jquery在这方面则正好相反，它的UI都以插件形式提供，可以需要什么就引用什么，所以非常小巧灵活，但由于插件往往是由不同的人或者团队来提供，界面和接口往往就不那么一致。反正是各有千秋吧。今天学习extjs中的grid，它可以说是功能强大，无出其右，只有你想不到的，没有它…...
2024/5/3 22:20:15
大牛虚拟定位是通过网络定位吗
一、从写 cookie 说起。 var the_date = new Date("December 31, 2020"); var expiresDate = the_date.toGMTString(); document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate; 　　第一句是日期对象；　　第二句将…...
2024/4/24 10:06:13
设置允许虚拟定位
5%10=5 x="5"+"5"; x="5"+5 ; document.write(x);(結果都為﹕55) undefined是未初始化的变量的值﹐沒有引用值﹐屬于未定義 var anyway; anyway屬于已定義有默認空值一元運算符﹕delete(刪除對開發者定義的對象和方法的引用﹐不能刪除原始的EC…...
2024/4/14 13:28:39
魅蓝虚拟定位如何开启
1.firefox和IE的自定义标签可以通过以下样式进行统一 <html XMLNS="http://www.w3.org/1999/xhtml" XMLNS:TEST="//www.jb51.net"> 2.自定义标签的的定义也可以进行统一 <TEST:mylabel value="mylabel"/> <TEST:mylabel value=&q…...
2024/4/25 2:29:58
ios什么模拟器有虚拟定位软件下载
现在实现圆角普遍用图片来控制，这种方法有其优点（产生的圆角平滑）。但同时他也要求有吻合的图片，如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。实现后的调用代码如下复制代码代码如下: var objDiv = getRoundDiv.call(document,"solid 1px…...
2024/4/25 12:44:40
苹果手机怎么一起来捉妖虚拟定位外挂
无标题文档原图片是：尺寸是(215*78) (function(){ var img=document.createElement(img);//创建一个img元素 img.src="//www.jb51.net/images/logo.gif";//指定src img.style.position="absolute";//防止正常的内容变形 img.style.visibility=hidde…...
2024/4/14 13:28:36
金立虚拟定位app
JavaScript对象构造的可见性定义可以分为以下几种：　　1，私有属性（private properties）　　　　通过var关键字定义对象构造中变量的作用域，该变量只能在对象构造方法的作用域内被访问。如：复制代码代码如下: function VariableTest() { var myVariable;//private } …...
2024/4/20 12:06:49
虚拟定位打卡与绑定设备不同
$(#someElement)和$(#someElement)[0],这条语句带给我一段时间的困惑，开始时每次使用我总是在其中一个在出错的时候换成另外一个，虽然每次都能完成功能，但总是有中说不出的郁闷！后来终于搞懂了其中的道理：$(#someElement)虽然只选择元素，但它仍是包装集，不能使用DOM节…...
2024/4/14 13:28:34
手机神话虚拟定位
JavaScript中对象的创建有以下几种方式：（1）使用内置对象（2）使用JSON符号（3）自定义对象构造一、使用内置对象 JavaScript可用的内置对象可分为两种： 1，JavaScript语言原生对象（语言级对象），如String、Object、Function等； 2，JavaScript运行期的宿主对象（环境…...
2024/4/14 13:28:33
2018年钉钉虚拟定位
复制代码代码如下:///全角空格为12288，半角空格为32 ///其他字符半角(33-126)与全角(65281-65374)的对应关系是：均相差65248 //半角转换为全角函数 function ToDBC(txtstring) { var tmp = ""; for(var i=0;i<txtstring.length;i++) { if(txtstring.charCodeAt…...
2024/4/14 13:28:32
苹果7p手机虚拟定位在哪里
要想看到实际效果，可以先声明一些属性跟方法，否则是看不到，仔细往下看有例子的。复制代码代码如下:function ShowObjProperty(Obj) { var PropertyList=; var PropertyCount=0; for(i in Obj){ if(Obj.i !=null) PropertyList=PropertyList+i+属性：+Obj.i+\r\n; else Prop…...
2024/4/22 16:05:19
探探虚拟定位ios
JavaScript控制文本框的值连续加减 var flag1=0; var flag2=0; function NumberInc() { if(flag1==1 && flag2==1) {alert("Error!");} else { if(flag1==1) { document.all.TextBox1.value++; setTimeout("NumberInc()",100); } if(f…...
2024/4/14 13:28:30
不需要rrot虚拟定位app
一、学习ExtJS前提 1、Javascript 2、JSON（减肥的XML） 3、Java（C#） 4、Web Services 5、HTML DOM 6、AJAX 二、配置ExtJS运行环境 1、CSS文件：resources\css\ext-all.css 2、底层支持文件：adapter\ext\ext-base.js 3、环境文件：ext-all.js 官方网站地址 http://www.extj…...
2024/4/14 13:28:29
虚拟定位精灵下载
一、属性 renderTo：将当前对象所生成的HTML对象存放在指定的对象中 text：得到按钮名称 minWidth：按钮最小宽度 hidden：按钮的隐藏或显示(true or false) 二、构造参数 handler：指定一个函数句柄，在默认事件触发时调用，此时在默认事件为click listeners：在对象初始化之前…...
2024/4/28 18:19:34
小米mix2如何开启虚拟定位
一、属性 fieldLabel：标签名称。 labelWidth：标签宽度。 ID：文件框ID。二、构造参数 listeners：在对象初始化之前，将一系列事件进行绑定。三、函数 getCmp(string _id)：得到id为_id的组件对象。 getValue()：得到文件框值。四、其它 layout：只在在此布局下才能正确显…...
2024/4/14 13:28:27
微信虚拟定位软件西瓜太郎
一、属性frame：布尔类型true 或 false ，为true时表示边框为圆角且具有背景色，取false则反之。xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化…...
2024/4/14 13:28:26
miui9虚拟定位设置方法
一、属性 plain：布尔类型，true表示强制与背景色保持协调，默认值为false。 resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。 maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。 maximized：布尔类型，true表示显示窗体时将窗…...
2024/4/14 9:55:34
雷电虚拟定位模拟器电脑版
一、属性 ownerCt：得到当前对象所在的容器。 items：集合列表二、应用举例复制代码代码如下: Ext.onReady(function(){ var _window = new Ext.Window({ title:"测试窗体", layout:"form", width:300, plain:true, items:{ id:"name", xtype…...
2024/4/28 1:13:26

虚拟定位提示网络异常

相关文章

最新文章