您的位置：首页 > Web前端 > HTML

实现图片的倒影镜面效果

2008-06-25 13:05 330 查看

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

<!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 onload="test()"><div id="test" style="position:relative">

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

</div>

</body>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xhtml 浏览器 html 文档 div

相关文章推荐

新的分享

章节导航