使用javascript编写根据用户鼠标控制背景图片的移动
Posted 萧萧烦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用javascript编写根据用户鼠标控制背景图片的移动相关的知识，希望对你有一定的参考价值。
在一家VR公司做前端。
起初进入前端就是一种内心的直觉，创造更好的用户体验，让页面更加友好，当然最起初接手web项目还是为了完成毕业设计。
一个网上图书商城，虽然不大，但五脏都有毕竟开刀所以避免不了很多瑕疵，项目在....待我验证下好久没去看了！https://github.com/gitxiao5/html5/tree/master/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1。
今年三月份才开始正式的工作，工作了大半年了，前端一直都没有断过，即时有时还有其他的事情，这段时间来接手的web项目不多，但是公司的网站更新了一遍又一遍，改版了该，逐渐内容充实了起来，功能越来越得到完善，但是，但是脚本语言的使用是我一直想要去驾驭的，这期间来用的基本都是第三方库，即便都能很灵活的运用，但是不知晓底层发生了什么，所以一直就像自己，亲自写一个交互，不用什么的插件，在上周公司想添加新闻板块并且是有项目列表的，做着做着就突然想到了在别的网站看到的样子。
大概是这样的鼠标单击哪里哪里的背景就会移动到哪里，或则下划线之类的，后来又想到了轮播什么的等大概都是这个样子......
1.
2.
3.
怎么做别回头。。。
HTML代码：
<!DOCTYPE html>
<html lang = \'en\'>
<head>
<meta charset = "utf-8"></meta>
<title>javascrpt</title>
<style>
*{
padding:0px;
margin:0px;
}
.news-guide{
width:216px;
height:30px;
background-image:url(\'./1.png\');
background-repeat:no-repeat;
background-size:72px 30px;
/*background-position-x:0px;*/
background-color:yellow;
}
.news-guide ul{
padding:0px;
position:relative;
width:100%;
height:100%;
/*background-color:red;*/
}
div.news-guide li.news-li{
float:left;
display:inline-block;
width:72px;
height:30px;
/*background-color:skyblue;*/
}
</style>
</head>
<body>
<div class = "news-guide">
<ul>
<li class = "news-li"></li>
<li class = "news-li"></li>
<li class = "news-li"></li>
</ul>
</div>
</body>
</html>
JS代码：
<script type = "text/javascript"> //1.获得单击区块的父元素快 var newsguide = document.getElementsByClassName(\'news-guide\'); //2.获得单击区块的集合 var newsli = document.getElementsByClassName(\'news-li\'); //获得单击区块的集合时，我们利用循环把各个区块添加索引值，并且进行事件的绑定 for(var i = 0;i<newsli.length;i++){ //给每个区块添加索引值 newsli[i].index = i; //定义一个动画定时器 var timer; //定义一个默认索引值，给后面用 var newslie=0; //这点也关键不能在css中设置，我在试的时候没反应 //这个就是背景区块 newsguide[0].style.backgroundPositionX = 0+\'px\'; //进行每个dom的事件绑定 newsli[i].onclick = function(){ //判断当前用户所单击的区块索引值和默认索引值进行比较，假若是用户是向前单击的 if(this.index > newslie){ //把用户单击的区块的索引值给默认索引值 newslie = this.index; //将动画事件交给timer来管理 timer = requestAnimationFrame(function fn(){ //判断背景图片是否到达用户单击的位置 if(parseInt(newsguide[0].style.backgroundPositionX) < newslie*72){ //让背景图片在每一帧先前进5个像素 newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) + 5 + \'px\'; //没达到之前一直回调这个动画步骤 timer = requestAnimationFrame(fn); }else{ //倘若到达了，那么我们就释放这个动画 cancelAnimationFrame(timer); } }); }else{ //否则用户就是在当前位置单击后面的区块 //把用户单击区块的索引值赋予默认索引变量 newslie = this.index; //... timer = requestAnimationFrame(function fn(){ //判断背景图片是否后退到用户单击的区块位置 if(parseInt(newsguide[0].style.backgroundPositionX) > newslie*72){ //... newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) - 5 + \'px\'; //... timer = requestAnimationFrame(fn); }else{ //... cancelAnimationFrame(timer); }; }); }; }; }; </script>
这个插件使用的前提是在IE9之前哦，没有做兼容处理，兼容的话可以用Settimeout（）等函数进行处理，
对于新手来说上面有两点是核心的，1.索引的赋值2.判断用户的思路
若是大神请淡淡飘过。
~~~~~~》《~~~~~
以上是关于使用javascript编写根据用户鼠标控制背景图片的移动的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 计时来控制鼠标停止和鼠标移动事件
如何用JavaScript 编写当鼠标放在某一个带有连接的div下时，其背景色变成自己想要的那种颜色？
如何正确响应ArcGIS JavaScript API中图形的鼠标事件