AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

精通CSS滤镜（filter）（实例解析）

2017-11-09 1389
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
全局流量管理 GTM，标准版 1个月
云解析 DNS，旗舰版 1个月
简介：

好久没弄弄美工了，前端时间由于学校的一个小网站的老师需要网站整体为绿色风格，但是他们又不能提供相关素材，这个

项目就一直拖着，需求也定不下来。后台基本功能都已经哦了，就等页面了，本来是想好好学学别的东西，巩固下Java一些基础，

但是这事拖着，还是够不爽的。security框架的例子也不好弄，于是还是决定总结一下最近学习的CSS滤镜。Css滤镜比较帅，可以

取代一部分PS才能实现的效果，但是缺点也比较明显，浏览器并不是都支持。但考虑到IE6，7...占的市场份额还是挺很大的，所以有

学习的必要。网上不缺CSS滤镜的知识，但是大多是长篇大论，或不够全面。现在结合自己做的例子和网上的资料，自己的学习心得

总结如下。毕竟我不是专业搞美工，所以这篇随笔，是基本是面向初学者，并使其快速掌握。也了解现在的CSS都能做什么。

为了充实内容，顺便给出jQuery实现弹出层特效的源码。

　　CSS（Cascading Style Sheets) 层叠样式表单。1998年5月12日，Cascading Style Sheets,level 2 成为了W3C 

的新标准。同时,”W3C CoreStyles '和CSS2 Validation Service' 以及“CSS Test Suite' 宣布成立。它是一组样式，样式

中的属性在HTML元素中依次出现，并显示在浏览器中。样式可以定义在HTML文档的标志（TAG）里，也可以在外部附加文档

作为外加文档。此时，一个样式表单可以作用于多个页面---甚至整个站点，因此具有更好的易用性和扩展性。

        对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本

的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT， 这就说

明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。 


　　可视化滤镜属性只能用在HTML控件元素上，不能使用div的id，class定义。所谓的HTML空间元素就是它们在页面上定

义了一个矩形空间，浏览器的窗口可以显示这些空间。下面列出了HTML合法的控件和它们的说明。 


元素                                       说明 

BODY                      网页文档的主体元素，所有的可见范围都在元素内 
BUTTON                  表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式 
DIV                         定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 
IMG                         图片元素，通过指定“src'属性来指定图片的来源 
INPUT                      输入表单域 
MARQUEE                移动字幕效果 
SPAN                      定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 
TABLE                    表格 
TD                         表格数据单元格 
TEXTAREA              文本区域 
TFOOT                   多行输入文本框 
TH                         表格标题单元格 
THEAD                   表格标题 
TR                         表格行 

////////////////////////////////////////

IE4.0以上支持的滤镜属性表 

滤镜效果 描述 ：

Alpha 设置透明度 
Blru 建立模糊效果 
Chroma 把指定的颜色设置为透明 
DropShadow 建立一种偏移的影象轮廓，即投射阴影 
FlipH 水平反转 
FlipV 垂直反转 
Glow 为对象的外边界增加光效 
Grayscale 降低图片的彩色度 
Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 
Light 在一个对象上进行灯光投影 
Mask 为一个对象建立透明膜 
Shadow 建立一个对象的固体轮廓，即阴影效果 
Wave 在X轴和Y轴方向利用正弦波纹打乱图片 
Xray 只显示对象的轮廓 

 

下面分别阐述：

1、Alpha 滤镜 
语法：{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, 
starty=starty,finishx=finishx,finishy=finishy)} 

'Alpha'属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说

就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。他们的参数含义分别如下：

 

“opacity'代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，

100代表完全不透明。”finishopacity'是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定

结束时的透明度。范围也是0 到 100。“style' 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状

、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”

FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。 


