您的位置：首页 > Web前端 > JavaScript

js实现点击往左移动

2017-06-22 19:29 429 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web实现点击往左边移动 web前端实现点击往左移动

相关文章推荐

新的分享

章节导航