编程 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 相关文章推荐

JavaScript设置FieldSet展开与收缩

May 15 Javascript

Mootools 1.2教程定时器和哈希简介

Sep 15 Javascript

jquery插件开发之实现jquery手风琴功能分享

Mar 10 Javascript

jQuery实现带动画效果的二级下拉导航方法

Mar 11 Javascript

详解JavaScript ES6中的模板字符串

Jul 28 Javascript

微信小程序自定义Toast实例代码

Jun 12 Javascript

解决element ui select下拉框不回显数据问题的解决

Feb 20 Javascript

使用Vue开发自己的Chrome扩展程序过程详解

Jun 21 Javascript

layui动态绑定事件的方法

Sep 20 Javascript

JS深入学习之数组对象排序操作示例

May 01 Javascript

vue实践---根据不同环境,自动转换请求的url地址操作

Sep 21 Javascript

小程序自定义轮播图圆点组件

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