js实现点击往左移动

最新推荐文章于 2022-12-14 12:13:12 发布

Revival_Liang

最新推荐文章于 2022-12-14 12:13:12 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web js常用文章标签： web实现点击往左边移动 web前端实现点击往左移动

本文链接：https://blog.youkuaiyun.com/Revival_Liang/article/details/73610405

web 同时被 2 个专栏收录

75 篇文章

订阅专栏

js常用

1 篇文章

订阅专栏

本文介绍了在Vue.js项目中，如何使用JavaScript（包含ES6语法）实现在点击事件下让元素向左移动的核心代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
	<title>Document</title>
	<style>
		*{margin: 0px;padding: 0px;}
		ul{width: 10000px;height: 50px;left: 0px; position: relative; list-style: none;transition: width 0.5s;-moz-transition: left 0.5s;-webkit-transition: left 0.5s;-o-transition: left 0.5s;background: deepskyblue;}
		li{width: 100px; height: 50px;border-right:1px solid black;text-align: center; line-height: 50px;font-size: 14px;cursor: pointer; float: left;background: deepskyblue;}
	</style>
</head>
<body>
	<ul id="parent">
		<li onclick='switchStyle("id1")' id="id1">第1项</li>
		<li onclick='switchStyle("id2")' id="id2">第2项</li>
		<li onclick='switchStyle("id3")' id="id3">第3项</li>
		<li onclick='switchStyle("id4")' id="id4">第4项</li>
		<li onclick='switchStyle("id5")' id="id5">第5项</li>
		<li onclick='switchStyle("id6")' id="id6">第6项</li>
		<li onclick='switchStyle("id7")' id="id7">第7项</li>
		<li onclick='switchStyle("id8")' id="id8">第8项</li>
		<li onclick='switchStyle("id9")' id="id9">第9项</li>
		<li onclick='switchStyle("id10")' id="id10">第10项</li>
		<li onclick='switchStyle("id11")' id="id11">第11项</li>
		<li onclick='switchStyle("id12")' id="id12">第12项</li>
	</ul>
</body>
<script>
	var currentElement,frontElement,parent,screen_width,child_offset,childWidth;
	frontElement = document.getElementById('id1');
	childWidth = frontElement.clientWidth;
	frontElement.style.color = "white";
	function switchStyle(index){
		//上一次的项设置为初始状态颜色
		frontElement.style.color = '#333333';
		currentElement = document.getElementById(index);
		frontElement = currentElement;
		parent = document.getElementById('parent');
		screen_width = document.body.clientWidth;
		//获取单项的偏移值
		child_offset = currentElement.offsetLeft;
		//当前项被设置为白色字体
		currentElement.style.color = "white"
		//核心，屏幕宽除以2，当前被点击的项大于屏幕的一半则进入，然后设置偏移值，偏移值为当前项偏移值减去屏幕的一半，此时当前项的左端对齐屏幕的中间，所以还需在加上当前项的一半，才能实现居中效果，还有不明白的可以在下面评论
		if(screen_width/2<parseInt(child_offset)){
			parent.style.left = -((child_offset+childWidth/2) - screen_width/2)+"px";
		}else{
			this.parent.style.left = '0px'
		}
	}
</script>
</html>

以下是vue项目（vue-cli搭建）的实现方式，只提供jjs部分（带有es6语法），也是核心部分

<script type="text/babel">
	export default{
		data(){
			return{
				currentElement:null,
				frontElement:null,
				parent:null,
				screen_width:null,
				child_offset:null,
				childWidth:null,
				currentElement:null,
			}
		},
		mounted:function(){
		this.parent = document.getElementById('parent');
		this.screen_width = document.body.clientWidth;
		this.frontElement = document.getElementById('id1');
		this.childWidth = this.frontElement.clientWidth;
		this.frontElement.style.color = "white";
		},
		methods:{
			switchStyle:function(index){
		this.frontElement.style.color = '#19ddff';
		this.currentElement = document.getElementById(index);
		this.frontElement = this.currentElement;	
		this.child_offset = this.currentElement.offsetLeft;
		this.currentElement.style.color = "white"
		if(this.screen_width/2<parseInt(this.child_offset)){
			this.parent.style.left = -((this.child_offset+this.childWidth/2) - this.screen_width/2)+"px";
		}else{
			this.parent.style.left = '0px'
		}

			}
		}
	}
</script>