复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body { FILTER : ALPHA(opacity=50,finishopacity=80,style=2 }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >
复制代码


2、Blur 滤镜
语法：对于HTML：{filter:blur(add=add,direction=direction,strength=strength)} 
对于Script语言： [oblurfilter=] object.filters.blur 
用手指在一幅尚未干透的油画上迅速划过时，画面就会变得模糊。”Blur'就是产生同样的模糊效果。 

“ADD”参数是一个布尔判断“TRUE（默认）”或者“FALSE”。它指定图片是否被改变成印象派的模糊

效果。模糊效果是按顺时针的方向进行的，“DIRECTION”参数用来设置模糊的方向。其中0度代表垂直

向上，然后每45度为一个单位。它的默认值是向左的270度。“STRENGTH“值只能使用整数来指定，

她代表有多少像素的宽度将受到模糊影响。默认是5个。


代码如下：

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body { filter : blur(add=ture,direction=135,strength=200) }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >
复制代码

 

效果：


3、FlipH, FlipV 滤镜 
语法：{filter:filph} ,{filter:filpv} 分别是水平反转和垂直反转

4、Chroma 滤镜 
语法：{filter:chroma(color=color)} 
使用”Chroma'属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。
代码如下：

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body { filter : chroma(color=#CC33C2) }
</ style >
</ head >
< body >
< div  class ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font ></ div >
< div >< img  src ="image/ch2.gif"   /></ div >
</ body >
</ html >
复制代码


可以屏蔽颜色，大有用处。

5、DropShadow 滤镜 
语法：{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)} 

“DropShaow'顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。

'Color'代表投射阴影的颜色，'offx'和'offy'分别是X方向和Y方向阴影的饿偏移量。


'Positive'参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果 代码如下：

dropshadow(color=gray,offx=5,offy=5.positive=0) 

效果：


6、Glow 滤镜 
语法：{filter:glow(color=color,strength)} 

当对一个对象使用'glow'属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定

发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。 

filter:glow(color=red,strength=10) 后的效果 

filter:glow(color=#ffff00,strength=5) 后的效果 

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body { filter : glow(color=red,strength=10) }
.try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  class ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >
复制代码

 


7、Gray ,Invert,Xray 滤镜
语法：{filter:gray} ,{filter:invert},{filter:xray} 

Gray滤镜是把一张图片变成灰度图；（汶川大地震后很多网站色调都变灰色，就是用的这一点代码实现的）
Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。 

 

效果：


效果：

 

8、Light 滤镜 
语法：Filter{light} 

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT'滤镜属性，那么就可以调用它的“方法(Method)'来设置或者改变属性。“LIGHT'可用的方法有： 

·AddAmbient 加入包围的光源 
·AddCone 加入锥形光源 
·AddPoint 加入点光源 
·Changcolor 改变光的颜色 
·Changstrength 改变光源的强度 
·Clear 清除所有的光源 
·MoveLight 移动光源

addAmbient (iRed,iGreen,iBlue,iStrength) : 为滤镜添加环境光。环境光是无方向的，并且均匀的洒在页面的表面。环境光有颜色和强度值，可以为对象田家更多的颜色。它通

常和其他光一起使用。无返回值。参数见下表。
iRed : 必选项。整数值(Integer)。 指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。 指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。 指定蓝色值。取值范围为 0 - 255 。 
iStrength : 必选项。整数值(Integer)。 指定光强度。取值范围为 0 - 100 。

changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改变光的颜色。无返回值。参数见下表。
iLightNumber : 必选项。整数值(Integer)。 指定光的标识符。 
iRed : 必选项。整数值(Integer)。指定红色值。取值范围为 0 - 255 。 
iGreen : 必选项。整数值(Integer)。指定绿色值。取值范围为 0 - 255 。 
iBlue : 必选项。整数值(Integer)。指定蓝色值。取值范围为 0 - 255 。 
fAbsolute : 必选项。布尔值(Boolean)。指定改变是替换当前设置的绝对值，还是加到当前设置的相对值。此参数不等于零表示采用绝对值。否则表示采用相对值。


可以定义光源的虚拟位置，以及通过调整X轴和Y轴的数值来控制光源焦点的位置，还可以调整光源的形式（点光源或者锥形光源）指定光源是否模糊边界、光源的颜色、亮度等属

性。如果动态的设置光源，可能回产生一些意想不到的效果。

实现图片自动变色效果

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body {}
.try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  class ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"  style ="filter:light(); width:400; height:300"  onload ="javascript:this.filters.light.addAmbient(10,250,100,55)"  

onmousemove ="javascript:this.filters.light.changeColor(0,150,100,50,0)" /></ div >< br  />< br  /></ div >
</ body >
</ html >
复制代码


9、Mask 滤镜 
语法：{filter:mask(color=color)} 

使用'MASK'属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。 

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body {  filter : mask(color=yellow) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >
复制代码

虽然实现，但是效果并不想想象的那样帅，不好用。

10、Shadow 滤镜
语法：{filter:shadow(color=color,direction=direction)} 

利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270

度。 

filter:shadow(color=red,direction=225) 
filter:shadow(color=blue,direction=225) 
filter:shadow(color=gray,direction=225) 

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body {  filter : shadow(color=red,direction=225) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >
复制代码

效果：



11、Wave 滤镜 语法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 

'wave' 属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”， 
“ADD”表示是否要把对象按照波形样式打乱， 
“FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹， 
“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0----100， 
“PHASE”参数用来设置正弦波的偏移量。 
“STRENGTH”代表振幅大小。 

复制代码
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > css滤镜 </ title >
< style >
body {  filter : wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=20) ; }
#try {  margin-left : 30px ; }
</ style >
</ head >
< body >
< br  />< br  />
< div  id ="try" >< font  color ="#CC33C2" > 施杨de编程世界 </ font >< br  />
< br  />
< div >< img  src ="image/ch2.gif"   /></ div >< br  />< br  /></ div >
</ body >
</ html >
复制代码

效果：


jQuery弹出层源码：

页面：

复制代码
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
<!--  saved from url=(0045)http://interface.eyecon.ro/demos/windows.html  -->
< HTML  xmlns ="http://www.w3.org/1999/xhtml" >
< HEAD >< TITLE > Resizeable demo - Interface plugin for jQuery </ TITLE >
< META  http-equiv =Content-Language  content =en >
< META  http-equiv =Content-Type  content ="text/html; charset=utf-8" >
< SCRIPT 
 src ="js/jquery.js"  
type =text/javascript ></ SCRIPT >
< SCRIPT 
 src ="js/interface.js"  
type =text/javascript ></ SCRIPT >
< link  href ="css/div_show.css"  rel ="stylesheet"  type ="text/css"  media ="all" >
< META  content ="MSHTML 6.00.6000.16735"  name =GENERATOR >
</ HEAD >
< BODY >< A  id =windowOpen > 管理员登陆 </ A >
< DIV  id =window >
< DIV  id =windowTop >
< DIV  id =windowTopContent > 登陆界面 </ DIV >
< IMG  id =windowMin 
 src ="css/images/window_min.jpg" >  
 < IMG  id =windowMax 
 src ="css/images/window_max.jpg" >  
 < IMG  id =windowClose 
 src ="css/images/window_close.jpg" >  
 </ DIV >
< DIV  id =windowBottom >
< DIV  id =windowBottomContent ></ DIV ></ DIV >
< DIV  id =windowContent >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P ></ DIV >< IMG  id =windowResize 
 src ="css/images/window_resize.gif" >  
 </ DIV >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< P ></ P >
< SCRIPT  type ="text/javascript"  src ="js/div_show.js" ></ SCRIPT >
< SCRIPT  language =JavaScript  type =text/javascript > var  client_id  =   1 ; </ SCRIPT >

</BODY></HTML> 
复制代码

 

css源码：

复制代码
BODY  {
    BACKGROUND :  #fff ;  HEIGHT :  100%
 }
#window  {
    DISPLAY :  none ;  LEFT :  200px ;  OVERFLOW :  hidden ;  WIDTH :  400px ;  POSITION :  absolute ;  TOP :  100px ;  HEIGHT :  300px
 }
#windowTop  {
    BACKGROUND-POSITION :  right top ;  BACKGROUND-IMAGE :  url(images/window_top_end.png) ;  OVERFLOW :  hidden ;  CURSOR :  move ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  30px
 }
#windowTopContent  {
    BACKGROUND-POSITION :  left top ;  FONT-WEIGHT :  bold ;  FONT-SIZE :  14px ;  BACKGROUND-IMAGE :  url(images/window_top_start.png) ;  OVERFLOW :  hidden ;  COLOR :  #6caf00 ;  TEXT-INDENT :  10px ;  LINE-HEIGHT :  30px ;  MARGIN-RIGHT :  13px ;  BACKGROUND-REPEAT :  no-repeat ;  FONT-FAMILY :  Arial, Helvetica, sans-serif ;  HEIGHT :  30px
 }
#windowMin  {
    RIGHT :  25px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
 }
