编程 Javascript

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

Posted in Javascript onSeptember 13, 2013

<!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调用图片隐藏&显示实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery语法总结和注意事项小结

Nov 11 Javascript

jQuery写的日历(包括日历的样式及功能)

Apr 23 Javascript

JavaScript 封装一个tab效果源码分享

Sep 15 Javascript

理解javascript中Map代替循环

Feb 26 Javascript

bootstrap网页框架的使用方法

May 10 Javascript

[原创]Javascript 实现广告后加载可加载百度谷歌联盟广告

May 11 Javascript

一种基于浏览器的自动小票机打印实现方案(js版)

Jul 26 Javascript

浅谈js键盘事件全面控制

Dec 01 Javascript

vue-router 权限控制的示例代码

Sep 21 Javascript

jQuery使用动画队列自定义动画操作示例

Jun 16 jQuery

Vue.js组件高级特性实例详解

Dec 24 Javascript

vue实现简单图片上传

Jun 30 Javascript

javascript常用对话框小集

Sep 13 #Javascript

toggle一个div显示或隐藏且可扩展成自定义下拉框

Sep 12 #Javascript

jquery easyui滚动条部分设置介绍

Sep 12 #Javascript

jquery实现盒子下拉效果示例代码

Sep 12 #Javascript

利用jquery包将字符串生成二维码图片

Sep 12 #Javascript

JQuery实现鼠标滑过显示导航下拉列表

Sep 12 #Javascript

JQuery加载图片自适应固定大小的DIV

Sep 12 #Javascript

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

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