常见JS效果大全

点击网页正文函数调用触发器&＃xff1a;
1.onClick 当对象被点击
2.onLoad 当网页打开,只能书写在body中
3.onUnload 当网页关闭或离开时,只能书写在body中
4.onmouseover 当鼠标悬于其上时
5.onmouseout 当鼠标离开对象时
6.onmouseup 当鼠标松开  
7.onmousedown 当鼠标按下键
8.onFocus 当对象获取焦点时
9.onSelect 当对象的文本被选中时
10.onChange 当对象的内容被改变
11.onBlur 当对象失去焦点
οnsubmit&＃61;return(ss())表单调用时返回的值
直线 border-bottom:1x solid black
虚线 border-bottom:1x dotted black
点划线 border-bottom:2x dashed black
双线 border-bottom:5x double black
槽状 border-bottom:1x groove black
脊状 border-bottom:1x ridge black

1.边缘高光glow(color&＃61;颜色,strength&＃61;亮光大小)

2.水平翻转fliph() 使对象水平翻转180度

3.垂直翻转flipv() 使对象垂直翻转180度

4.对象模糊blur(add&＃61;true/false direction&＃61;方向 strength&＃61;强度)
add指定是否按印象画派进行模糊direction模糊方向strength模糊强度
5.对象透明alpha(opaction&＃61;0-100,finishopacity&＃61;0-100,style&＃61;0/1/2/3)
opaction对象整体不透明值finishopacity当对象利用了渐透明时该项指定结束透明位置的不透明值style指定透明方式0为整体透明&＃xff0c;1为线型透明&＃xff0c;2为圆型透明&＃xff0c;3为矩形透明
6.去除颜色chroma(color&＃61;颜色值)使对象中颜色与指定颜色相同区域透明
7.建立阴影dropshadow(color&＃61;阴影颜色,offx&＃61;水平向左偏离像素,offy&＃61;水平向下偏离像素)
8.去色gray()使对象呈灰度显示
9.负片效果invert()使对象呈底片效果
10.高光light()使对象呈黑色显示
11.遮盖mask(color&＃61;颜色)使整个对象以指定颜色进行蒙板一次
opacity 表透明度水平.0~100,0表全透明,100表完全不透明
finishopacity表想要设置的渐变透明效果.0~100.
style 表透明区的形状.0表统一形状.1表线形.2表放射形.3表长方形.
startx.starty表渐变透明效果的开始时X和Y坐标.
finishx,finishy渐变透明效果结束时x,y 的坐标.
add有来确定是否在模糊效果中使有原有目标.值为0,1.0表"否",1表"是".
direction设置模糊的方向.0度表垂直向上,45度为一个单位.默认值是向左270度.left,right,down,up.
strength 只能用整数来确定.代表有多少个像素的宽度将受到模糊影响.默认是5个.
color要透明的颜色.
offx,offy分别是x,y 方向阴影的偏移量.
positive指投影方式.0表透明像素生成阴影.1表只给出不透明像素生成阴影..
AddAmbient:加入包围的光源.
AddCone:加入锥形光源.
AddPoint加入点光源
Changcolor:改变光的颜色&＃xff0e;
Changstrength:改变光源的强度&＃xff0e;
Clear:清除所有的光源&＃xff0e;
MoveLight:移动光源&＃xff0e;
freq是波纹的频率&＃xff0c;在指定在对象上一区需要产生多少个完事的波纹&＃xff0e;
lightstrength可对于波纹增强光影的效果&＃xff0e;显著0~100正整数&＃xff0c;正弦波开始位置是0~360度&＃xff0e;0表从0度开始&＃xff0c;25表从90度开始&＃xff0e;  
strength表振幅大小&＃xff0e;

hand style&＃61;"cursor:hand"
crosshair style&＃61;"cursor:crosshair"
text style&＃61;"cursor:text"
wait style&＃61;"cursor:wait"
default style&＃61;"cursor:default"
help style&＃61;"cursor:help"
e-resize style&＃61;"cursor:e-resize"
ne-resize style&＃61;"cursor:ne-resize"
n-resize style&＃61;"cursor:n-resize"
nw-resize style&＃61;"cursor:nw-resize"
w-resize style&＃61;"cursor:w-resize"
s-resize style&＃61;"cursor:s-resize"
sw-resize style&＃61;"cursor:sw-resize "
se-resize style&＃61;"cursor:se-resize"
auto style&＃61;"cursor:auto"