HTML语言

【HTML语言】滑动门效果应该怎么做？

2020-12-11 17:12发布

站内问答 / Web前端
4191 12 11
发送
12条回答
aijingda
2楼 · 2020-12-11 18:32

现在流行的网站设计中，水平导航菜单占据了大壁江山。的确，无论是门户网站还是企事业单位网站，都大量的采用水平的导航菜单设计。而水平导航菜单中，又有绝大多数网站采用“滑动门”设计。
首先需要确定的是，制作滑动门导航菜单效果，不需要使用JavaScript，而仅仅需要使用DIV+CSS技术即可。这对于很多人来说挺值得兴奋的，因为不需要通过JS就能完成这一功能，省却了很多的代码工作。

下面直接上代码：




 

        
        测试文字
        
    


效果：

小优
3楼 · 2020-12-11 20:51

滑动门的实现共三种方法：三层嵌套、两层嵌套和绝对定位。

 

三层嵌套

　　三层嵌套，文字只能写到最里面的div里，适用于图片比较大或者拓展要求高，比如导航。

　　[注意1]要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，然后中间用margin，不与左右相叠压。

　　[注意2]因为滑动门需要宽度自适应，对最外层的

用float或inline-block使其宽度由内容撑开

.boxL{
    display: inline-block;
    background: url('boxL.png') no-repeat left 0 ;
}
.boxR{
    background: url('boxR.png') no-repeat right 0;
}
.box{
    background: url('boxM.jpg') repeat-x;
    font: 14px/30px "宋体";
    color: white;
    padding: 1px 10px 0;
    margin: 0 8px;
}

    

        
关于我们

    

 

两层嵌套

　　两层嵌套，文字只能写到最里面的div里，局限是文字最多只能到父级div的宽度，适用于图片比较小或者拓展要求小，比如按钮。

.boxR{
    display: inline-block;
    background: url('boxR.png') no-repeat right 0;
}
.boxB{
    background: url('boxB.jpg') repeat-x;
    font: 14px/30px "宋体";
    color: white;
    padding: 1px 10px 0 18px;
    margin-right: 8px;
}

    
关于我们

 

绝对定位

　　用绝对定位做的滑动门有兼容性，因为在IE6下，绝对定位父级的宽度（高度）是奇数的话，元素的right(buttom)就会有1px的偏差，且无解。

.boxL{
    position: absolute;
    top: 0;
    left: -9px;
    width: 9px;
    height: 31px;
    background: url('boxL.png') no-repeat right 0;
}
.boxR{
    position: absolute;
    top: 0px;
    right: -9px;
    width: 9px;
    height: 31px;    
    background: url('boxR.png') no-repeat right 0;
}
.box{
    position: absolute;
    background: url('boxM.jpg') repeat-x;
    font: 14px/30px "宋体";
    color: white;
    padding: 1px 10px 0;
    margin: 30px;
}

    关于我们
    

    


只爱泡泡的哆啦A梦呀
4楼 · 2020-12-11 21:02

新建一个用来放css文件的文件夹，一个名为script的文件夹放js文件，一个图片文件夹以及建一个html文件。


我是大脸猫
5楼 · 2020-12-12 10:40

一、建立html、css、javascript三个文件

在这里，我分别命名为index.html、img.css、translate.js。分别用于写三种代码，然后再index中添加

[removed][removed]

（在这里，我的三个文件是同一目录的，因此不需要路径）


二、编写index.html

这个地方我们演示简单的滑动门的效果，因此添加四张图片（大小一致，内容不同）

在body部分里面编写以下内容（四张图片已保存在同一目录内部）

这样，我们的网页就会显示四张图片了，但是它们的位置排布并没有达到我们预期的效果。


三、编写css文件

在img.css文件中添加代码

#container {margin: 0px auto;height: 477px;border-left: 0px solid #ccc;border-right: 0px solid #ccc;overflow: hidden;position: relative;}#container img {position: absolute;display: block;left: 0;border-left: 1px solid #ccc;}

用#选择id标签，外面用relative，子部分用absolute就可以根据父部分的位置取绝对位置； 

都去left为0，这样就可以看到四张图片重叠，但是还是不能形成我们想要的结果


三、编写javascript代码

1、在页面初始渲染的时候我们就要执行以下函数，所以所有部分都需要写在[removed]函数以内。

2、定义变量

