图片动态边框
鼠标指向图片时，图片动态加载边框效果如下
效果：
页面源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript指向加边框</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.bdctrl ul li
{
position: relative;
background-color: #ff4f00;
width: 138px;
display: inline;
float: left;
height: 82px;
}
.bdctrl ul li a
{
clip: rect(0px 138px 82px 0px);
position: absolute;
display: block;
}
.bdctrl ul li img
{
width: 138px;
height: 82px;
border: 0;
}
</style>
</head>
<body>
<div id="bdctrl" class="bdctrl">
<ul>
<li><a>
<img src="images/1.jpg"></a> </li>
</ul>
</div>
<br />
<div style="clear:both;"></div>
<div id="Div1" class="bdctrl">
<ul>
<li><a>
<img src="images/2.jpg"></a> </li>
</ul>
</div>
<br />
<div style="clear:both;"></div>
<div id="Div2" class="bdctrl">
<ul>
<li><a>
<img src="images/3.jpg"></a> </li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".bdctrl").each(function(i){
loadname(133,77,this);
});
});
function loadname(w,h,obj2) {
var ul, li;
var ulc = obj2.getElementsByTagName('ul');
for (var n = 0, ulmax = ulc.length; n < ulmax; n++) {
ul = obj2.getElementsByTagName('ul')[n];
li = ul.getElementsByTagName('li');
for (var i = 0, max = li.length; i < max; i++) {
li[i].a = li[i].getElementsByTagName('a')[0];
li[i].img = li[i].getElementsByTagName('img')[0];
li[i].no = 5;
li[i].timer = null;
if (li[i].a != null) {
li[i].onmouseover = function() { ani(this, true,w,h); }
li[i].onmouseout = function() { ani(this, false,w,h); }
}
}
}
function ani(obj, f,w,h) {
clearTimeout(obj.timer);
function act() {
obj.a.style.clip = 'rect(' + (5 - obj.no) + 'px ' + (w + obj.no) + 'px ' + (h + obj.no) + 'px ' + (5 - obj.no) + 'px)';
if (f && obj.no > 0) {
obj.no--;
obj.timer = setTimeout(act, 20);
} else if (!f && obj.no < 5) {
obj.no++;
obj.timer = setTimeout(act, 20);
}
}
act();
}
}
</script>
</body>
</html>
