论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: 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
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS JavaScript打造鼠标悬停图片渐显效果!

文章类别:div+css布局 | 发表日期:2008-10-5 15:32:46

  我们在上网的时候,经常会见到一种图片渐显的效果:在正常状态下,图片呈低透明的状态,即透明度比较低看上去是一种朦胧的效果,而当鼠标移上去的时候,图片渐渐的显示的清楚起来。这样的效果是怎么做出来的呢,我们今天来看这个实例。
  要实现这样的效果,仅是用CSS是完成不了的,需要通过JavaScript来进行控制。我们看下面的JavaScript脚本:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",40)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity =5
else if (window.highlighting)
clearInterval(highlighting)
}

  这段脚本实现了图片的渐渐显示的清楚。我们在插入图片的代码中,将图片的初始透明底设置的低一些,并设置鼠标事件,可以触动脚本的运行。看下面的代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<img onMouseOut=low(this) onMouseOver=high(this) style='FILTER: alpha(opacity=20)' src="/uploads/divcss/logo3.gif" alt="www.21shipin.com" width="200" height="90" />

  在上面的代码中:style='FILTER: alpha(opacity=20)' 即设置了图片的初始透明度。

  我们看最终的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  怎么样,感觉不错吧。我们在实际应用中,进行一些细化,颜色进行一些调整,就可以做出非常酷炫的效果了!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058