余志国网站设计工作室是专业从事义乌网站建设、义乌外贸网站建设、义乌网站制作、义乌网站设计的专业义乌网站建设工作室,是义乌外贸网站建设专家!

如何实现鼠标移在图片上出现渐现的效果

分类:网页设计 Tags: 鼠标 评论:0 浏览:5049 最近更新时间:2007/5/15 16:48:08

解决思路:

首先需要明确和鼠标事件相关,效果的实现主要是靠鼠标事件来驱动,而图片的渐现主要是与图片的透明度有关。

具体步骤:

方法一: 利用alpha滤镜和blendTrans滤镜实现的。
1.在类中定义所需要的两个滤镜。

<style>
.alpha{filter:alpha(opacity=20) blendTrans(duration=0.5)}
</style>

2.插入图片,并应用定义了滤镜的类。

<img src="demo.gif" class="alpha">

3.编写脚本。完整代码:

以下是引用片段:
<style> 
.alpha{filter:alpha(opacity=20) blendTrans(duration=0.5)} 
</style> 
<script> 
function fade(){ 
//如果是onmouseover事件触发的函数,设置变量v的值为100,否则(为//onmouseout所触发时)为20 
var v=(event.type=="mouseover"?100:20) 
if(event.srcElement.tagName=="IMG"&&event.srcElement.className=="alpha")//如果对象是class为alpha的图片,执行下面的代码 
with(event.srcElement){ 
filters[1].apply()//捕获对象内容的初始显示,为转换做必要的准备。 
//设置alpha滤镜参数opacity的值为变量v的值 
filters[0].opacity=v 
filters[1].play() //开始转换。 


document.onmouseover=fade//鼠标移上时触发fade函数 
document.onmouseout=fade //鼠标移开时触发fade函数 
</script> 
<img src="demo.gif" class="alpha"> 

方法二:直接改变alpha滤镜参数opacity的值,以达到渐变的效果。
1.在类中定义alpha滤镜。

<style>
.alpha{filter:alpha(opacity=20)}
</style>

2. 插入图片,并应用定义了滤镜的类。

<img src="demo.gif" class="alpha">

3. 编写脚本。完整代码:

以下是引用片段:
<style> 
.alpha{filter:alpha(opacity=20)} 
</style> 
<script> 
var obj,step 
function init(){ 
if(!(event.srcElement.tagName=="IMG"&&event.srcElement.className=="alpha") ) //如果对象不是class为alpha的图片,退出函数 
return 
obj=event.srcElement.filters.alpha 
step=10 //alpha滤镜参数opacity的值的改变量 
if(event.type=="mouseout") //鼠标移开时step值为负 
step*=-1 
fade() //调用fade()函数 

function fade(){ 
//鼠标移上时alpha滤镜参数opacity的值小于100或 鼠标移开时alpha滤//镜参数opacity的值大于20,执行下面的代码 
if((step>0&&obj.opacity<100)||(step<0&&obj.opacity>20)){ 
//alpha滤镜参数opacity的值以step为步长递增或减 
obj.opacity+=step 
setTimeout("fade()",10) //10毫秒后再次执行fade()函数 


document.onmouseover=init //鼠标移上时触发init()函数 
document.onmouseout=init //鼠标移开时触发init()函数 
</script> 
<img src="demo.gif" class="alpha"> 

注意:方法一中的样式表里两滤镜的定义顺序不要改变,否则代码中的filters[1]要与filters[0] 交换,0表示对象的第一个滤镜,1表示对象的第二个滤镜,以此类推。
提示:
l event.type返回发生的事件,如本例中的"mouseover","mouseout"。
l 也可以在img元素内加入onmouseover="init()" onmouseout="init()"。
试一试:读者可以试着实现文本框背景的渐变
特别提示
本例代码运行后,图片的默认透明度为20%,而在鼠标移到图片上时图片将逐渐清晰(透明度从20%到100%逐渐变化),而鼠标移开后图片又渐渐恢复20%的透明度。

本文地址:/199/
  • 相关文章
  • 推荐文章
  • 最新文章
发表评论





您的IP:52.200.130.163,来自:美国

留言

 


免费咨询
建站咨询热线
15967985565

扫一扫微信咨询
QQ: 358758308 Skype: yuzhiguo Facebook: yuzhiguo Email