实现图片的倒影镜面效果

最新推荐文章于 2022-07-13 07:43:07 发布

pughua

最新推荐文章于 2022-07-13 07:43:07 发布

阅读量971

点赞数

分类专栏： javascript 文章标签： xhtml 浏览器 html 文档 div

本文链接：https://blog.csdn.net/pughua/article/details/2585202

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分析了一个比较好的图片特效代码，觉得他的倒影实现比较好所有把它单独提出来，希望有人喜好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function test()

{

var odiv=document.getElementById('test');

var oimg=document.getElementsByTagName('img');

var img=oimg[0];

if (document.createElement("canvas").getContext) {

			flx = document.createElement("canvas");

			flx.width = img.width;

			flx.height = img.height;

			var context = flx.getContext("2d");

			context.translate(0, img.height);

			context.scale(1, -1);

			context.drawImage(img, 0, 0, img.width, img.height);

			context.globalCompositeOperation = "destination-out";

			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);

			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");

			context.fillStyle = gradient;

			context.fillRect(0, 0, img.width, img.height * 2);

		} else {//ie浏览器

var flx;

flx=document.createElement('img');

flx.src=img.src;

flx.style.filter='flipv progid:DXImageTransform.Microsoft.Alpha(' +

			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +

							   (img.height * .25) + ')';

							   }

//flx.style.position = 'relative';

//flx.style.top='1000px';

flx.style.left     = '-1000px';

odiv.appendChild(flx);							   



}

</script>

</head>



<body οnlοad="test()"><div id="test" style="position:relative">

<img src="My Pictures/11a925e303b.jpg" alt="" />

</div>

</body>

</html>
给一张效果图（浏览器兼容）