#windowMax  {
    DISPLAY :  none ;  RIGHT :  25px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
 }
#windowClose  {
    RIGHT :  10px ;  CURSOR :  pointer ;  POSITION :  absolute ;  TOP :  10px
 }
#windowBottom  {
    BACKGROUND-POSITION :  right bottom ;  BACKGROUND-IMAGE :  url(images/window_bottom_end.png) ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  270px
 }
#windowBottomContent  {
    BACKGROUND-POSITION :  left bottom ;  BACKGROUND-IMAGE :  url(images/window_bottom_start.png) ;  MARGIN-RIGHT :  13px ;  BACKGROUND-REPEAT :  no-repeat ;  POSITION :  relative ;  HEIGHT :  270px
 }
#windowResize  {
    RIGHT :  3px ;  CURSOR :  se-resize ;  BOTTOM :  5px ;  POSITION :  absolute
 }
#windowContent  {
    BORDER-RIGHT :  #6caf00 1px solid ;  BORDER-TOP :  #6caf00 1px solid ;  FONT-SIZE :  11px ;  LEFT :  10px ;  OVERFLOW :  auto ;  BORDER-LEFT :  #6caf00 1px solid ;  WIDTH :  375px ;  MARGIN-RIGHT :  10px ;  BORDER-BOTTOM :  #6caf00 1px solid ;  FONT-FAMILY :  Arial, Helvetica, sans-serif ;  POSITION :  absolute ;  TOP :  30px ;  HEIGHT :  255px ;  BACKGROUND-COLOR :  #fff
 }
