关闭

JavaScript经典效果集锦(二)

694人阅读 评论(0) 收藏 举报
十一 超级强大的表单验证-----推荐
十二 漂亮的脚本日历
十三 进入,退出页面的各种效果!
十四 很酷的效果,表格被选中回变颜色
十五 弹出提示的效果
十六 图片之间的切换
十七 DIV_圆边圆角的实现
十八 跳动的菜单
十九 通过页面抓取照片
二十 客户端静态页面玩分页

十 JSP页面自动生成html页面/或任何格式页面:

先建立一个模本页面:template.htm

代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

再写一个JSP页面: buildhtml.jsp:

 

代码拷贝框

[Ctrl+A 全部选择 然后拷贝]

十一 超级强大的表单验证:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十二 漂亮的脚本日历:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十三 进入,退出页面的各种效果:

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:
  0 矩形缩小
  1 矩形扩大
  2 圆形缩小
  3 圆形扩大
  4 下到上刷新
  5 上到下刷新
  6 左到右刷新
  7 右到左刷新
  8 竖百叶窗
  9 横百叶窗
  10 错位横百叶窗
  11 错位竖百叶窗
  12 点扩散
  13 左右到中间刷新
  14 中间到左右刷新
  15 中间到上下
  16 上下到中间
  17 右下到左上
  18 右上到左下
  19 左上到右下
  20 左下到右上
  21 横条
  22 竖条
  23 以上22种随机选择一种

十四 很酷的效果,表格被选中回变颜色:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十五 弹出提示的效果:

运行代码框
<textarea class="codeTextarea">&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; &lt;title&gt;cao888---提示&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script language=javascript&gt; var cao_x,cao_y; function cao888() { this.display=display; } function display() { document.write(&quot;&lt;table align=center&gt;&lt;tr&gt;&lt;td&gt;&lt;button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()&gt;CAO留言&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;); document.write(&quot;&lt;div id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'&gt;&quot;); document.write(&quot;&lt;div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'&gt;&quot;); document.write(&quot;&lt;table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='releaseCapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'&gt;&quot;); document.write(&quot;&lt;tr align=center&gt;&quot;); document.write(&quot;&lt;td align=left&gt;提示:CAO888&lt;/td&gt;&quot;); document.write(&quot;&lt;/tr&gt;&quot;); document.write(&quot;&lt;/table&gt;&quot;); document.write(&quot;&lt;span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';&gt;&lt;img src='http://pic1.blueidea.com/bbs/topic5.gif'&gt;&lt;br&gt;CAO呀,错误了...&lt;br&gt;[确定]&lt;/span&gt;&quot;); document.write(&quot; &lt;/div&gt;&quot;); document.write(&quot;&lt;/div&gt;&quot;); } function caoMove(obj) //实现层的拖移 { if(event.button==1) { var caoX=obj.clientLeft; var caoY=obj.clientTop; obj.style.pixelLeft=caoX+(event.x-cao_x); obj.style.pixelTop=caoY+(event.y-cao_y); } } &lt;/script&gt; &lt;script language=javascript&gt; var mycao=new cao888(); mycao.display(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</textarea>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十六 图片之间的切换:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十七 DIV_圆边圆角的实现:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十八 跳动的菜单:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

十九 通过页面抓取照片:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

二十 客户端静态页面玩分页:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:37443次
    • 积分:813
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:4篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论
    开源控件