var box = document.getElementById('container');var imgs = box.getElementsByTagName('img');var imgWidth = imgs[0].offsetWidth;var exposeWidth = 160;var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;box.style.width = boxWidth + 'px';

通过dom事件，获得container部分，将它命名为box，然后依次获得imgsWidth、exposeWidth、boxWidth。

imgsWidth是照片的宽，exposeWidth是我们想要实现滑动门照片所露出来的宽，box Width指的是容器的宽

3、定义初始四张图片的位置

function setImgPos(){for(var i = 1; i < imgs.length; i++){imgs[i].style.left = imgWidth + (i - 1)*exposeWidth + 'px'}}setImgPos();

第一张图片的位置依旧不变，但是从第二张开始之后，每个图片只会露出暴露的宽度。

执行代码刷新页面，我们会看到第一张图片是完全显示的 ，之后三张只显示了左边一部分

4、实现滑动效果

translateWidth = imgWidth - exposeWidth;for(var i = 0;i < imgs.length; i++){(function (i) {imgs[i].onmouseover = function () {setImgPos();for(var j = 1; j<=i; j++){imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translateWidth + 'px';}};})(i);}

首先定义一下滑动的距离，当我们鼠标放到某一张图片上，这张图片将会左移显示所有部分，其余的图片不会变。

然后为每一张图片绑定鼠标事件，距离left边框的距离将会变为原来的距离减去移动的距离。

（在绑定事件内部我们需要执行初始位置的函数，当鼠标没有放到图片上，将会初始位置一次；

用parseInt是为了将字符串转化为整数，才能进行加减运算）


茄子酱
6楼 · 2020-12-12 11:48

一、没有动画效果的运动

思路：

1.定好每张图片的初始位置（第一张完全显示，234只露出一部分）
2.计算每道门的移动距离（即未显露的部分）
3.绑定鼠标滑过事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[removed]=function(){
  var box=document.getElementById("box");
  var img=box.getElementsByTagName("img");
  //单张图片宽度
  var imgWidth=img[0].offsetWidth;
  //露出的宽度
  var exposeWidth=160;
  //设置容器总宽度
  var boxWidth=imgWidth+exposeWidth*(img.length-1)
  box.style.width=boxWidth+"px";
  //设置图片初始位置
  function setImgspos(){
    for(var i=1,len=img.length;i//len在for循环的初始化语句里先定义好，这样就不需要每次都计算img的个数了，比for(var i=1;i< class style="line-height: 17.6px; color: rgb(159, 184, 204); margin: 0px !important; padding: 0px 1em !important; outline: 0px !important; word-break: break-all !important; border-radius: 0px !important; background: none rgb(252, 252, 252) !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: auto !important; white-space: pre !important;">      img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
    }
  }
  setImgspos();
  //计算每道门打开时应移动的距离
  var translate=imgWidth-exposeWidth;
  for(var i=0,len=img.length;i
    (function(i){ //这里为什么需要匿名函数？(简单来说是函数变量作用域的问题)img[i].onmouseover=function(){}这个函数内部使用了变量i，但是i没有定义，于是向外查找，找到for循环里定义的i，点击事件是for循环执行完毕后才开始执行的，即此时i=4，所以会报错img[i]没有定义，这里加一层匿名函数相当于闭包处理，i以形参的方式传递给内层函数
      img[i].onmouseover=function(){
        setImgspos(); //每次移上去先重置位置
        for(var j=1;j<=i;j++){ //第二个循环体作用：可能会移多道门(比如放到第三道门上，二和三都要动，不是只动三，另外第一道门永远不动)
          img[j].style.left=parseInt(img[j].style.left)-translate+"px";
        }
      };
    })(i); //这个i是实参
  }
};

二、展开加速、收拢减速的运动

注意：设置每道门初始位置时，不需要在写一个function了，因为要分别写打开和关闭动画，会造成一个卡顿，瞬间闪烁。

思路：

