本篇文章给大家通过代码实例来介绍 JavaScript 如何实现滑动门效果. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
一, 实现滑动门所需技术
1, 简单的 html 基础知识
2, 简单的 CSS 基础样式
3, 基本的 JavaScript 知识
二, 如何实现滑动门(重点)
准备好一段 HTML 代码
- <p id="container">
- <img src="images/20190503222903.png"/><!-- 图片可以自己修改 -->
- <img src="images/20190503222943.png"/>
- <img src="images/20190503223003.png"/>
- <img src="images/20190503223514.png"/>
- </p>
给当前 HTML 结构添加样式
- *{
- margin: 0;
- padding: 0;
- background-color: #ccc;
- }
- p{
- text-align: center;
- }
- #container{
- width: 1130px;
- height: 350px;
- margin: 0 auto;
- border:1px solid #FF0000;
- overflow: hidden;
- position: relative;
- }
- #container img{
- width:500px;
- height:350px;
- display: block;
- position: absolute;
- }
最后使用 JS 代码实现效果
- // 加载 dom 树
- Windows.onload = function(){
- // 定义盒子
- var box=document.getElementById('container');
- // 定义图片
- var imgs=box.getElementsByTagName('img');
- // 图片宽度
- var imgWidth = imgs[0].offsetWidth;
- // 隐藏宽度
- var exposeWidth = 210;
- // 盒子宽度
- var boxWidth = imgWidth + (imgs.length -1) * exposeWidth;
- box.style.width='px';
- // 设置每道门的初始位置
- function SetImgsPos(){
- for(var i = 1;i<imgs.length;i++){
- imgs[i].style.left = imgWidth + exposeWidth*(i -1)+ 'px';
- }
- }
- SetImgsPos();
- // 计算每道门应该移动的距离
- var translate = imgWidth - exposeWidth;
- // 为每道门绑定事件
- for(var i=0;i<imgs.length;i++){
- // 使用立即调用的函数表达式, 为了获得不同的 i 值
- (function(i){
- imgs[i].onmouseover = function(){
- SetImgsPos();
- // 打开门
- for(var j=1;j<=i;j++){
- imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';
- }
- }
- })(i);
- }
- }
效果展示
根据上面的步骤, 就可以实现简单的滑动门效果, 快去试试吧!!!
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17509.html