使用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编写根据用户鼠标控制背景图片的移动的更多相关文章
- 一款js控制背景图片平铺
背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...
- 纯CSS控制背景图片100%自适应填充布局
https://blog.csdn.net/wd4java/article/details/50537562 解决: html,body{height: 100%;width: 100%;marg ...
- css控制背景图片在浏览器中居中，下拉浏览器的时候背景图一直不变
如 http://www.gm.com/ css样式如下 ;;} #con{ position:absolute; ; ; height:100%; width:100%; background-im ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 找回误删除的UBUNTU16.04桌面壁纸图片，或把桌面背景图片另存。20170114
今天遇到一个小问题,之前下载并设置为桌面壁纸的一张图片在整理文件的时候不小心删除了.由于想不起来当时从哪里找到的图,所以就想把当前桌面壁纸重新保存.经网上查询,未见正确的保存方法,故写在此处备忘. 1 ...
- css 如何让背景图片拉伸填充避免重复显示
如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
随机推荐
- JDFS:一款分布式文件管理系统，第四篇(流式云存储续篇)
一 前言 本篇博客是JDFS系列博客的第四篇,从最初简单的上传.下载,到后来加入分布式功能,背后经历了大量的调试,尤其当实验的虚拟计算结点数目增加后,一些潜在的隐藏很深的bug就陆续爆发.在此之前笔者 ...
- Java钉钉开发_02_免登授权（身份验证）（附源码）
源码已上传GitHub: https://github.com/shirayner/DingTalk_Demo 一.本节要点 1.免登授权的流程 (1)签名校验 (2)获取code,并传到后台 (3) ...
- vim与sublime，程序员的屠龙刀和倚天剑
对程序员来说,写代码是再熟悉不过的事情了,windows系统自带有记事本软件,能写写小规模的代码,可是代码量大了,它的局限性就暴露得很明显了:没有语法高亮,没有自动提示,不支持项目管理,界面难看-- ...
- hdu 5937 -- Equation(搜索)
题目链接 problem description Little Ruins is a studious boy, recently he learned addition operation! He ...
- 我的第一篇blog—— 一起来赛马呀
作为一名大三的学生现在开始学习acm,或许太晚.感叹时光蹉跎....我的blog将以讲解的形式的发布,以专题的形式的形式介绍一些基本的知识和经典的题目.虽然感觉自己所剩时间无多,但也希望起到前人种 ...
- 【转】Python实现修改Windows CMD命令行输出颜色（完全解析）
用Python写命令行程序的时候,单一的输出颜色太单调.其实我们可以加些色彩,比如用红色表示警告,绿色表示结果正常等.网上也有几篇类似的帖子,但是没有把问题讲清楚,贴的代码也不是太清晰.这里,对Win ...
- zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~
Intervals Time Limit: 1 Second Memory Limit:65536 KB Special Judge Chiaki has n intervals ...
- 容器平台选型的十大模式：Docker、DC/OS、K8S 谁与当先？
作者:刘超 来自:网易云 基础服务 无论是在社区,还是在同客户交流的过程中,总会被问到到底什么时候该用 Docker?什么时候用虚拟机?如果使用容器,应该使用哪个容器平台? 显而易见,我不会直接给 ...
- Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query，Could not locate named parameter等錯誤解決
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- 什么是GUID？
定义及格式 1.全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系 ...