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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
JS解析XML实例分析
Jan 30 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
理解javascript正则表达式
Mar 08 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
vue--vuex详解
Apr 15 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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
星际争霸任务指南——神族
2020/03/04 星际争霸
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
ini_set的用法介绍
2014/01/07 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python Tensor和Array对比分析
2020/01/08 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
零基础学python应该从哪里入手
2020/08/11 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
导游的职业规划书范文
2013/12/27 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
教师一岗双责责任书
2014/04/16 职场文书
节约用电标语
2014/06/17 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis