📄 14-8 “barn”滤镜.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>14-8 “Barn”滤镜</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; }
#hutia { height:260px; filter:progid:DXImageTransform.Microsoft.Barn(); }
</style>
<script>
function $(str){ return(document.getElementById(str)); }
window.onload = function(){
//捕获初始图像
$("hutia").filters[0].apply();
//改变图像的内容
$("hutia").src = "../inc/img/14-8.jpg";
//设置转换进程
$("hutia").filters[0].Percent = 10;
//绑定图片对象的鼠标移动事件
$("hutia").onmousemove = hutia_onmousemove;
}
function hutia_onmousemove(){
var i, img_center;
//计算图像中心的横坐标
img_center = $("hutia").offsetLeft + $("hutia").offsetWidth/2;
//计算需要转换的百分比
i = parseInt(Math.abs(event.clientX - img_center) / $("hutia").offsetWidth * 200);
//设置转换进程
$("hutia").filters[0].Percent = i;
}
</script>
</head>
<body>
<img id="hutia" src="..\inc\img\14-7.jpg">
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -