javascript实现七屏百叶窗效果

最新推荐文章于 2024-04-17 10:08:16 发布

YINGYINT5710

最新推荐文章于 2024-04-17 10:08:16 发布

阅读量688

点赞数

分类专栏： javascript 文章标签： html javascript

本文链接：https://blog.csdn.net/YINGYINT5710/article/details/52517849

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

即鼠标放在的那张图片的宽度变大，其余图片的宽度慢慢变小，采用float布局方式。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>七屏百叶窗</title>
<style type="text/css">
*{padding:0;margin:0;}
#container{width:850px;height:370px;margin:20px auto;background:#000;padding:10px 10px;}
#container .title{height:36px;width:850px;}
#container .title img{width:100%;height:36px;}

#imgs{width:850px;height:336px;margin:0 auto;overflow:hidden;float:left;}
#imgs div{width:50px;overflow:hidden;height:336px;float:left;}
#imgs div img{width:590px;height:336px;}
</style>
<script type="text/javascript">
/*使用流布局，宽度会自动撑开父框*/
var _moveFlag = 0,_timer=0,_current=null;
function getId(_id){//根据元素的id获取id
return document.getElementById(_id);
}
function createElement(){
var _imgs = getId("imgs");
var _img = null,_div=null;
for(var i=1;i<=6;i++){
_div = document.createElement("div");//创建存放图片的div,初始化宽度，越过部分隐藏
_div.style.width = "140px";
_img = document.createElement("img");//创建图片标签，并设置src，
_img.src = "images/0"+i+".jpg";
if(i>0){//除第一张图片都设置一个左边框
_img.style.borderLeft = "2px solid #000";
}
_div.appendChild(_img);//将元素添加到父框中
_imgs.appendChild(_div);//将元素添加到父框中
}
addEvent();
}
function addEvent(){//添加事件
var _container = getId("imgs");
var _divs = _container.getElementsByTagName("div");
for(var i=0;i<_divs.length;i++){
_divs[i].index = i;//为每一个div设置一个索引值
_timer = 0
_divs[i].onmouseover = function(){
var _index=this.index;//使_index值为当前触发事件的div的索引值
_current=this;
function move(){
window.clearTimeout(_timer);
_moveFlag = 1;
var _sum = 0;
for(var j=0;j<_divs.length;j++){
if(j!==_index){//非当前对象宽度减少
var _width = parseInt((_divs[j].currentStyle||window.getComputedStyle(_divs[j],null))["width"]);
if(_width>50){//宽度大于50就减小，否则不动
_divs[j].style.width = _width-10+"px";
}//除当前div外的div的宽度
_sum+=parseInt((_divs[j].currentStyle||window.getComputedStyle(_divs[j],null))["width"]);
}
}
//当前div的宽度为总宽度减去其它div的宽度和
_divs[_index].style.width = 840-_sum+"px";
if(840-_sum<590){//当前div的宽度未达到标准，继承调用计时器
_timer = setTimeout(move,100);
}else{
return;
}
}
move();
}

}
}
window.onmousemove = function(e){
var e = e || window.event;//事件兼容写法
var _cWidth = getId("container").offsetWidth;//获取container的带边框的宽度
var _cHeight = getId("container").offsetHeight;//获取container的带边框的高度
var _wWidth = document.body.clientWidth;
var _wHeight = 20;
var _left =(_wWidth - _cWidth)/2;//获取container与浏览器左边界的值
if((e.clientX<_left)||(e.clientX>(_left+_cWidth))||(e.clientY<_wHeight)||(e.clientY>_wHeight+_cHeight)){//光标离开container区域
if(_moveFlag==1){
window.clearTimeout(_timer);
var _divs = getId("imgs").getElementsByTagName("div");
//var _timer3 = 0;
//function move(){
//window.clearTimeout(_timer3);
//var _tag = 0;
for(var i=0;i<_divs.length;i++){
//var _width =parseInt((_divs[i].currentStyle||window.getComputedStyle(_divs[i],null))["width"]);
//if(_divs[i]!==_current){
//if(_width<140){
// _divs[i].style.width = _width+10+"px";
// _tag++;
//}
//}else{
// if(_width>140){
// _divs[i].style.width = _width-10+"px";
// _tag++;
// }
//}
_divs[i].style.width = "140px";
}

//if(!_tag){
//_current = null;
//window.clearTimeout(_timer3);
//return;
//}else{
//_timer3 = setTimeout(move,100);
//}
//}
//move();
moveFlag = 0;
}
}
}
function getStyle(_obj){
if(_obj.currentStyle){
return _obj.currentStyle;
}else{
return window.getComputedStyle(_obj,null);
}
}
window.onload = function(){
createElement();
}
</script>
</head>
<body>
<div id="container">
<div class="title"><img src="images/tt_logo.jpg"/></div>
<div id="imgs"></div>
</div>
</body>
</html>