HTML设置透明度

最新推荐文章于 2024-04-02 02:28:50 发布
最新推荐文章于 2024-04-02 02:28:50 发布
阅读量3.5k 收藏
点赞数
分类专栏： html/js/css/ajax/jeuqry

昨天在图书馆看C++的代码，看到一个电子相册，他的翻页效果做的非常好，精确到三角形。所以今天一上班就来搜索HTML的翻页效果。搜到了一个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实现图片翻书效果</title>
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>
#center {
	LEFT: 50%; POSITION: absolute; TOP: 50%
}
#DHTMLBOOK {
	BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -160px; HEIGHT: 320px
}
#TXTBOX {
	FONT-SIZE: 0.8em; WIDTH: 410px; COLOR: #aba193; FONT-FAMILY: verdana; POSITION: absolute; TOP: 320px; TEXT-ALIGN: center
}
.page {
	OVERFLOW: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; CURSOR: pointer; POSITION: absolute; HEIGHT: 100%
}
.right {
	BORDER-RIGHT: #000000 1px solid; LEFT: 50%
}
.turn {
	BACKGROUND: #000000
}
.img {
	WIDTH: 200%; POSITION: absolute; HEIGHT: 100%
}
</STYLE>

<SCRIPT type=text/javascript><!--

document.onselectstart = function () { return false; }

var nI  = 0;
var kI  = 0;
var run = false;

function setOpacity(obj,o) {
	if (o<0) o=0; else if (o>100) o = 100;
	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
	P1.style.left  = 50-(2.5*p)+"%";
	P1.style.width = (2.5*p)+"%";
	setOpacity(P1i, .5*p*p);
	if (p == 20) run = false;
}
function TPR_(p) {
	P2.style.width = 50-(2.5*p)+"%";
	setOpacity(P2i, 100-.5*(p*p));
	if (p == 20) {
		P2i.src = IMGSRC[kI].src;
		setOpacity(P2i, 100);
		P2.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
	}
}
function TPR() {
	if (!run) {
		run = true;
		P01i.src = IMGSRC[kI].src;
		P1.style.width = 0;
		kI++;
		if (kI>=nI) kI = 0;
		titLe(kI);
		P02i.src = IMGSRC[kI].src;
		P1i.src  = IMGSRC[kI].src;
		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
	} else setTimeout("TPR()", 100);
}

function TPL__(p) {
	P2.style.width = (2.5*p)+"%";
	setOpacity(P2i, .5*p*p);
	if (p == 20) run = false;
}
function TPL_(p) {
	P1.style.left  = (2.5*p)+"%";
	P1.style.width = 40+(10-2.5*p)+"%";
	setOpacity(P1i, 100-.5*(p*p));
	if (p == 20) {
		P1i.src = IMGSRC[kI].src;
		setOpacity(P1i, 100);
		P1.style.left  = 0;
		P1.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
	}
}
function TPL() {
	if (!run) {
		run = true;
		P02i.src = IMGSRC[kI].src;
		P2.style.width = 0;
		kI--;
		if (kI < 0) kI = nI-1;
		titLe(kI);
		P01i.src = IMGSRC[kI].src;
		P2i.src  = IMGSRC[kI].src;
		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
	} else setTimeout("TPL()", 100);
}
function titLe(p) {
	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}
onload = function() {
	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
	DB      = document.getElementById("DHTMLBOOK");
	P01     = DB.getElementsByTagName("span")[0];
	P01i    = P01.getElementsByTagName("img")[0];
	P02     = DB.getElementsByTagName("span")[1];
	P02i    = P02.getElementsByTagName("img")[0];
	P1      = DB.getElementsByTagName("span")[2];
	P1i     = P1.getElementsByTagName("img")[0];
	P2      = DB.getElementsByTagName("span")[3];
	P2i     = P2.getElementsByTagName("img")[0];
	nI      = IMGSRC.length;
	P1i.src = IMGSRC[kI].src;
	P2i.src = IMGSRC[kI].src;
	titLe(kI);
	DB.style.visibility = "visible";
}
//-->
</SCRIPT>

