WEB开发 JS实例：九宫格橱窗展示
摘要：程序开发前端后端 新手前端开发用什么开发工具 传智播客前端开发就业班视频 html 代码/JavaScript <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR……
程序开发前端后端 新手前端开发用什么开发工具 传智播客前端开发就业班视频
html 代码/JavaScript
<!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=utf-8″ />
<title>无标题文档</title>
<style>
ul {
width: 310px;
margin: 0;
position: relative;
top: 30px;
left: 320px;
}
ul li {
width: 80px;
height: 80px;
background: #ccc;
border: 1px #000 solid;
margin: 10px;
float: left;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
function getStyle(obj, attr) {
if (obj.currentstyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
};
function domove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
for (var attr in json) {
if (attr == ‘opacity’) {
var iCur = parseInt(getStyle(obj, attr) * 100);
var speed = (json.opacity – iCur) / 8;
speed > 0 ? speed = Math.ceil(speed) : speed = Math.floor(speed);
if (iCur == json.opacity) {
clearInterval(obj.timer);
if (fn) { fn() };
}
else {
document.title = iCur;
obj.style.opacity = (iCur + speed) / 100;
obj.style.filter = ‘alpha(opacity:iCur)’
};
} ///透明度改变
else {
var iCur = parseInt(getStyle(obj, attr));
var dis = parseInt(json[attr]) – iCur;
var speed = dis / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iCur != parseInt(json[attr])) {
obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + ‘px’;
}
else {
clearInterval(obj.timer)
if (fn) { fn() }
};
} ///非透明度改变
}
}, 30)
}//运动库
window.onload = function () {
var aLi = document.getElementsByTagName(‘li’);
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.top = aLi[i].offsetTop + ‘px’;
aLi[i].style.left = aLi[i].offsetLeft + ‘px’;
}
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.position = ‘absolute’;
aLi[i].style.margin = 0;
} //布局转换
for (var i = 0; i < aLi.length; i++) {
var maxindex = 1;
aLi[i].onmouseover = function () {
domove(this, { ‘width’: ‘140px’, ‘height’: ‘140px’, ‘margin’: ‘-30px’ })
maxindex++;
this.style.zIndex = maxindex;
}
aLi[i].onmouseout = function () {
domove(this, { ‘width’: ’80px’, ‘height’: ’80px’, ‘margin’: ‘0’ })
}
}
}
</script>
</body>
</html>
前端开发加载部分页面 博客 阿里web前端开发面试
» 本文来自：前端开发者 » 《WEB开发 JS实例：九宫格橱窗展示》
» 本文链接地址：https://www.rokub.com/5431.html
» 您也可以订阅本站：https://www.rokub.com
近期评论