linux社区爱心援助Linux认证系列教程业界动态站务新闻公司招聘网络学院网址大全LPI专题CISCO专题
设为首页
加入收藏
管理团队
JSP  
JAVA  
PERL  
 您的位置:首页 > 开发语言 > JavaScript >
栏目导栏
  php
  JSP
  ASP
  asp.net
  JAVA
  c/c++/c#
  perl
  JavaScript
  Basic
  Delphi
资料搜索
热门文章
·javascript 时间对象的格式化
·去掉字符串前后的空格
·javascript 事件监听机制
·javascript 事件调用顺序
·js刷新框架子页面的七种方法
·JavaScript:替换字符串
·IE下的JScript编程需注意的内存
·用javascript操作word文档
·Javascript中CTRL+回车提交表单
·JS 获取鼠标位置
·javascript判断Email地址是否有
·Javascript中Select的OnChange
·JS实现的滑动展开与折叠效果
·有分页功能的WEB打印
·Javascript实现窗口最大化的严
最新文章
·使用CSS改变表格边框样式
·为网页添加浮动广告
·判断表单中添加是否数字的JS与
·让浏览器状态栏动起来
·使用Javascript制作行间颜色间
·禁止用右键查看源代码
·网页侦测四法
·制作弹出公告窗口
·为网页添加特效
·网页中取消鼠标右键方法大全
·JavaScript 根据屏幕解析度显示
·如何实现浏览器上的右键菜单
·如何制作浮动广告
·让弹出窗口变得“体贴”一些
·JavaScript技巧:让网页自动穿上
Google
 
网页图片特效小技巧
[ 作者:  加入时间:2007-11-23 14:43:15  来自:Linux联盟收集整理 ]
这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句、css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子。

  图片循环渐显渐隐

  效果描述:图片循环渐显渐隐……

  实现方法:

  1、把如下代码加入<body>区域中:

<img src="image1.gif" name="u" border=0 L56Linux联盟
alt="Image" style="filter:alpha(opacity=0)"> L56Linux联盟
<script language="JavaScript"> L56Linux联盟
var b = 1; L56Linux联盟
var c = true; L56Linux联盟
function fade(){ L56Linux联盟
  if(document.all); L56Linux联盟
    if(c == true) { L56Linux联盟
      b++; L56Linux联盟
  } L56Linux联盟
  if(b==100) { L56Linux联盟
    b--; L56Linux联盟
    c = false L56Linux联盟
  } L56Linux联盟
  if(b==10) { L56Linux联盟
    b++; L56Linux联盟
    c = true; L56Linux联盟
  } L56Linux联盟
  if(c == false) { L56Linux联盟
    b--; L56Linux联盟
  } L56Linux联盟
  u.filters.alpha.opacity=0 + b; L56Linux联盟
  setTimeout("fade()",50); L56Linux联盟
} L56Linux联盟
</script>

  2、把<body>改为:

<body bgcolor="#ffffff" onLoad="fade()">

  注:图片的文件名及路径可以自行修改。

  禁止图片下载

  效果描述:设置某一图片禁止下载,鼠标移动到图片上面时将会给出提示,此方法治标不治本,只能骗骗菜鸟。

  实现方法:

<A HREF="javascript:void(0)" onMouseover="alert(''对不起,此图片不能下载!'')">L56Linux联盟
<IMG SRC="2.gif" Align="center" Border="0" width="99" height="50"></A>

  注:图片的文件名及路径可以自行修改。

  鼠标控制图片隐现效果

  效果显示:图片一开始是模糊显示,当鼠标移到图片上面时图片会清晰显示。

  实现方法:

   1、把如下代码加入<body>区域中:

<SCRIPT language="JavaScript"> L56Linux联盟
<!-- L56Linux联盟
function makevisible(cur,which){ L56Linux联盟
  if (which==0) L56Linux联盟
    cur.filters.alpha.opacity=100 L56Linux联盟
  else L56Linux联盟
    cur.filters.alpha.opacity=20 L56Linux联盟
} L56Linux联盟
//--> L56Linux联盟
</SCRIPT>

  2、把如下代码加入<body>区域中:

<img src="2.gif" style="filter:alpha(opacity=20)"L56Linux联盟
onMouseOver="makevisible(this,0)"L56Linux联盟
onMouseOut="makevisible(this,1)">

  注:图片的文件名及路径可以自行修改。

  鼠标控制的图片大小变换

  效果描述:一开始图片按设置的比例缩小显示,鼠标移动到图片上面时,图片就会按预先设置的一个较大的比例显示。

  实现方法:

  把如下代码加入<body>区域中:

<span id="s1" style = "width : 100"> L56Linux联盟
<a href="index.shtml" L56Linux联盟
onmouseover="img1.style.width=''95'';" L56Linux联盟
onmouseout="img1.style.width= ''67'';"> L56Linux联盟
<Img src="link1.gif" id="img1"> L56Linux联盟
</a> L56Linux联盟
</span>

  注:图片的文件名及路径可以自行修改。

Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
评论】【加入收藏夹】【 】【打印】【关闭
※ 相关链接
 ·网页鼠标右键被禁用破解又一法  (2007-11-23 14:41:21)
 ·完全解析浏览器挡不住的网页对话框广告  (2007-11-23 13:43:28)
 ·JavaScript网页验证函数(使用正则表达式)  (2007-11-23 12:40:45)
 ·将RTF格式的文件转成HTML并在网页中显示的代码  (2007-11-23 10:56:23)
 ·网页中一些常见的问题与解决代码  (2007-11-20 11:57:55)
 ·网页表单的javascript集成验证方法举例  (2007-11-20 11:56:53)
 ·网页设计中JS与Java的区别  (2007-11-20 11:56:28)
 ·网页左右上下浮动广告代码制作  (2007-11-20 11:49:07)
 ·网页表单自动填写技术(gmail为例)  (2007-11-16 17:07:55)
 ·浅谈网页上显示日期的方法  (2007-11-16 17:05:20)