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>
Javascript 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
JS创建对象的写法示例
Nov 04 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
You might like
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php缓存技术详细总结
2013/08/07 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
本地存储localStorage用法详解
2017/07/31 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python基础教程之循环介绍
2014/08/29 Python
Python常用模块用法分析
2014/09/08 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
Python iter()函数用法实例分析
2018/03/17 Python
python构建基础的爬虫教学
2018/12/23 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
工作会议欢迎词
2014/01/16 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
个人存款证明书
2014/10/18 职场文书
运动会运动员赞词
2015/07/22 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL