一段短小精悍的菜单特效
2009-06-03 15:46 贪婪的小猪 阅读(187) 评论(0) 编辑 收藏 举报
Code<head>
<title> </title>
<base href="http://imgqun.qq.com/cgi-bin/" />
<style>
ul,li{ margin:0; padding:0; list-style-type:none;font-family: Arial;font-size: 12px;}
#sl li
{
background: url(img?uuid=202e5f624eae0ae0dd589c74ebb44d5696);
margin-top: 2px;
height: 30px;
line-height: 30px;
width: 200px;
}
#sl li a
{
color: #000066;
text-indent: 40px;
text-decoration: none;
font: bold 12px/100% '黑体,arial';
display: block;
zoom: 1;
height: 30px;
line-height: 30px;
border-right: 5px solid #000066;
background: url(img?uuid=20c8036e8ac98e139954a5dd98a45a6804) no-repeat 200px 0px;
}
#sl li a:hover
{
color: #fff;
font-size: 13px;
border-right: none;
letter-spacing: 1px;
}
</style>
</head>
<body>
<ul id="sl">
<li> <a href="" title="" bg_y="0">dwqdwqdwq </a> </li>
<li> <a href="" title="" bg_y="-40">dwqdwqdwq </a> </li>
<li> <a href="" title="" bg_y="-80">dwqdwqdwq </a> </li>
<li> <a href="" title="" bg_y="-120">dwqdwqdwq </a> </li>
<li> <a href="" title="" bg_y="-160">dwqdwqdwq</a> </li>
<li> <a href="" title="" bg_y="-200">dwqdwqdwq </a> </li>
</ul>
<script>
var sl = {
on: function(o, type, fn) { o.attachEvent ? o.attachEvent('on' + type, function() { fn.call(o) }) : o.addEventListener(type, fn, false); return this },
$: function(o, tag) {
if (tag != undefined)
return (sl.$(o)).getElementsByTagName(tag);
return document.getElementById(o);
},
fx: function(form, to, s) {
var m = Math[form < to ? 'ceil' : 'floor'];
return function() { return form += m((to - form) * (s || 0.1)) };
},
move: function(who, attr, val, s, fn) {
var at = /backgroundPosition/i.test(attr);
var ft = parseInt(sl.css(who, attr)) || 0;
var fg = at ? (who.getAttribute("bg_y") || 0) + "px" : '';
if (this.css(who, attr) == undefined && at) ft = 200;
var fs = this.fx(ft, val,s);
clearInterval(who["time" + attr]);
who["time" + attr] = setInterval(function() {
var fe = fs();
who.style[attr] = fe + "px " + fg;
if (val == fe) { clearInterval(who["time" + attr]); }
}, 18);
return this;
},
css: function(who, key) {
if (who.style[key] != '') return who.style[key];
if (!!window.ActiveXObject) return who.currentStyle[key];
return document.defaultView.getComputedStyle(who, "")
.getPropertyValue(key.replace(/([A-Z])/g, "-$1").toLowerCase());
}
}
sl.on(window, 'load', function() {
var links = sl.$('sl', 'a');
for (var i = 0; i < links.length; i++) {
sl.on(links[i], 'mouseout', function() {
sl.move(this, 'textIndent', 40, 0.01).move(this, 'backgroundPosition', 200, 0.2);
}).on(links[i], 'mouseover', function() {
sl.move(this, 'textIndent', 45, 0.01).move(this, 'backgroundPosition', 0, 0.2);
});
}
});
</script>