1.需要鼠标滑过这道门的初始位置
2.需要鼠标滑过这道门的结尾位置
3.需要一个速度和定时器来完成缓缓移动的过程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
[removed]=function(){
  var box=document.getElementById("box");
  var img=box.getElementsByTagName("img");
  //单张图片宽度
  var imgWidth=img[0].offsetWidth;
  //露出的宽度
  var exposeWidth=160;
  //设置容器总宽度
  var boxWidth=imgWidth+exposeWidth*(img.length-1)
  box.style.width=boxWidth+"px";
  //设置图片初始位置
  for(var i=1,len=img.length;i
    img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
  }
  function openDoor(el,translate){
    var begin=parseInt(el.pos);
    var end=begin-translate;
    var iSpeed=10;
    setTimeout(function(){
      el.style.left=parseInt(el.style.left)-iSpeed+"px"; //为什么不用begin？每次的初始位置会变
      iSpeed*=1.5;  //没有这句话就是匀速运动
      if(parseInt(el.style.left)<=end){
        el.style.left=end+"px";
      }else{
        setTimeout(arguments.callee,25); //定时器有名字可以直接调用，没名字，就用原生js方法arguments.callee
      }
    },25);
  };
  function closeDoor(el,translate){
    var begin=parseInt(el.pos)-translate; //关门默认情况是张开的
    var end=begin+translate; //这里可以直接写var end=parseInt(el.pos);
    var iSpeed=100;
    setTimeout(function(){
      el.style.left=parseInt(el.style.left)+iSpeed+"px"; //为什么不用begin？每次的初始位置会变
      iSpeed=Math.ceil(iSpeed*0.7); //没有这句话就是匀速运动
      if(parseInt(el.style.left)>=end){
        el.style.left=end+"px";
      }else{
        setTimeout(arguments.callee,25); //定时器有名字可以直接调用，没名字，就用原生js方法arguments.callee
      }
    },25);
  };
  var translate=imgWidth-exposeWidth;
  for(var i=0,len=img.length;i
    (function(i){
      img[i].onmouseover=function(){
        //开门 自己和自己左边的全部循环到
        for(var j=1;j<=i;j++){
          openDoor(img[j],translate);
        }
        //关门 自己右边的全部循环到
        for(var j=i+1;j< class style="line-height: 17.6px; color: rgb(159, 184, 204); margin: 0px !important; padding: 0px 1em !important; outline: 0px !important; word-break: break-all !important; border-radius: 0px !important; background: none rgb(252, 252, 252) !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: auto !important; white-space: pre !important;">          closeDoor(img[j],translate);
        }
      };
    })(i);
  }
};

爱搞事的IT小男孩
7楼 · 2020-12-13 14:32

思路：

1.定好每张图片的初始位置（第一张完全显示，234只露出一部分）
2.计算每道门的移动距离（即未显露的部分）
3.绑定鼠标滑过事件

[removed]=function(){
  var box=document.getElementById("box");
  var img=box.getElementsByTagName("img");
  //单张图片宽度
  var imgWidth=img[0].offsetWidth;
  //露出的宽度
  var exposeWidth=160;
  //设置容器总宽度
  var boxWidth=imgWidth+exposeWidth*(img.length-1)
  box.style.width=boxWidth+"px";
  //设置图片初始位置
  function setImgspos(){
    for(var i=1,len=img.length;i//len在for循环的初始化语句里先定义好，这样就不需要每次都计算img的个数了，比for(var i=1;i< class>      img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
    }
  }
  setImgspos();
  //计算每道门打开时应移动的距离
  var translate=imgWidth-exposeWidth;
  for(var i=0,len=img.length;i
    (function(i){ //这里为什么需要匿名函数？(简单来说是函数变量作用域的问题)img[i].onmouseover=function(){}这个函数内部使用了变量i，但是i没有定义，于是向外查找，找到for循环里定义的i，点击事件是for循环执行完毕后才开始执行的，即此时i=4，所以会报错img[i]没有定义，这里加一层匿名函数相当于闭包处理，i以形参的方式传递给内层函数
      img[i].onmouseover=function(){
        setImgspos(); //每次移上去先重置位置
        for(var j=1;j<=i;j++){ //第二个循环体作用：可能会移多道门(比如放到第三道门上，二和三都要动，不是只动三，另外第一道门永远不动)
          img[j].style.left=parseInt(img[j].style.left)-translate+"px";
        }
      };
    })(i); //这个i是实参
  }
};


善良的琼琼姐
8楼 · 2020-12-13 17:33

新建一个用来放css文件的文件夹，一个名为script的文件夹放js文件，一个图片文件夹以及建一个html文件。



我自己打call
9楼 · 2020-12-13 17:57

  

[removed]
function secBoard(n)
{
 for(i=0;i



 

 


1 2 下一页

相关问题推荐

    没有解决我的问题，去提问