JS 中filters怎么用

JavaScript074

JS 中filters怎么用,第1张

没办法控制吧，你可以自己写一个仿alert的提示框

给你个例子参考

<html>

<head>

<title>

</title>

<style type="text/css">

*{

margin:0padding:0

}

.STYLE1

</style>

</head>

<body>

<div class="cecmbody" id="cecmpolicy">

<div class="leftClass">

<input type="button" value="点击这里" onclick="sAlert('我是一个渐变的sAlert',this)" />

</p>

<p>测试</p><p>测试</p><p>测试</p><p>测试</p>

</div>

<div class="rightClass">

</div>

</div>

<script type="text/javascript" language="javascript">

function sAlert(txt){

var eSrc=(document.all)?window.event.srcElement:arguments[1]

var shield = document.createElement("DIV")

shield.id = "shield"

shield.style.position = "absolute"

shield.style.left = "0px"

shield.style.top = "0px"

shield.style.width = "100%"

shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px"

shield.style.background = "#333"

shield.style.textAlign = "center"

shield.style.zIndex = "10000"

shield.style.filter = "alpha(opacity=0)"

shield.style.opacity = 0

var alertFram = document.createElement("DIV")

alertFram.id="alertFram"

alertFram.style.position = "absolute"

alertFram.style.left = "50%"

alertFram.style.top = "50%"

alertFram.style.marginLeft = "-225px"

alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px"

alertFram.style.width = "450px"

alertFram.style.height = "150px"

alertFram.style.background = "#ccc"

alertFram.style.textAlign = "center"

alertFram.style.lineHeight = "150px"

alertFram.style.zIndex = "10001"

strHtml = "<ul style=\"list-style:nonemargin:0pxpadding:0pxwidth:100%\">\n"

strHtml += " <li style=\"background:#DD828Dtext-align:leftpadding-left:20pxfont-size:14pxfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\">[系统提示]</li>\n"

strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\">"+txt+"</li>\n"

strHtml += " <li style=\"background:#ffftext-align:centerfont-size:12pxheight:120pxline-height:120pxborder-left:1px solid #F9CADEborder-right:1px solid #F9CADE\"><input type=\"text\" value=\"确 定\" /></li>\n"

strHtml += " <li style=\"background:#FDEEF4text-align:centerfont-weight:boldheight:25pxline-height:25pxborder:1px solid #F9CADE\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n"

strHtml += "</ul>\n"

alertFram.innerHTML = strHtml

document.body.appendChild(alertFram)

document.body.appendChild(shield)

this.setOpacity = function(obj,opacity){

if(opacity>=1)opacity=opacity/100

trycatch(e){}

try{

if(obj.filters.length>0&&obj.filters("alpha")){

obj.filters("alpha").opacity=opacity*100

}else{

obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")"

}

}catch(e){}

}

var c = 0

this.doAlpha = function(){

if (++c >20)

setOpacity(shield,c)

}

var ad = setInterval("doAlpha()",1)

this.doOk = function(){

//alertFram.style.display = "none"

//shield.style.display = "none"

document.body.removeChild(alertFram)

document.body.removeChild(shield)

eSrc.focus()

document.body.onselectstart = function()

document.body.oncontextmenu = function()

}

document.getElementById("do_OK").focus()

eSrc.blur()

document.body.onselectstart = function()

document.body.oncontextmenu = function()

}

</script>

</body>

</html>

N年前做了一个，你看这个如何？

演示地址：http://test.pc365.net/light.htm

(如打不开，请多刷新几次)

代码如下：

===========================================================

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>烛光效果</title>

<STYLE>

.drag

{CURSOR: hand

POSITION: relative

filter:blur(strength=12)

}

</STYLE>

<SCRIPT language=JavaScript>

var dragapproved=false

var z,x,y

function move()

{

if(event.button==1&&dragapproved)

{z.style.pixelLeft=temp1+event.clientX-x

z.style.pixelTop=temp2+event.clientY-y

movelight(z.style.pixelLeft,z.style.pixelTop)

return false

}

}

function drags()

{

if(!document.all) return

if(event.srcElement.className=="drag")

{

dragapproved=truez=event.srcElement

temp1=z.style.pixelLeft

temp2=z.style.pixelTop

x=event.clientXy=event.clientY

document.onmousemove=move

}

}

function setlight(xx,yy)

{

// main.filters.light(0).addambient(235,239,129,110)

main.filters.light(0).addpoint(xx,yy,50,235,239,169,100)

//x坐标，y坐标,扩散范围,颜色,颜色,颜色,强度

//main.filters.light(0).addcone(xx,yy,0,100,100,200,204,200,180,20)

}

//第一个参数：光源的X坐标；第二个参数：光源的Y坐标；第三个参数：光源离开页面的高度；

//第四至第六个参数：光源的颜色；第七个参数：光源光的色相；第八个参数：光源的形状；

//第九个参数：光源的光的强度 ；第十个参数：光源光散开的范围。

