example13.5.html · bendell02/javascript_tutorial

代码拉取完成,页面将自动刷新

扫描微信二维码支付

取消

支付完成

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 0 Fork 0

bendell02/javascript_tutorial

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

文件

master

分支 (1)

管理

master

该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。

项目仓库所选许可证以仓库主分支所使用许可证为准

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

分支 1

标签 0

javascript_tutorial

example13.5.html

example13.5.html 3.00 KB

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Encapsulating</title>

#div2 {
 opacity: 0.0; filter: alpha(opacity=0);
 }
 
 /*
 #div1 img {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig01.png, sizingMethod='scale');
 }

#div2 img {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig02.png, sizingMethod='scale');
 }*/

</style>

function DivObj(obj) {
 this.obj = obj;

this.getAlphaOpacity = function() {
 var fltr = this.obj.style.filter;
 var indx1 = fltr.indexOf("opacity=");
 var indx2 = fltr.indexOf("");
 fltr = fltr.substring(indx1+8, indx2) / 100;

return fltr;
 }

this.getCSSOpacity = function() {
 return parseFloat(this.obj.style.opacity);
 }

// this.objGetOpacity = (this.obj.style.filter === undefined) ? this.getCSSOpacity : this.getAlphaOpacity;
 this.objGetOpacity = this.getCSSOpacity;

this.alphaOpacity = function(value) {
 var opacity = value*100;
 this.obj.style.filter = "alpha(opacity=" + opacity + ")";
 }

this.cssOpacity = function(value) {
 this.obj.style.opacity = ""+value;
 }

// this.objSetOpacity = (this.obj.style.filter === undefined) ? this.cssOpacity : this.alphaOpacity;
 this.objSetOpacity = this.cssOpacity;
 }

window.onload = function() {
 theobjs["div1"] = new DivObj(document.getElementById("div1"));
 theobjs["div2"] = new DivObj(document.getElementById("div2"));

theobjs["div1"].objSetOpacity(1.0);
 theobjs["div2"].objSetOpacity(0.0);
 }

document.onclick = function() {
 // fade-out the div1
 var currentOpacity = theobjs["div1"].objGetOpacity();

if (currentOpacity <= 0) {
 document.onclick = null;
 return;
 }

currentOpacity -= 0.1;
 theobjs["div1"].objSetOpacity(currentOpacity);

// display div2
 currentOpacity = theobjs["div2"].objGetOpacity();

currentOpacity += 0.1;
 theobjs["div2"].objSetOpacity(currentOpacity);
 }
 //]]>

</script>
 
</head>
<body>
 <div id="div1">
 <img src="example9.12_fig01.png" alt="" />
 </div>

一键复制编辑原始数据按行查看历史

bendell02 提交于 2019年08月28日 21:08 +08:00 . Update example13.5.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Encapsulating</title>

 <style type="text/css">
 div {
 position: absolute;
 top: 30px;
 left: 50px;
 }

 #div2 {
 opacity: 0.0; filter: alpha(opacity=0);
 }
 
 /*
 #div1 img {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig01.png, sizingMethod='scale');
 }

 #div2 img {
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig02.png, sizingMethod='scale');
 }*/

 </style>

 <script type="text/javascript">
 //<![CDATA[
 var theobjs = new Array();

 function DivObj(obj) {
 this.obj = obj;

 this.getAlphaOpacity = function() {
 var fltr = this.obj.style.filter;
 var indx1 = fltr.indexOf("opacity=");
 var indx2 = fltr.indexOf("");
 fltr = fltr.substring(indx1+8, indx2) / 100;

 return fltr;
 }

 this.getCSSOpacity = function() {
 return parseFloat(this.obj.style.opacity);
 }

 // this.objGetOpacity = (this.obj.style.filter === undefined) ? this.getCSSOpacity : this.getAlphaOpacity;
 this.objGetOpacity = this.getCSSOpacity;

 this.alphaOpacity = function(value) {
 var opacity = value*100;
 this.obj.style.filter = "alpha(opacity=" + opacity + ")";
 }

 this.cssOpacity = function(value) {
 this.obj.style.opacity = ""+value;
 }

 // this.objSetOpacity = (this.obj.style.filter === undefined) ? this.cssOpacity : this.alphaOpacity;
 this.objSetOpacity = this.cssOpacity;
 }

 window.onload = function() {
 theobjs["div1"] = new DivObj(document.getElementById("div1"));
 theobjs["div2"] = new DivObj(document.getElementById("div2"));

 theobjs["div1"].objSetOpacity(1.0);
 theobjs["div2"].objSetOpacity(0.0);
 }

 document.onclick = function() {
 // fade-out the div1
 var currentOpacity = theobjs["div1"].objGetOpacity();

 if (currentOpacity <= 0) {
 document.onclick = null;
 return;
 }

 currentOpacity -= 0.1;
 theobjs["div1"].objSetOpacity(currentOpacity);

 // display div2
 currentOpacity = theobjs["div2"].objGetOpacity();

 currentOpacity += 0.1;
 theobjs["div2"].objSetOpacity(currentOpacity);
 }
 //]]>

 </script>
 
</head>
<body>
 <div id="div1">
 <img src="example9.12_fig01.png" alt="" />
 </div>

 <div id="div2">
 <img src="example9.12_fig02.png" alt="" />
 </div>
</body>
</html>