JS实现图片推拉门效果

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量3.1k 收藏 6
点赞数
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ppppppppppsd/article/details/51151837
版权


初学者。

推拉门是网页中常见的一种形式，通过JS实现比较简单。主要是通过getElement找到节点元素，然后对其进行相应的赋值即可。

新建一个index.html文件，并在同一个目录中添加三个文件夹，images(用来当作“门”的图片），styles（用来存放css文件），scripts(用来存放js文件)。然后在index.html中添加代码：

<!doctype html>
<html>
	<head>
	<meta charset="utf-8"/>
	<title>sliding doors</title>
	<link rel="stylesheet" href="styles/doors.css"/>
	<script src="scripts/doors.js"></script>
	</head>
	<body>
		<div id="container">
			<img src="images/door1.jpg" alt="柯南" title="柯南"/>
			<img src="images/door2.jpg" alt="柯南" title="柯南"/>
			<img src="images/door3.jpg" alt="柯南" title="柯南"/>
			<img src="images/door4.jpg" alt="柯南" title="柯南"/>
		</div>
	</body>
</html>

接着是styles目录下的doors.css:

#container{
	height:600px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#container img{
	position:absolute;
	border-left:1px solid #ccc;
	display:block;
	left:0;
}

然后是scripts目录下的doors.js: 

window.onload = function()
{
	var box = document.getElementById("container");  //获得容器对象
	var imgs = box.getElementsByTagName("img");  //获得图片对象数组
	imgWidth = imgs[0].offsetWidth;  //图片宽度
	var exposeWidth = 100;  //每张图片露出的宽度
	var boxWidth = imgWidth + exposeWidth * (imgs.length - 1);
	box.style.width = boxWidth + "px";
	
	//初始化图片位置
	function reset()
	{
		for(var i = 1; i < imgs.length; i ++)
		{
			imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";
		}
	} 
	reset();
	
	//开门时候每个图片应该左移的距离
	var translate = imgWidth - exposeWidth;
	//为每个图片添加事件
	for(var i = 0; i < imgs.length; i ++)
	{
		
		//自动执行函数
		(function(i){
			imgs[i].onmouseover = function()
			{
				//重置图片位置
				reset();
				for(var j = 1; j <= i; j ++)
				{
					imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
					
				}
			};
			
		})(i);
	}
};

这样即可实现推拉门效果。

效果如下，截图略微粗糙



嘴角邪恶的弧线
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html点击图片局部放大,js实现图片局部放大效果
weixin_39890289的博客
06-09 987
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl结构如下： ...
html5 拉窗帘 效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
weixin_34218582的博客
06-04 1024
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效。该特效使用CSS transformations 和 jQuery使两块“窗帘”沿Z轴方向模拟被拉开的效果。HTML结构HTML结构十分简单：使用两个section来作为wrapper。每个section中包含一个div.cd-block和一个div.cd-half-block。第一个.cd-half-block都是空的，它用来设置背...
原生JS实现 --推拉门效果图片
weixin_46409887的博客
04-15 369
效果图片如下: css代码: <style> *{ margin:0; padding:0; } #box{ width: 838px; position: relative; margin: 0 auto; } .img{ positio...
JS实现图片''推拉门''效果
08-28 83
JS实现图片''推拉门''效果 　　''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。 　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　推拉门收缩状态.png 　　　　　　 　　　　　　　　　　...
JS实现图片''推拉门''效果_0
lishufen123a的博客
08-29 121
''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。   　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　推拉门收缩状态.png 　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"推拉门"展开状态.pn
html相册滑动手风琴效果实现,JS实现图片手风琴效果
weixin_30965253的博客
06-03 651
''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。推拉门收缩状态.png"推拉门"展开状态.png"推拉门"实现方法一：改变图片宽度html+css代码*{padding: 0;margin: 0;}.box{/*收缩状态:缩放时每个图片的大小240px 所以总大小...
九种推拉门
AnitaSun的博客
11-23 204
第一种：点击按钮，图片切换 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>妙味课堂-www.miaov.com</title> <style> /* 清楚内外边距 */ body, ul, ol { margin: 0; pa
快乐玩前端：无缝衔接轮播图——原生JS实现
我是混子我怕谁
06-10 408
原理就不讲了，太麻烦了，大致原理就是两扇推拉门，始终保持推拉门处于开启-闭合状态，大致就这样吧，原理很简单，只是说实现比较麻烦，一直想要实现这样的效果，奈何水平不够，也没那么多的时间来研究，趁最近有点闲时，就研究了一下，在部分浏览器上面可能存在一定的加载闪烁，下面是效果图（图片为网图，侵权即删）...
CSS——6.显示与隐藏、cursor、文本框聚焦、垂直对齐、文字溢出、推拉门设计、重复边框、css三角形
m0_46279684的博客
08-19 874
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。强制在一行显示所有文本，直到文本结束或者遇到br标签才换行。思路：将其它的三个三角形的颜色去掉——>四个边框的颜色都要写，写成transparent变成透明。当对象内文本溢出时显示省略标记（...）不显示省略标记（...），而是简单的裁切。设置或检索是否使用一个省略标记（...）表示对象内文本的溢出。1.首先来看下把div的宽、高都设置成0，添加边框值的效果。
js实现图片推拉门效果代码实例
10-16
本文将详细介绍如何使用JavaScript实现一种常见的网页交互效果——图片推拉门效果。这种效果通常用于增加网页的动态感和趣味性，特别是在展示图片或作为导航菜单时。我们将通过一个具体的代码实例来阐述实现过程。 ...
JS实现图片手风琴效果
01-19
”推拉门”动效也可以称作”手风琴”效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。 推拉门收缩状态.png...
js实现简洁的滑动门菜单(选项卡)效果代码
11-23
本文将深入解析如何使用JavaScript实现这种简洁的滑动门菜单（选项卡）效果。 首先，滑动门菜单通常由一组可点击的标签和相对应的内容区域组成。当用户点击某个标签时，与其对应的内容区域会显示，而其他内容区域则...
原生JavaScript实现图片滑块效果
04-11
通过原生JavaScript+Css实现图片滑块效果，通过拖动按钮实现推拉门效果.
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 620
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 598
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 299
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 907
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 233
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
用 js 实现推拉式滚动效果
05-22
实现推拉式滚动效果可以通过以下步骤： 1. 在 HTML 中创建一个包含内容的容器，设置其高度和宽度，并将 `overflow` 属性设置为 `hidden`，以隐藏超出容器大小的内容。 ```html <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> </div> ``` 2. 使用 JavaScript 获取容器和内容的高度，并计算每个页面的高度。 ```javascript const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; ``` 3. 创建一个变量 `currentPage` 来跟踪当前页面的索引，初始值为 0。在容器中创建一个滑动条，用于控制页面的滚动。 ```javascript let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); ``` 4. 为滑动条添加事件监听器，在滑动条被拖动时更新页面的位置。 ```javascript slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } ``` 5. 在滑动容器时，根据当前滚动位置计算出当前页数，并将滑动条的位置设置为当前页数的百分比。 ```javascript container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); ``` 6. 当滑动条被拖动时，根据滑动条的位置计算出当前页数，并将容器滚动到当前页的位置。 ```javascript function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } ``` 完整代码如下： ```html <style> .container { height: 200px; width: 300px; overflow: hidden; position: relative; } .slider { position: absolute; top: 50%; left: calc(100% - 10px); transform: translate(-50%, -50%); width: 10px; height: 50px; background-color: gray; border-radius: 5px; cursor: pointer; transition: top 0.2s ease-in-out; } </style> <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> <div class="slider"></div> </div> <script> const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值