在一家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编写根据用户鼠标控制背景图片的移动的更多相关文章

  1. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  2. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  3. css控制背景图片在浏览器中居中，下拉浏览器的时候背景图一直不变

    如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...

  4. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  5. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  6. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  7. 找回误删除的UBUNTU16.04桌面壁纸图片，或把桌面背景图片另存。20170114

    今天遇到一个小问题,之前下载并设置为桌面壁纸的一张图片在整理文件的时候不小心删除了.由于想不起来当时从哪里找到的图,所以就想把当前桌面壁纸重新保存.经网上查询,未见正确的保存方法,故写在此处备忘. 1 ...

  8. css 如何让背景图片拉伸填充避免重复显示

    如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. Writing Science 笔记 6.20

    1.写作的六个要素:S: Simple 简单的 U: Unexpected 出人意料的 C: Concrete 具体的  C: Credible 可信的  E: Emotional S: Storie ...

  2. 通过express搭建自己的服务器

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...

  3. P1013

    问题 D: P1013 时间限制: 1 Sec  内存限制: 128 MB提交: 33  解决: 21[提交][状态][讨论版] 题目描述 " 找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手 ...

  4. AMD、CMD、CommonJs规范

    AMD.CMD.CommonJs规范 将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS.AMD和CMD.接下来我们看一下这几种规范. 一.模块化规范 C ...

  5. webapp 启动 手机app

    <div class="downLoad clearfix"> <div onclick="jsOpenApp.Close(this);" c ...

  6. C#仪器数据文件解析-XPS文件

    XPS为微软推出的类似于Adobe PDF的一种文件格式,个人认为XPS很好,但毕竟PDF已经被大家所熟知,因此XPS的使用很少,也少有仪器数据输出为该格式. XPS百度百科:https://baik ...

  7. 学习札记 ----wind7下如何安装SqlServer数据库

    1.控制面板 ---找到程序和功能选项 如下图所示: 2.打开程序和功能后进入如下图所示的界面,点击打开或关闭window功能. 3.启动window7自带的IIS功能.如下图所示: 4.如上动作准备 ...

  8. Kettle文本文件输出和输入控件使用中，换行符导致的问题处理

    1.如下图通过输入控件从数据库读取数据然后生成TXT文本文件,TXT文件生成原则是每一条数据生成一行数据,第二条数据换行保存 2.如下图所示,使用文本文件输入控件读入上图生成的文件,文件读入原则是按行 ...

  9. mySQL、mariaDB、noSQL、SQL server、redis之间是什么关系？

    1.首先,从数据库类型上分类,mySQL.mariaDB.SQL server这3种属于关系型数据库. noSQL属于非关系型数据库,被视为数据库革命者. redis成为内存缓存数据库,而前面的两种类 ...

  10. 索引节点inode详解

    Inode(index node),索引节点.Linux系统中,分区要进行格式化,创建文件系统.在每个Linux存储设备或存储设备的分区(可以是硬盘,软盘,U盘等)被格式化为ext3文件系统后,一般分 ...