`
txf2004
  • 浏览: 6977776 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

鼠标感应渐显图片

阅读更多
鼠标感应渐显图片
<html>
<head>
<title></title>
<script language="javascript">
var min=10;
var max=100;
var number=1;
function OnMouseOver(obj)
{
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("add("+obj.id+")",10);
}
function OnMouseOut(obj)
{
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("sub("+obj.id+")",10);
}
function add(obj)
{
if(obj.filters.Alpha.Opacity > max)
{
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = max;
}
else
obj.filters.Alpha.Opacity += number;
test1.innerText = "img1:"+img1.filters.Alpha.Opacity;
test2.innerText = "img2:"+img2.filters.Alpha.Opacity;
}
function sub(obj)
{
if(obj.filters.Alpha.Opacity < min)
{
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = min;
}
else
obj.filters.Alpha.Opacity += -number;
test1.innerText = "img1:"+img1.filters.Alpha.Opacity;
test2.innerText = "img2:"+img2.filters.Alpha.Opacity;
}
</script>
</head>
<body>
<img id='img1' src="http://bbs.51js.com/images/standard/51js.gif" style="filter:Alpha(Opacity=10)" onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)">
<img id='img2' src="http://bbs.51js.com/images/standard/51js.gif" style="filter:Alpha(Opacity=10)" onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)">
<div id='test1'>img1:10</div>
<div id='test2'>img2:10</div>
</body>
</html>
分享到:
评论

相关推荐

    js 特效 html 特效 鼠标感应渐显图片

    js 特效 html 特效 鼠标感应渐显图片 js 特效 html 特效 鼠标感应渐显图片

    AS制作鼠标感应图片转动

    ### AS3制作鼠标感应图片转动教程详解 在Adobe Flash中,使用ActionScript 3(简称AS3)可以实现丰富的交互式动画效果。本教程将详细解析如何利用AS3制作一个鼠标感应图片转动的实例,让图片在一个水平面上绕Y轴...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在网页设计中,提升用户体验是至关重要的,而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片,增强视觉效果,同时提供更直观的操作...

    Qt实现鼠标擦拭显示图片

    Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt实现鼠标擦拭显示图片Qt...

    flash图片滚动 鼠标感应

    【标题】"Flash图片滚动鼠标感应"涉及到的技术和知识点主要包括Flash动画制作、ActionScript编程以及交互设计。在Flash中,图片滚动通常是通过时间轴控制或编程实现动态效果,而鼠标感应则是利用ActionScript来监听...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片.rar

    jQuery+CSS实现图片感应鼠标高亮显示当前图片.rarjQuery+CSS实现图片感应鼠标高亮显示当前图片.rarjQuery+CSS实现图片感应鼠标高亮显示当前图片.rarjQuery+CSS实现图片感应鼠标高亮显示当前图片.rarjQuery+CSS实现...

    C#winform移动鼠标浮现图片

    "C# WinForm移动鼠标浮现图片"这一技术就是这样的一个例子,它允许用户将鼠标悬停在特定元素上时,显示出与该元素关联的图片或信息。这种效果在各种应用程序中都很常见,比如社交软件的头像预览、图表数据的详细信息...

    感应鼠标的图片遮罩动画

    在实际应用中,这种感应鼠标图片遮罩动画常用于产品展示、图像滑块、轮播图或者任何希望突出显示图片细节的场景。它可以增加网站的视觉吸引力,提升用户停留时间,同时也可以作为设计中的一个独特元素,体现品牌个性...

    js鼠标悬停到图片上显示文字详情效果

    在JavaScript(JS)编程中,实现“鼠标悬停到图片上显示文字详情效果”是一种常见的交互设计技术,它能够提升用户体验,使用户更容易理解图片所代表的信息。这种效果通常是通过结合HTML、CSS以及JavaScript来实现的...

    easyUI中datagrid鼠标悬浮显示图片

    easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501

    鼠标感应图片无缝左右滚动JS代码

    "鼠标感应图片无缝左右滚动JS代码"就是一种实现这种效果的技术,它允许用户通过鼠标移动来控制图片的左右滚动,为网站增添动态视觉效果。 无缝滚动通常应用于图片轮播、产品展示或者新闻滚动等场景,它通过...

    jQuery-实现仿QQ空间鼠标感应图片滚动.rar

    本项目“jQuery-实现仿QQ空间鼠标感应图片滚动.rar”旨在复刻QQ空间中经典的图片浏览功能,即当鼠标悬停在图片上方时,图片会自动向上或向下滚动,展示更多的图像内容。这个功能既提高了用户体验,又节省了页面空间...

    鼠标感应图片无缝左右JS滚动代码.zip

    【标题】"鼠标感应图片无缝左右JS滚动代码.zip" 是一个包含JavaScript代码的资源包,主要用于实现一种交互式的图片滚动效果。这种效果使得用户在网页上通过鼠标悬停就能实现图片的平滑、无缝左右滚动,增加了用户...

    鼠标感应demo

    【鼠标感应demo】是一个使用Visual Studio 2012开发的程序示例,它专注于实现鼠标事件处理,以便在用户移动鼠标时动态修改已绘制的图形。在这个demo中,我们主要探讨以下几个关键知识点: 1. **鼠标事件处理**:在...

    鼠标感应图片浏览器..

    标题中的“鼠标感应图片浏览器”指的是一个网页应用或者功能,它能够根据用户的鼠标移动、悬停或点击等交互行为来展示或操作图片。在网页设计中,这种效果常常用于图片预览、幻灯片展示或者交互式图像元素。实现这种...

    maple259683,图片加载中的鼠标感应

    标题“maple259683,图片加载中的鼠标感应”揭示了这是一个关于使用鼠标的交互式图像加载程序。这个程序可能包含了让鼠标在图片加载过程中产生特定响应的代码或设计,比如悬停效果、点击事件或者动态交互。描述中的...

    js和CSS3鼠标悬停超链接展示图片特效

    例如,当鼠标悬停到超链接上时,可以使用`transition`属性控制图片的渐入效果: ```css .hover-img { opacity: 0; transition: opacity 0.5s ease-in-out; } .hover-img:hover { opacity: 1; } ``` 这里的`...

Global site tag (gtag.js) - Google Analytics