脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js调用图片

js调用图片隐藏&显示实现代码

 更新时间：2013年09月13日 17:21:13   作者：  
图片隐藏&显示效果，会在很多地方看到，本文使用js实现下，个人感觉还不错，有需要的朋友不妨参考下
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<SCRIPT>
var intTimeStep=20;
var isIe=(window.ActiveXObject)?true:false;
var intAlphaStep=(isIe)?5:0.05;
var curSObj=null;
var curOpacity=null;
function startObjVisible(objId)
{
curSObj=document.getElementById(objId);
setObjState();
}
function setObjState(evTarget)
{
if (curSObj.style.display==""){curOpacity=1;setObjClose();}
else{
if(isIe)
{
curSObj.style.cssText='DISPLAY: none;Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;';
curSObj.filters.alpha.opacity=0;
}else
{
curSObj.style.opacity=0
}
curSObj.style.display='';
curOpacity=0;
setObjOpen();
}
}
function setObjOpen()
{
if(isIe)
{
curSObj.filters.alpha.opacity+=intAlphaStep;
if (curSObj.filters.alpha.opacity<100) setTimeout('setObjOpen()',intTimeStep);
}else{
curOpacity+=intAlphaStep;
curSObj.style.opacity =curOpacity;
if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep);
}
}
function setObjClose()
{
if(isIe)
{
curSObj.filters.alpha.opacity-=intAlphaStep;
if (curSObj.filters.alpha.opacity>0) {
setTimeout('setObjClose()',intTimeStep);}
else {curSObj.style.display="none";}
}else{
curOpacity-=intAlphaStep;
if (curOpacity>0) {
curSObj.style.opacity =curOpacity;
setTimeout('setObjClose()',intTimeStep);}
else {curSObj.style.display='none';}
}
}
</SCRIPT>
</head>
<body>

<input type=text onclick="startObjVisible('objDiv');if(this.value==''){this.value=''}else{this.value=''}" value="">
<DIV id="objDiv" style="DISPLAY: none;"><img src="红背心平台/images/城市.jpg"></DIV>

</body>
</html>
您可能感兴趣的文章:

相关文章

  • js实现3D轮播图效果

    js实现3D轮播图效果

    这篇文章主要为大家详细介绍了js实现3D轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 打开新窗口关闭当前页面不弹出关闭提示js代码

    打开新窗口关闭当前页面不弹出关闭提示js代码

    打开新窗口关闭当前页面时总是弹出提示框，有没有办法避免它的弹出呢，答案是可以的接下来为大家分享一个方法可以解决此问题，感兴趣的你可不要错过了哈，希望可以帮助到你
    2013-03-03
  • JSON获取属性值方法代码实例

    JSON获取属性值方法代码实例

    这篇文章主要介绍了JSON获取属性值方法代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JS实现定时自动消失的弹出窗口

    JS实现定时自动消失的弹出窗口

    这篇文章介绍了JS实现定时自动消失的弹出窗口，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • Javascript 类型转换方法

    Javascript 类型转换方法

    Javascript (ECMA Script)是一种弱类型的语言。这并不意味着它没有数据类型，只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值。
    2010-10-10
  • js重写alert控件(适合学习js的新手朋友)

    js重写alert控件(适合学习js的新手朋友)

    这篇文章主要介绍js重写alert控件的过程比较适合学习js的新手朋友,需要的朋友可以参考下
    2014-08-08
  • JavaScript中使用import 和require打包后实现原理分析

    JavaScript中使用import 和require打包后实现原理分析

    这篇文章主要介绍了JavaScript中使用import 和require打包后实现原理分析,需要的朋友可以参考下
    2018-03-03
  • JS面向对象、prototype、call()、apply()

    JS面向对象、prototype、call()、apply()

    那天用到prototype.js于是打开看看，才看几行就满头雾水，原因是对js的面向对象不是很熟悉，于是百度+google了一把，最后终于算小有收获，写此纪念一下^_^。
    2009-05-05
  • 小程序模实现糊搜索功能

    小程序模实现糊搜索功能

    这篇文章主要为大家详细介绍了小程序模实现糊搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 减少访问DOM的次数提升javascript性能

    减少访问DOM的次数提升javascript性能

    访问修改DOM元素都会导致浏览器重新计算页面的几何变化，下面为大家介绍下javascript性能提升方法,需要的朋友可以参考下
    2014-02-02

最新评论