用纯javascript做一个层舒卷动态效果
日期：2014-05-16 浏览次数：20395 次
用纯javascript做一个层伸缩动态效果
RT. 1.要求只用javascript 不用 jquery 什么的。
2. 功能就是 当我鼠标移动到一个图片A的时候 B,C,D 图片从他的左边依次缓慢的显示出来；当我鼠标移动到B的时候点击B 这时 ACD都不显示。B则显示出来。功能 和 百度地图右上角的 卫星 三维 地图 图片切换功能是一样的，求大神解决。
------解决方案--------------------
RT. 1.要求只用javascript 不用 jquery 什么的。
2. 功能就是 当我鼠标移动到一个图片A的时候 B,C,D 图片从他的左边依次缓慢的显示出来；当我鼠标移动到B的时候点击B 这时 ACD都不显示。B则显示出来。功能 和 百度地图右上角的 卫星 三维 地图 图片切换功能是一样的，求大神解决。
javascript
------解决方案--------------------
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; display:inline; width:100px; height:100px; line-height:100px; text-align:center; margin:0 2px; border:1px solid #000; background-color:red; }
ul li { opacity:0; }
ul li.li-a { opacity:1; }
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function fns() {
var timer;
var lis = document.getElementById('content').getElementsByTagName('li');
var obja = document.getElementById('content').getElementsByTagName('li')[3];
var objb = document.getElementById('content').getElementsByTagName('li')[0];
for(var i=0; i<3; i++) {
lis[i].style.opacity = 0;
}
obja.style.opacity = 1;
obja.onclick = function() {
timer = setInterval(function() {
for(var i=0; i<3; i++) {
var opacity = parseFloat(lis[i].style.opacity);
opacity = opacity + 0.01;
lis[i].style.opacity = opacity;
if(lis[i].style.opacity == 1) {
clearInterval(timer);
}
}
}, 100);
}
objb.onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
for(var i=1; i<4; i++) {
var opacity = parseFloat(lis[i].style.opacity);
opacity = opacity - 0.01;
lis[i].style.opacity = opacity;
if(lis[i].style.opacity < 0) {
clearInterval(timer);
}
}
}, 100);
}
}
window.onload = function() {
fns();
}
</script>
</head>
<body>
<div id='content'>
<ul>
<li>B</li>
<li>C</li>
<li>D</li>
<li class='li-a'>A</li>
</ul>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
