网页图片特效技巧小总结

技巧|特效|图片特效|网页

  这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句、css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子。

  图片循环渐显渐隐

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

  实现方法:

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

<img src="http://www.webjx.com/htmldata/2006-02-27/image1.gif" name="u" border=0
alt="Image" style="filter:alpha(opacity=0)">

<script language="JavaScript">
var b = 1;
var c = true;
function fade()
  if(document.all);
    if(c == true)
      b++;
  
  if(b==100)
    b--;
    c = false
  
  if(b==10)
    b++;
    c = true;
  
  if(c == false)
    b--;
  
  u.filters.alpha.opacity=0 + b;
  setTimeout("fade()",50);

</script>

  2、把<body>改为:

<body bgcolor="#ffffff" >

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

  禁止图片下载

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

  实现方法:

<A HREF="javascript:void(0)" 对不起,此图片不能下载!")">
<IMG SRC="http://www.webjx.com/htmldata/2006-02-27/2.gif" Align="center" Border="0" width="99" height="50"></A>

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

  鼠标控制图片隐现效果

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

  实现方法:

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

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

//-->
</SCRIPT>

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

<img src="http://www.webjx.com/htmldata/2006-02-27/2.gif" style="filter:alpha(opacity=20)"
 
 >

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

  鼠标控制的图片大小变换

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

  实现方法:

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

<span id="s1" style = "width : 100">
<a href="index.shtml"
95";"
67";">
<Img src="http://www.webjx.com/htmldata/2006-02-27/link1.gif" id="img1">
</a>
</span>

时间: 2024-10-03 11:48:25

网页图片特效技巧小总结的相关文章

网页图片特效小技巧

技巧|特效|图片特效|网页 这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句.css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子. 图片循环渐显渐隐 效果描述:图片循环渐显渐隐-- 实现方法: 1.把如下代码加入<body>区域中: <img src="http://www.webjx.com/htmldata/2005-05-25/image1.gif" name="u"

网页图片设计技巧:制作清晰可见像素图片

文章描述:大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,在放大.缩?⑿笮楸弑涞母现亓耍蛘呤窃贏I里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变"糊了",这是我们双眼所不允许的,我们要让每一个像素 大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,在放大.缩小.旋转后虚边变的更严重了,或者是在AI里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变"糊了&q

js 显示base64编码的二进制流网页图片_javascript技巧

Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc

网页图片的使用技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 图片已经成为网页设计中不可或缺的元素,但是对于普通网站来讲,图片也成为页面加载的一大负担.因此,一个好的网站要求站长合理的使用图片,灵活运用网页图片处理技巧和网页图片设计规则,让图片在传达信息和美化界面的同时又不会给网站的浏览速度带来影响. 在网页中使用用图片,先要处理要用到的图片,再利用网页制作工具在需要的位置插入相应的图片,然后设置其宽度

使用JavaScript解决网页图片拉伸问题(推荐)_javascript技巧

问题描述 这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案.自己先做了一个简单的demo来展示问题. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

JS设置网页图片vspace和hspace属性的方法_javascript技巧

本文实例讲述了JS设置网页图片vspace和hspace属性的方法.分享给大家供大家参考.具体分析如下: hspace可以以像素为单位,指定图像左边和右边的文字与图像之间的间距:vspace 值则是上面的下面的文字与图像之间的距离的像素数 <!DOCTYPE html> <html> <head> <script> function setSpace() { document.getElementById("compman").hspac

网页图片快速显示的方法和技巧

1. Use .gifs rather than .jpgs. GIFs are smaller in size when compared to JPGs. 1.用.gifs格式保存图片,最好不要用.jpgs格式.因为前者的尺寸比后者小. 2.Use "Height" and "Width" tags for your images. So while page loading certain place is left for the images and vi

125个提升网页可用性的优化小技巧(四)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> <有图有案例!125个提升网页可用性的优化小技巧(三)> 尽可能兼顾不同用户的知识和技能水平 用户可能是新手.专家或介于两者之间,要根据用户情况设计界面. △ 使用适当的新人引导(四种主要的新人引导策略) 这四种用法刚好可以用一个2*2的矩阵来表示.根据下方图示选择最适合你界面的方式: △ 为新手用户添加提示而不干扰专家用户 △ 使用卡片分

125个提升网页可用性的优化小技巧(三)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> 除了引导用户,还要减少他们的认知流程,以保持流畅状态. 尽可能少让用户做计算 千万别把计算这种事情丢给用户,让计算机来处理. △ 显示剩余数量 在界面内体现用户当前所处位置 界面就像机场,如果没有"你在这里"的标记,用户会迷路,因此记得提供标记. △ 在导航菜单上突出当前所选 △ 在复杂的界面中提供面包屑导航或步骤图示 △ 在页面标