<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>

<DIV id=center>
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" οndblclick=TPL(); οnclick=TPL();><IMG class=img></SPAN>
<SPAN class="page right" οnmοusedοwn="return false;" οndblclick=TPR(); οnclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown="return false;" οndblclick=TPL(); οnclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" οnmοusedοwn="return false;" οndblclick=TPR(); οnclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN> 
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id=imgsrc style="VISIBILITY: hidden">
<IMG alt="In the early morning he departed." src="12499727220.jpg">
<IMG alt="Believing she had dreamed of the roar of his bike," src="12499727221.jpg">
<IMG alt="she woke up to the sunshine in her eyelids." src="12499727222.jpg">
</DIV>
</BODY></HTML>

其中三个照片的宽度和高度都是一样的。这个例子的实现方式与想象中有差距，丝毫没用到角度计算与图片的显示面积控制等。但其中有个样式我从来没用过，

转载资料如下：http://binyun530.blog.163.com/blog/static/14877674200743183959604/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
	
</script>

<body>
	<div>
         <div>
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf              
         </div>
         <div  style=" width: 100px; height: 100px;filter:Alpha(Opacity='100',FinishOpacity='0',Style='3');">
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf              
         </div>    
           <div  style=" width: 100px; height: 100px;filter:Alpha(Opacity='100',FinishOpacity='0',Style='2');">
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf            
         </div>
           <div  style=" width: 100px; height: 100px;filter:Alpha(Opacity='100',FinishOpacity='0',Style='1');">
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf<br />
            dfdfdfdfdfdfdfdf           
         </div>     
    </div>
</body>
</html>

 

语法解释，转载如下：http://zhidao.baidu.com/link?url=DR8tjdeDq1B2EC-jgYcbwGYx3tibze87CkW1K-Q-u2OH-2C3kbjvXQw-7rQGpueIxo1gdvzET2-anS3w_2wpk_

Alpha：设置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。

FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。

Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY：代表渐变透明效果的开始X和Y坐标。

FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。

