论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

JavaScript特效的实现

文章类别:Javascript | 发表日期:2010-3-1 9:51:55

a. 拖动效果

<!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=gb2312" />
<title>Drag</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
 <div id="t">Demo Win - Drag me</div>
 <div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,s,x,y,d){
 s = o.style;
 d = document;
 o.onselectstart = function(){ return false; }; //阻止选择
 o.onmousedown = function(e){
  e = e||event;
  x = e.clientX-o.offsetLeft;
  y = e.clientY-o.offsetTop;
  d.onmousemove = function(e){
   e = e||event;
   s.left = e.clientX - x + "px";
   s.top = e.clientY - y + "px";
  }
  d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
 }
})(document.getElementById("w"))
</script>
</html>

b. 淡入淡出效果
<!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=gb2312" />
<title>Fade</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
 <div id="t">Demo Win - Fade</div>
 <div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,i,s){
 i=1;s=0.01;
 setInterval(function(){
  i+=s; s=i<0?0.01:(i>1?-0.01:s);
  if(o.filters)o.filters[0].opacity=i*100;
  else o.style.opacity=i;
 },1);
})(document.getElementById("w"));
</script>
</html>

 c. 固定位置浮动效果
<!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=gb2312" />
<title>Fixed</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html, body { margin:0px; padding:0px; overflow:hidden; }
.b { margin:0px; padding:0px; overflow:auto; }
.line0 { line-height:20px; background-color:lightyellow; padding:0px 15px; }
.line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
.w { position:absolute; right:10px; bottom:10px; width:160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
.t { line-height:20px; height:20px; width:160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
.winBody { height:218px; width:160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div class="w">
 <div class="t">Demo Win - Fixed</div>
 <div class="winBody">Hello world</div>
</div>
</body>
<script>
//测试用,随机产生一定的内容
for(var i=0; i<400; i++)document.write("<div class=\"line"+(i%2)+"\">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"<\/div>");
//代码如下:
new function(w,b,c,d,o){
 d=document;b=d.body;o=b.childNodes;c="className";
 b.appendChild(w=d.createElement("div"))[c]= "b";
 for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
 (window.onresize = function(){
  w.style.width = d.documentElement.clientWidth + "px";
  w.style.height = d.documentElement.clientHeight + "px";
 })();
}
</script>
</html>

d. 滑动弹出效果
<!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=gb2312" />
<title>Popup</title>
<style>
* { font-size:12px; font-family:Verdana,宋体; }
html { margin:0px; padding:0px; overflow:auto; }
body { margin:0px; padding:15px; background-color:buttonface; }
#w { position:absolute; width:1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
#t { line-height:20px; height:20px; width:480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
#winBody { height:248px; width:480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
</style>
</head>
<body>
<div id="w">
 <div id="t">Demo Win - Popup</div>
 <div id="winBody">Hello world</div>
</div>
</body>
<script>
(function(o,t,i,j,s){
 i=j=1;s=o.style;
 t=setInterval(function(){
  o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));
 },15);
})(document.getElementById("w"));
</script>
</html>

上一篇:javascript模拟炫光波形动画特效 人气:2078
下一篇:JavaScript的小窍门 人气:2055
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058