#windowContent *  {
    MARGIN :  10px
 }
.transferer2  {
    BORDER-RIGHT :  #6baf04 1px solid ;  BORDER-TOP :  #6baf04 1px solid ;  FILTER :  alpha(opacity=30) ;  BORDER-LEFT :  #6baf04 1px solid ;  BORDER-BOTTOM :  #6baf04 1px solid ;  BACKGROUND-COLOR :  #b4f155 ;  -moz-opacity :  0.3 ;  opacity :  0.3
 }
复制代码

 

js源码：

复制代码
$(document).ready(
     function ()
    {
        $( ' #windowOpen ' ).bind(
             ' click ' ,
             function () {
                 if ($( ' #window ' ).css( ' display ' )  ==   ' none ' ) {
                    $( this ).TransferTo(
                        {
                            to: ' window ' ,
                            className: ' transferer2 ' , 
                            duration:  400 ,
                            complete:  function ()
                            {
                                $( ' #window ' ).show();
                            }
                        }
                    );
                }
                 this .blur();
                 return   false ;
            }
        );
        $( ' #windowClose ' ).bind(
             ' click ' ,
             function ()
            {
                $( ' #window ' ).TransferTo(
                    {
                        to: ' windowOpen ' ,
                        className: ' transferer2 ' , 
                        duration:  400
                    }
                ).hide();
            }
        );
        $( ' #windowMin ' ).bind(
             ' click ' ,
             function ()
            {
                $( ' #windowContent ' ).SlideToggleUp( 300 );
                $( ' #windowBottom, #windowBottomContent ' ).animate({height:  10 },  300 );
                $( ' #window ' ).animate({height: 40 }, 300 ).get( 0 ).isMinimized  =   true ;
                $( this ).hide();
                $( ' #windowResize ' ).hide();
                $( ' #windowMax ' ).show();
            }
        );
        $( ' #windowMax ' ).bind(
             ' click ' ,
             function ()
            {
                 var  windowSize  =  $.iUtil.getSize(document.getElementById( ' windowContent ' ));
                $( ' #windowContent ' ).SlideToggleUp( 300 );
                $( ' #windowBottom, #windowBottomContent ' ).animate({height: windowSize.hb  +   13 },  300 );
                $( ' #window ' ).animate({height:windowSize.hb + 43 },  300 ).get( 0 ).isMinimized  =   false ;
                $( this ).hide();
                $( ' #windowMin, #windowResize ' ).show();
            }
        );
        $( ' #window ' ).Resizable(
            {
                minWidth:  200 ,
                minHeight:  60 ,
                maxWidth:  700 ,
                maxHeight:  400 ,
                dragHandle:  ' #windowTop ' ,
                handlers: {
                    se:  ' #windowResize '
                },
                onResize :  function (size, position) {
                    $( ' #windowBottom, #windowBottomContent ' ).css( ' height ' , size.height - 33   +   ' px ' );
                     var  windowContentEl  =  $( ' #windowContent ' ).css( ' width ' , size.width  -   25   +   ' px ' );
                     if  ( ! document.getElementById( ' window ' ).isMinimized) {
                        windowContentEl.css( ' height ' , size.height  -   48   +   ' px ' );
                    }
                }
            }
        );
    }
);
复制代码

 