蘑菇_1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【炫酷旋转相册----使用html书写。附全部源代码】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-20 5021
图片素材已经上传到资源里面，需要的朋友可以去下载。更改图片即可显示你女朋友的照片哦！ 全部源代码 酷炫旋转相册.html <!doctype html> <html> <head> <meta charset="utf-8"/> <title>炫酷旋转相册</title> <style> body { margin:0; background:#000; } #wrap
Moving On 第 44 届 ACM/ICPC 亚洲区域赛（银川）网络赛
Up Panda
09-03 7万+
Firdaws and Fatinah are living in a country with nnn cities, numbered from 111 to nnn. Each city has a risk of kidnapping or robbery. Firdaws's home locates in the city uuu, and Fatinah's home locate...
【炫酷旋转相册----使用html书写。附全部源代码
最新发布
m0_60147147的博客
04-02 593
酷炫旋转相册.html。
HTML自动换页相册,html版电子相册翻书特效
weixin_42175035的博客
05-31 584
【实例简介】js/css 实现html版电子相册翻书特效 比较实惠好用【实例截图】【核心代码】html版电子相册翻书特效└── xun└── 1000寻素材网├── 001.jpg├── 1000寻素材网.url├── desktop.ini├── hewhh.jpg├── images│ ├── 001│ │ ├── 02-03.jpg│ │ ├── 04-05.jpg│...
html+css+js 制作表白翻页相册
静Yu的博客
12-11 6544
html+css+js实现表白翻页相册，不一样的惊喜礼物。
Qt 控件透明度设置方法总结
04-17
"transparentTest"项目可能包含了一个用于验证上述方法的测试程序，通过运行这个程序，我们可以直观地看到不同透明度设置的效果，确保每个方法都有效。 总的来说，Qt提供了多种方式来设置控件的透明度，可以根据...
html 透明度渐变
07-01
html 透明度渐变
详解HTML5 Canvas绘制时指定颜色与透明度的方法
09-28
主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下
CSS如何只改变父元素背景透明度不改变子元素透明度
09-25
例如，你可以创建一个纯黑色且透明度为40%的1x1像素的PNG图片，然后将其设置为父元素的背景图片。虽然这种方法简单易行，但它不适用于动态改变背景颜色或有复杂背景图案的场景。 ```html ('transparent-bg.png');">...
IE、FF浏览器下修改标签透明度
09-04
1. **Firefox（FF）浏览器的透明度设置** Firefox浏览器遵循W3C的标准，它支持CSS3中的`opacity`属性来设置元素的透明度。`opacity`属性的值范围是0到1，其中0表示完全透明，1表示完全不透明。例如，将ID为"IMG1"的...
用html、css和jQuery实现图片翻页的特效
忧郁的蛋的专栏
10-26 2542
第三，设置currentImageIndex为0，表示当前显示的图片的索引，totalImages为图片的总数。在以上代码中，我们使用了绝对定位将图片叠放在一起，并将容器的宽度和高度设置为500px和300px。最后，使用jQuery来实现图片的翻页特效。我们将使用jQuery的addClass和removeClass方法，来添加或移除一个名为"active"的类，以控制图片的显示和隐藏。首先，在html中创建一个容器，用于包裹图片的内容，并设置一个唯一的ID，以便在CSS和jQuery中调用。
用HTML+CSS代码写一个3D旋转相册
BambooStrip的博客
09-08 1163
3D旋转相册CSS
前端翻页相册
learning_endless的博客
09-15 493
主要由html、css构成，加上监听鼠标进出的方向的js组成简单好看的翻页相册（用到了jQuery自行下载）
学习HTML第五天之电子相册
未来会有初音
12-13 555
图片路径用自己的其他都没什么了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body background="img/0.png" style="background-size: 100%; "onload="eee()"> <br/> <center>
电子相册系统（九）分页
owen_william的博客
04-19 929
1. 功能说明 电子相册系统要求，在用户登录系统后，需要列表显示出用户的所有保存过的图片。但是问题来了，要是用户保存的图片有几十张以上，那么是不是要在一页中显示几张呢？这样的话，那么整个页面就不好看了。所以我们要求以分页的形式显示。就是在页面的左边显示分页，每页显示三张，没有显示出来的，可以通过”上一页”或”下一页”来查看。如下图所示。 2. 构思实现 首先，我们要查出用户的
html 表格设置图片背景透明,table标签怎么实现内容不透明，背景图片透明
weixin_33180243的博客
06-04 3316
代码是这样的<!DOCTYPE html><html><head><meta charset="UTF-8"><title>课程表</title></head><body><div class="container"><table border="1" cellpadding="10"...
html相册自动翻页轮播,jquery+html仿翻页相册功能
weixin_36451610的博客
05-30 579
今天心情大好，再发一篇最进前端实现的相册模仿功能。这个相册是在一个网站的案例展示页面上实现的，没单独写出来，没时间，重用性也很差，以后有时间了再单独提取出来，写这个玩意前，我在网上找了一些案例，但是一看代码都比较傻眼，固不想去研究，所以自己写了.....下面是实现这个功能的截图如果你是一个前端，这个功能对你来说除了逻辑复杂点，其他的可能实现起都比较简单，我不是做前端的，所以前端HTML这块遇到了一...
爱情来的太快就像龙卷风
热门推荐
qq_45717538的博客
10-19 8万+
题解 uuuu yyy uuu uuu ooo rrr rr w iii ee ww yyy ooo eee uuu rrr ee yy e 首先再26个键盘上找到u所对应一行u是第几个字母u对应第7个所以对应九宫格第7个格u有四个所以是第七个格里第四个字母s，以此类推
html设置背景透明度
12-30
在HTML中设置背景透明度有两种方法： 方法一：使用rgba()函数设置透明的背景颜色 ```html (255, 0, 0, 0.5);">这是一个半透明的红色背景 ``` 在上面的例子中，rgba(255, 0, 0, 0.5)表示红色背景，透明度为0.5，即半...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值