css3技术

CSS JavaScript打造鼠标悬停图片渐显效果!_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-09-20 13:09 我要评论( )

CSS JavaScript打造鼠标悬停图片渐显效果!,学习CSS JavaScript打造鼠标悬停图片渐显效果!,CSS JavaScript打造鼠标悬停图片渐显效果!,查看CSS JavaScript打造

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

div css xhtml xml Example Source Code

Example Source Code []

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 []

<img onMouseOut=low(this) onMouseOver=high(this) src="/uploads/divcss/logo3.gif" alt="" width="200" height="90" />


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

  我们看最终的运行效果:

div css xhtml xml Source Code to Run

Source Code to Run []


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


  怎么样,感觉不错吧。我们在实际应用中,进行一些细化,颜色进行一些调整,就可以做出非常酷炫的效果了!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • DIVCSS网页布局:用CSS实现表单form布局_div+css布局教程

    DIVCSS网页布局:用CSS实现表单form布局_div+css布局教程

    2015-10-02 15:06

  • CSSfloats来创建三栏网页布局的方法_div+css布局教程

    CSSfloats来创建三栏网页布局的方法_div+css布局教程

    2015-10-02 15:03

  • 左中右3栏布局中最先显示中栏内容的方法_div+css布局教程

    左中右3栏布局中最先显示中栏内容的方法_div+css布局教程

    2015-10-02 15:00

  • DIVCSS网页布局:三行三列自适应高度的DIV布局_div+css布局教程

    DIVCSS网页布局:三行三列自适应高度的DIV布局_div+css布局教程

    2015-10-02 14:28

网友点评