再下载两个jquery的文件分别是：

interface.js，jquery.js


本文转自施杨博客园博客，原文链接：http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html，如需转载请自行联系原作者

文章标签：
云解析DNS
前端开发
Web App开发
JavaScript
关键词：
云解析DNS实例
CSS解析
CSS滤镜
云解析DNS css
CSS实例
文艺小青年
目录
相关文章
弹性计算小冉
|
23天前
|
机器学习/深度学习 编解码 人工智能
阿里云gpu云服务器租用价格：最新收费标准与活动价格及热门实例解析
随着人工智能、大数据和深度学习等领域的快速发展，GPU服务器的需求日益增长。阿里云的GPU服务器凭借强大的计算能力和灵活的资源配置，成为众多用户的首选。很多用户比较关心gpu云服务器的收费标准与活动价格情况，目前计算型gn6v实例云服务器一周价格为2138.27元/1周起，月付价格为3830.00元/1个月起；计算型gn7i实例云服务器一周价格为1793.30元/1周起，月付价格为3213.99元/1个月起；计算型 gn6i实例云服务器一周价格为942.11元/1周起，月付价格为1694.00元/1个月起。本文为大家整理汇总了gpu云服务器的最新收费标准与活动价格情况，以供参考。
弹性计算小冉
245 5
阿里云gpu云服务器租用价格：最新收费标准与活动价格及热门实例解析
弹性计算小冉
|
25天前
|
机器学习/深度学习 弹性计算 人工智能
阿里云第八代云服务器ECSg8i实例深度解析：性能及适用场景参考
目前企业对云服务器的性能、安全性和AI能力的要求日益提高。阿里云推出的第八代云服务器ECS g8i实例，以其卓越的性能、增强的AI能力和全面的安全防护，除了适用于通用互联网应用和在线音视频应用等场景之外，也广泛应用于AI相关应用。本文将深入解析ECS g8i实例的技术特性、产品优势、适用场景及与同类产品的对比，以供参考。
弹性计算小冉
58 1
阿里云第八代云服务器ECSg8i实例深度解析：性能及适用场景参考
孙飞i
|
27天前
|
前端开发
CSS常用滤镜属性讲解
本文介绍了CSS滤镜的几种常用效果，包括高斯模糊、亮度和对比度调整、灰度化、图像反转、透明度调整、饱和度调整及复古滤镜等。例如，使用`blur(10px)`可使图像产生模糊效果，包裹层设置`overflow: hidden`可避免边缘模糊；`brightness(150%)`和`contrast(150%)`分别增强图像亮度和对比度；`grayscale(1)`将图像转为灰度；`invert(1)`实现图像颜色完全反转；`opacity(0.5)`调整图像半透明；`saturate(350%)`增加饱和度；`sepia(100%)`营造复古深褐色调；`hue-rotate(180deg)`改变
孙飞i
25 4
CSS常用滤镜属性讲解
游客fz577umxdejsg
|
16天前
|
前端开发
背景滑动，动感加倍：CSS动画对角线效果全解析！
背景滑动，动感加倍：CSS动画对角线效果全解析！
游客fz577umxdejsg
22 0
弹性计算小冉
|
2月前
|
存储 弹性计算 应用服务中间件
阿里云经济型e与通用算力型u1实例长效特价云服务器解析，性能与性价比的完美平衡
阿里云目前有两款深受个人和普通企业用户喜欢的特价云服务器，ECS 经济型e实例2核2G，3M固定带宽，40G ESSD Entry云盘，仅需99元1年。ECS u1实例2核4G，5M固定带宽，80G ESSD Entry盘，仅需199元1年。新老同享，活动期间新购、续费同价。很多用户关心这两款云服务器性能怎么样？本文将对阿里云2024年推出的特价云服务器进行深度解析，从性能、价格、适用场景等多个维度进行详细探讨，以供选择参考。
弹性计算小冉
149 8
阿里云经济型e与通用算力型u1实例长效特价云服务器解析，性能与性价比的完美平衡
李木子2024
|
7天前
|
开发者 测试技术 Android开发
Xamarin 开发者的五大常见问题及解决方案：从环境搭建到性能优化，全面解析高效跨平台应用开发的技巧与代码实例
【8月更文挑战第31天】Xamarin 开发者常遇问题及解决方案覆盖环境搭建至应用发布全流程，助新手克服技术难关。首先需正确安装配置 Visual Studio 及 Xamarin 支持，设置 iOS/Android 测试环境。利用 Xamarin.Forms 和 XAML 实现高效跨平台开发，共享 UI 和业务逻辑代码。针对性能优化，采取减少 UI 更新、缓存计算结果等措施，复杂问题则借助 Xamarin Profiler 分析。
李木子2024
16 0
康波周期
|
8天前
|
数据采集 弹性计算 供应链
阿里云服务器付费模式：按量付费、包年包月和抢占式实例全解析
阿里云服务器提供包年包月、按量付费与抢占式实例三种付费模式。包年包月为预付费，适合长期稳定使用，价格更优惠并支持备案。按量付费则为后付费模式，按小时结算，适合短期或访问量波动大的场景，但不支持备案。抢占式实例基于按量付费，价格更低（最多节省90%），适用于无状态应用，如临时测试或可弹性伸缩的Web服务，但存在被系统释放的风险，同样不支持备案。根据具体需求选择合适的付费模式能够有效降低成本并提高效率。
康波周期
18 0
孙飞i
|
26天前
|
前端开发
CSS常用滤镜属性讲解
CSS常用滤镜属性讲解
孙飞i
28 0
好奇的菜鸟
|
3月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
好奇的菜鸟
33 1
好奇的菜鸟
|
3月前
|
前端开发 开发者
CSS文本样式全面解析：从基础到进阶
CSS文本样式全面解析：从基础到进阶
好奇的菜鸟
26 0

