在一家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代码：

  1. <!DOCTYPE html>
  2. <html lang = 'en'>
  3.    <head>
  4.       <meta charset = "utf-8"></meta>
  5. 	  <title>javascrpt</title>
  6. 	  <style>
  7. 	     *{
  8. 		    padding:0px;
  9. 			margin:0px;
  10. 		 }
  11.  
  12. 		 .news-guide{
  13.  
  14. 		    width:216px;
  15. 			height:30px;
  16. 			background-image:url('./1.png');
  17. 			background-repeat:no-repeat;
  18. 			background-size:72px 30px;
  19.  
  20. 			/*background-position-x:0px;*/
  21. 			background-color:yellow;
  22. 		 }
  23. 		 .news-guide ul{
  24. 		    padding:0px;
  25. 			position:relative;
  26. 			width:100%;
  27. 			height:100%;
  28. 			/*background-color:red;*/
  29. 		 }
  30. 		 div.news-guide li.news-li{
  31. 		    float:left;
  32. 			display:inline-block;
  33. 			width:72px;
  34. 			height:30px;
  35. 			/*background-color:skyblue;*/
  36. 		 }
  37. 	  </style>
  38.    </head>
  39.    <body>
  40.       <div class = "news-guide">
  41. 	     <ul>
  42. 		    <li class = "news-li"></li>
  43. 			<li class = "news-li"></li>
  44. 			<li class = "news-li"></li>
  45. 		 </ul>
  46. 	  </div>
  47.     </body>
  48. </html>

　　

JS代码：

  1. 	  <script type = "text/javascript">
  2. 	     //1.获得单击区块的父元素快
  3. 		 var newsguide = document.getElementsByClassName('news-guide');
  4. 		 //2.获得单击区块的集合
  5. 		 var newsli = document.getElementsByClassName('news-li');
  6. 		 //获得单击区块的集合时，我们利用循环把各个区块添加索引值，并且进行事件的绑定
  7. 		   for(var i = 0;i<newsli.length;i++){
  8. 			   //给每个区块添加索引值
  9. 			   newsli[i].index = i;
  10. 			   //定义一个动画定时器
  11. 			   var timer;
  12. 			   //定义一个默认索引值，给后面用
  13. 			   var newslie=0;
  14. 			   //这点也关键不能在css中设置，我在试的时候没反应
  15. 			   //这个就是背景区块
  16. 			   newsguide[0].style.backgroundPositionX = 0+'px';
  17. 			   //进行每个dom的事件绑定
  18. 			   newsli[i].onclick = function(){
  19. 			    //判断当前用户所单击的区块索引值和默认索引值进行比较，假若是用户是向前单击的
  20. 			       if(this.index > newslie){
  21. 				   //把用户单击的区块的索引值给默认索引值
  22. 				      newslie = this.index;
  23. 					  //将动画事件交给timer来管理
  24. 					  timer = requestAnimationFrame(function fn(){
  25. 					      //判断背景图片是否到达用户单击的位置
  26. 					      if(parseInt(newsguide[0].style.backgroundPositionX) < newslie*72){
  27. 						    //让背景图片在每一帧先前进5个像素
  28. 							newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) + 5 + 'px';
  29. 						    //没达到之前一直回调这个动画步骤
  30. 							timer = requestAnimationFrame(fn);
  31. 						  }else{
  32. 						    //倘若到达了，那么我们就释放这个动画
  33. 						    cancelAnimationFrame(timer);
  34. 						  }
  35. 					  });
  36. 				   }else{
  37. 				   //否则用户就是在当前位置单击后面的区块
  38. 				      //把用户单击区块的索引值赋予默认索引变量
  39. 				      newslie = this.index;
  40. 					  //...
  41. 					  timer = requestAnimationFrame(function fn(){
  42. 					    //判断背景图片是否后退到用户单击的区块位置
  43. 					      if(parseInt(newsguide[0].style.backgroundPositionX) > newslie*72){
  44. 						   //...
  45. 						    newsguide[0].style.backgroundPositionX = parseInt(newsguide[0].style.backgroundPositionX) - 5 + 'px';
  46. 						   //...
  47. 							timer = requestAnimationFrame(fn);
  48. 						  }else{
  49. 						   //...
  50. 						    cancelAnimationFrame(timer);
  51. 						  };
  52. 					  });
  53. 				   };
  54.  
  55. 			   };
  56.  
  57. 			};
  58.  
  59. 	  </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. vue 父组件向子组件传递事件/调用事件

    方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...

  2. vue.js项目构建

    这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJ ...

  3. 【转】常用Maven插件

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  4. 【转】elasticsearch的查询器query与过滤器filter的区别

    很多刚学elasticsearch的人对于查询方面很是苦恼,说实话es的查询语法真心不简单-  当然你如果入门之后,会发现elasticsearch的rest api设计是多么有意思. 说正题,ela ...

  5. hdu 2609 How many 最小表示法

    How many Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  6. 使用Dapper进行参数化查询

    在使用Dapper操作Mysql数据库中我介绍了使用dapper进行CURD基本操作,但在示例代码中参数虽然也是通过@开头,但其实不是真正意义的参数化查询,而是拼接sql,这种方式不利于防止sql注入 ...

  7. maven私服 nexus2.x工作目录解读（翻译文档）

    安装nexus repository manager oss 或pro版本时,会创建两个目录:一个目录包含运行环境及应用,通常符号链接为nexus:一个目录包含所有的配置和数据,通常为sonatype ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. [问题记录]父元素position:relative的深坑

    个人博客迁移至:https://blog.plcent.com/欢迎大家访问 今天在写全屏切换的时候,发现一个问题就是切换时只能滚动第一屏,其他屏死都不动, 全屏滚动的原理: 是每次滚动父元素向上滚动 ...

  10. 62、django之MTV模型（urls,view）

    今天就进入到python最重要的阶段了django框架,框架就像胶水一样会将我们前面学的所有知识点粘合在一起,所以以前有哪些部分模糊的可以看看前面的随笔.本篇主要介绍djangoMTV模型,视图层之路 ...