大侠们能帮小弟做一个时间倒影效果来看看?听说是用什么filter来做?不是用javascript代码来实现吗?我觉得吧 能显示就行不管什么都行。我现在还是个学生就好奇着玩,想我博客里面那样那些有趣的效果的js代码也可以贴出来瞧瞧,别搁着长毛了。嘿嘿,贴者必有份。
{
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage(HTMLControlID,degree) {
if(window.navigator.userAgent.indexOf('MSIE') > -1)
{
//处理IE浏览器
var imageToRotate = document.getElementById(HTMLControlID); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
var deg2radians = Math.PI * 2 / 360;
var degreeToRotate =degree // 旋转度数;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
var w=document.getElementById(HTMLControlID).width;
var h=document.getElementById(HTMLControlID).height;
document.getElementById(HTMLControlID).width=h;
document.getElementById(HTMLControlID).height=w;
n+=1;
if(n<2)
{
rotateImage(HTMLControlID,degree);
}
else
{
n=0;
}
}
}
</script>
</head><body>
<table width="100%" height="100%" border="0">
<tr><td>
<A href="javascript:rotateImage('imgRotate' , 90);">旋转90度</A>
<A href="javascript:rotateImage('imgRotate' , 180);">旋转180度</A>
<A href="javascript:rotateImage('imgRotate' , 270);">旋转270度</A>
<A href="javascript:rotateImage('imgRotate' , 360);">原图</A></td></tr>
<tr><td>
<canvas id="canvas" ><img id="imgRotate" src="我累了,困了.jpg" />
</canvas></td></tr></table>
</body>
</html>
<script>
var n=0;
</script>}
像这些有趣的代码都可以拿出来 谢谢了
{
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage(HTMLControlID,degree) {
if(window.navigator.userAgent.indexOf('MSIE') > -1)
{
//处理IE浏览器
var imageToRotate = document.getElementById(HTMLControlID); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
var deg2radians = Math.PI * 2 / 360;
var degreeToRotate =degree // 旋转度数;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
var w=document.getElementById(HTMLControlID).width;
var h=document.getElementById(HTMLControlID).height;
document.getElementById(HTMLControlID).width=h;
document.getElementById(HTMLControlID).height=w;
n+=1;
if(n<2)
{
rotateImage(HTMLControlID,degree);
}
else
{
n=0;
}
}
}
</script>
</head><body>
<table width="100%" height="100%" border="0">
<tr><td>
<A href="javascript:rotateImage('imgRotate' , 90);">旋转90度</A>
<A href="javascript:rotateImage('imgRotate' , 180);">旋转180度</A>
<A href="javascript:rotateImage('imgRotate' , 270);">旋转270度</A>
<A href="javascript:rotateImage('imgRotate' , 360);">原图</A></td></tr>
<tr><td>
<canvas id="canvas" ><img id="imgRotate" src="我累了,困了.jpg" />
</canvas></td></tr></table>
</body>
</html>
<script>
var n=0;
</script>}
像这些有趣的代码都可以拿出来 谢谢了
而canvas,恰好IE8以下还都不支持。
其实时间,归纳起来就是0到9一共十个数字再加上一个冒号而已。做11个对应的图片,每个图片既有正立部分,也包含倒影部分,就OK了。
然后取时间,拆解成对应的符号,调用相应的图片。一个兼容的效果就出来了。
用线性分隔
吧要显示倒影的div 复制 然后复制的div只显示一像素的高度 并偏移显示指定的像素行
然后吧复制的div到过来行排列显示就可以了
<head>
<title>时间倒影</title>
<script language=javascript>function showClock(){
d = new Date();
hours = d.getHours();
minutes = d.getMinutes();
seconds = d.getSeconds();
clck = (hours>=12)?"下午":"上午";
hours = (hours>12)?hours-12:hours;
hours = (hours<10)?"0"+hours:hours;
minutes = (minutes<10)?"0"+minutes:minutes;
seconds = (seconds<10)?"0"+seconds:seconds;
time = clck + " " + hours + ":" + minutes + ":" + seconds; time = "<font size='5' face='Arial'><b>" + time + "</b></font>"
myclock1.innerHTML = time;
myclock2.innerHTML = time;
myclock2.style.left = myclock1.style.posLeft;
myclock2.style.top = myclock1.style.posTop + myclock1.offsetHeight; setTimeout("showClock()",1000);
}</SCRIPT>
</head>
<body onLoad="showClock()">
<div id = "myclock1" style="height:20px;left:50;position:absolute;padding-bottom:3px"></div>
<div id = "myclock2" style="filter:flipv() alpha(opacity=30);position:absolute"></div>
</body>
</html>
一种思路是position定位方式在每隔1px左边距和上边距的地方依次绘制由深入浅的颜色。
这种炫特技的方式楼主还是少用的好,一门语言的精髓不在这里。
如果面试前端,你对面试官说想不想看一个很炫的技术的时候,很可能会让HR立即中止面试。
建议你看看雅虎首席前端工程师 泽卡斯的博客(如何通过Nicholas C. Zakas的面试):
http://www.cn-cuckoo.com/2010/01/09/surviving-an-interview-with-nicholas-c-zakas-1346.html