热门文章

最新文章

  • 1
    如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
  • 2
    CSS学习（四）
  • 3
    ASP.NET 2.0中CSS失效的问题总结(转)
  • 4
    jQuery和CSS3打造的3D炫酷特效
  • 5
    如何用CSS实现不规则形状的背景
  • 6
    细节决定成败——无CSS时网页的可读性
  • 7
    CSS3自定义发光radiobox单选框
  • 8
    详细认识一下CSS盒子模型
  • 9
    CSS代码记录
  • 10
    12款精美的免费 CSS 网页模板下载
  • 1
    10：基于Servlet模拟用户登录功能的实现与解析-Java Web
    210
  • 2
    【Linux】深度解析Linux中的几种进程状态
    108
  • 3
    【51单片机】烧写教程：将代码下载到单片机中（图示＆解析）
    61
  • 4
    【C 言专栏】C 语言指针的深度解析
    55
  • 5
    【期末不挂科-C++考前速过系列P6】大二C++实验作业-模板（4道代码题）【解析，注释】
    43
  • 6
    【期末不挂科-C++考前速过系列P5】大二C++实验作业-多态性（3道代码题）【解析，注释】
    96
  • 7
    【期末不挂科-C++考前速过系列P4】大二C++实验作业-继承和派生（3道代码题）【解析，注释】
    41
  • 8
    【期末不挂科-C++考前速过系列P3】大二C++第3次过程考核（20道选择题＆12道判断题＆2道代码题）【解析，注释】
    38
  • 9
    【期末不挂科-C++考前速过系列P2】大二C++第2次过程考核（20道选择题＆10道判断题＆3道代码题）【解析，注释】
    38
  • 10
    Java 8新特性解析及应用区块链技术在供应链管理中的应用与挑战
    46

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 神龙云服务器产品及技术深度解析
  • 弹性创造价值：基于ECS的最佳性价比实践解析
  • 又快又稳：阿里云下一代虚拟交换机解析

    • 相关实验场景

    更多
  • 通过云拨测对指定服务器进行Ping/DNS监测
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程

    • 推荐镜像

    更多
  • DNS
  • NTP
  • kali-security
    • 下一篇
    DDNS