function movelight(xx,yy)

{

xx+=400

yy+=50

main.filters.light(0).clear()

setlight(xx,yy)

}

document.onmousedown=drags

document.onmouseup=new Function("dragapproved=false")

</SCRIPT>

</head>

<body bgcolor="#000000" topmargin="0" leftmargin="0">

<div id='Layerw' style='position: absoluteleft: 0top:50width: 100%height: 40z-index: 1' align="center">

<img src="http://test.pc365.net/lz.gif" alt="蜡烛照明 拖动使用" class=drag width="98" height="120">

</div>

<div align="center" >

<center>

<table id="main" border="0" width="780" cellpadding="0" cellspacing="0" height="580" background="images/house.gif" style="filter:light">

<tr >

<td width="100%">

<p align="center"><img id="pt" border="0" src="http://test.pc365.net/123456.jpg" ></p>

</td>

</tr>

</table>

</center>

</div>

</body>

</html>

<script>setlight(400,50)</script>

<style type="text/css">

.axx{padding:1px 7pxborder-left:#cccccc 1px solidfont-size:12px}

a.axx:link,a.axx:visited{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#666}

a.axx:active,a.axx:hover{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#999}

.bxx{padding:1px 7pxborder-left:#cccccc 1px solid}

a.bxx:link,a.bxx:visited{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#009900}

a.bxx:active,a.bxx:hover{text-decoration:nonecolor:#fffline-height:12pxfont:9px sans-serifbackground-color:#ff9900}

</style>

<SCRIPT>

var i=1//当前所显示的滚动图

var tt//时间标识

var key=0

var str=['我爱张娜拉','中国人就要对日本人狠点','忍者','winXP']//图片关联title 文字

var url=['http://www.sina.com','http://www.google.cn','http://www.sohu.com','http://www.baidu.com'] //图片关联连接

function changeImg() //自动循环方法

{

if(key==0){key=1} //如果第一次执行KEY=1，表示已经执行过一次了。

else

{

document.getElementById("pic").filters[0].Apply()//将滤镜应用到对像上

document.getElementById("pic").filters[0].Play(duration=2)//开始转换

document.getElementById("pic").filters[0].Transition=23//转换效果

}

document.getElementById("pic").src=i+".jpg"//获得当前图片地址

document.getElementById("title").value=str[i-1]

document.getElementById("url").href=url[i-1]

for (var j=1j<=4j++){

document.getElementById("pic"+j).className='axx'} //将下面黑条上的所有链接变为未选中状态

document.getElementById("pic"+i).className='bxx'//将当前页面的ID设置为选中状态

i++//每次累计加1

if(i==5){i=1} //如果ID大于总图片数量。则从头开始循环

tt=setTimeout('changeImg()',4000)

}

function clickchange(id) //点击黑条上的链接执行的方法

{

i=id//当前页面的ID等于传入的N值,

window.clearTimeout(tt)//清除用于循环的TT

changeImg()//重新执行change_img()但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.

}

window.onload=changeImg//载入自动执行

</SCRIPT>

</head>

<body>

<!--整体外层 -->

<div align=center style="width:242px">

<!--图片+过渡外层 注:"overflow:hidden 超出隐藏"-->

<!--注:"overflow:hidden 超出隐藏" text-overflow:clip 不显示省略标记（...），而是简单的裁切-->

<div style="width:242pxheight:320pxoverflow:hiddentext-overflow:clipfloat:left">

<!--图片层 -->

<!--filter : progid 滤镜效果 Duration的值为网页动态过渡的时间，单位为秒。Transition是过渡方式，它的值为0到23，分别对应24种过渡方式 -->

<div><a id="url" target="_blank"><img id="pic" style="border:1px #cbcbcb solidFILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)" width=240 height=320 /></a></div>

<!--过渡+按钮外层 -->

<!-- Alpha"属性是把一个目标元素与背景混合 opacity :透明度。默认的范围是从0 到 100 finishopacity: 是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度 style 指定透明区域的形状特征：1 代表线形

margin:1px 设置边际属性-->

<div style="filter:alpha(style=1,opacity=10,finishOpacity=90)background: #888888width:100%-2pxtext-align:righttop:-16pxposition:relativemargin:1pxheight:14pxborder:0pxpadding-top:1pxz-index:4">

<!--按钮层 -->

<div id="picid"><a href="javascript:clickchange(1)" id="pic1" class="axx" target="_self">1</a><a href="javascript:clickchange(2)" id="pic2" class="axx" target="_self">2</a><a href="javascript:clickchange(3)" id="pic3" class="axx" target="_self">3</a><a href="javascript:clickchange(4)" id="pic4" class="axx" target="_self">4</a></div></div></div>

<!--下面文字层 -->

<div align=center><input id="title" type="txt" style="height:15pxbackground-color:#f2f6fbborder:0px solid #f2f6fbwidth:242pxcolor:#ff8800font-size:9ptposition:relativepadding-top:1pxtext-align:center"></div>

</div>