JS之滚动条效果2
在前面一篇说的是滚动条效果，本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下：拖动滚动条左右移动时，上面的图片内容也相对外层盒子做相对移动。
下面针对要实现的效果进行分析：首先是页面基础结构，要实现内容的相对移动，里面的内容需要针对外层盒子相对定位，宽度应该大于外层盒子，而且外层盒子应该超出隐藏。下面是一个滚动条，由底层和滚动两部分组成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border:none;
} #box{
width: 800px;
height: 200px;
border: 1px solid #ddd;
position: relative;
margin: 100px auto;
overflow: hidden;
} #box ul{
width: 2600px;
position: absolute;
left: 0;
top: 20px;
} #box ul li{
float: left;
} #box_bottom{
position: absolute;
left: 0;
bottom: 0;
background-color: #e8e8e8;
width: 100%;
height: 25px;
} .mask{
position: absolute;
left: 0;
top:0;
height: 25px;
width:100px;
background-color: #aaa;
border-radius: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<ul id="box_top">
<li><img src="data:images/img1.jpg" alt=""></li>
<li><img src="data:images/img2.jpg" alt=""></li>
<li><img src="data:images/img3.jpg" alt=""></li>
<li><img src="data:images/img4.jpg" alt=""></li>
<li><img src="data:images/img5.jpg" alt=""></li>
<li><img src="data:images/img6.jpg" alt=""></li>
<li><img src="data:images/img7.jpg" alt=""></li>
<li><img src="data:images/img8.jpg" alt=""></li>
<li><img src="data:images/img1.jpg" alt=""></li>
<li><img src="data:images/img2.jpg" alt=""></li>
<li><img src="data:images/img1.jpg" alt=""></li>
<li><img src="data:images/img2.jpg" alt=""></li>
<li><img src="data:images/img3.jpg" alt=""></li>
<li><img src="data:images/img4.jpg" alt=""></li>
<li><img src="data:images/img5.jpg" alt=""></li>
<li><img src="data:images/img6.jpg" alt=""></li>
<li><img src="data:images/img7.jpg" alt=""></li>
<li><img src="data:images/img8.jpg" alt=""></li>
<li><img src="data:images/img1.jpg" alt=""></li>
<li><img src="data:images/img2.jpg" alt=""></li>
</ul>
<div id="box_bottom">
<span class="mask"></span>
</div>
</div>
</body>
</html>
此时我们已经实现了基础的页面效果，但是，需要注意的时，在上面的效果中，我们为滚动条设置了滚动宽度，但是在实际过程中，当外层盒子宽度固定时，滚动内容越长，滚动条会越短。为了实现拖动滚动条时，内容相对运动，在滚动条和内容之间存在着一定的比例关系：滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度，因此，我们首先需要根据这个关系计算出滚动条实际的宽度。
<script>
window.onload = function () {
//获取需要的标签
var box = document.getElementById("box");
var box_top = document.getElementById("box_top");
var box_bottom = document.getElementById("box_bottom");
var mask = box_bottom.children[0]; //滚动条的长度
// 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
mask.style.width = mask_len + 'px';
}
</script>
接下来就需要监听鼠标事件了，首先是鼠标的移入事件，当鼠标移入时，记录鼠标相对于盒子左边的距离，当鼠标移动时，根据鼠标的移动距离，改变滚动条的位置，实现滚动效果，同时需要计算出内容相对需要滚动的距离，最后就是鼠标移出事件，当鼠标移出时，清空事件。
其中，在滚动条移动和内容滚动之间也存在一个换算关系：内容走的距离 / 滚动条走的距离 = （内容的长度 - 盒子的长度）/ （盒子长度 - 滚动条的长度）。因此，当我们计算处了滚动条走的距离后，就可以得出内容走的距离了。
//鼠标事件
mask.onmousedown = function (event) {
var e = event || window.event; //求出初始值
var beginX = e.clientX - mask.offsetLeft; document.onmousemove = function (event) {
var e = event || window.event; //求出移动的距离
var endX = event.clientX - beginX; // 滚动边界值
if(endX <){
endX = 0;
}else if(endX >= box.offsetWidth - mask.offsetWidth){
endX = box.offsetWidth - mask.offsetWidth;
} //运动效果
mask.style.left = endX + 'px'; // 内容走的距离 = （内容的长度 - 盒子的长度） \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离
var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
box_top.style.left = -content_len + 'px'; return false;
}; document.onmouseup = function () {
document.onmousemove = null;
}
}
只需要把握住盒子，滚动条，内容之间的换算关系，计算处相对运动距离，上面的效果就可以轻松实现了。
完整代码下载：点这里
JS之滚动条效果2的更多相关文章
- JS之滚动条效果
滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条 首先要实现的是上 ...
- html和js实现滚动条效果
HTML部分 <!-- 遮罩层 --> <div id="zzc" style="z-index:-1;height:100%;width: 100%; ...
- jQuery实现模拟滚动条效果；
滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- MySql查询出来的值为 boolean类型的值
解决方案: status_flag * 1 as status_flag 乘以1之后就不会是boolean类型的值了
- 实验吧—隐写术——WP之 Fair-Play
首先,我们读题发现题目是Playfair,其实我也不知道这是什么,那么就百度一下啊 Playfair解密算法: 首先将密钥填写在一个5*5的矩阵中(去Q留Z),矩阵中其它未用到的字母按顺序填在矩阵剩 ...
- springboot配置文件启动顺序
[1]项目内部配置文件 spring boot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 1.–f ...
- 被卡住的2个问题：1.输入url不执行后台的java方法 2.改了jsp页面，再次请求还是以前的那个页面
1.问题 一个子项目,它的java代码都是打包到磁盘这个文件夹 D://commlib java代码改了之后,也是打包到这个文件夹里,刷新就可看见改了的. 要想子项目能运行,必须在主项目中从/com ...
- 计算机网络-数据结构-MAC帧头-IP头-TCP头-UDP头
第0章 数据是如何进行一步步的封装的 第一章:mac帧头定义 帧头数据结构的定义: 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME ...
- mysql将某数据库的全部权限赋给某用户，提示1044错误Access denied
mysql> grant all privileges on zabbix.* to zabbix@localhost identified by 'zabbix'; ERROR 1044 (4 ...
- 围棋术语 & 中英文 。
https://senseis.xmp.net/?ChineseGoTerms 一字 二字 三字 四字 一字 长(nobi,solid extension),是指仅靠着自己的棋盘上已有棋子继续向前延伸 ...
- CLR(Common Language Runtime) 公共语言运行库
.NET Core 使用 CoreCLR .NET Framework 使用CLR. 1. 将代码编译为IL (Intermediate Language) 2. CLR 把IL 编译为平台专用的本地 ...
- 深入详解美团点评CAT跨语言服务监控（二） CAT服务端初始化
Cat模块 Cat-client : cat客户端,编译后生成 cat-client-2.0.0.jar ,用户可以通过它来向cat-home上报统一格式的日志信息,可以集成到 mybatis.spr ...
- 收集到的关于 freeCodeCamp 中文社区
收集到的关于 freeCodeCamp 中文社区 freeCodeCamp 是一个免费学习编程的开源项目. 中文有两个,一个是 cn 一个是 one. one 是新版的,相关于硬分支.(具体什么原因, ...