原声JavaScript实现滚动条·改1
修正了获取元素相对视口左距离的逻辑问题（之前的函数实际获取的是相对于页面左距离）。去除了调试时忘记删除的mouseleave事件。将创建滚动条的功能单独列为一个函数。
添加了鼠标点在滚动条什么位置，就立即卷动到什么位置的功能；添加了键盘左右键滚动的功能（滚动距离为一个内容页面）
<!DOCTYPE html>
<html>
<head>
<title>A demo</title>
<meta http-equiv="content-type" name="author" content="Fujihara No Kokukiyo" />
<meta charset="utf-8" />
</head>
<style rel="stylesheet" type="text/css">
.outer{width:500px;border:1px solid black;overflow:hidden;margin:50px 0 0 100px;}
.test_div{width:1200px;background-image:linear-gradient(90deg,lightcoral 0%,lightgreen 50%,lightblue 100%);height:150px;}
.slider_bar,.slider_block{ border-radius:5px;}
.slider_bar{position:relative;width:80%;margin:5px auto 5px auto;background-color:lightgreen;height:5px;}
.slider_block{width:20px;height:5px;background-color:grey;cursor:pointer;position:absolute;}
</style>
<script type="text/javascript">
window.onload=function(){
function Slider(slider_content){
var slider_instance=this;
this.slider_content=slider_content;
this.outer=slider_content.parentNode; createSlider(); this.slider_content_width=this.slider_content.offsetWidth-this.outer.clientWidth;
this.slider_bar_width=this.slider_bar.clientWidth-this.slider_block.offsetWidth; this.slider_content_left=0;
this.slider_block_left=0; this.slider_bar_pageLeft=getPageLeft(this.slider_bar); this.slider_block.addEventListener("mousedown",mousedownHandler,false);
this.outer.addEventListener("mouseup",mouseupHandler,false);
this.slider_bar.addEventListener("click",sliderbarClickHandler,false);
this.outer.addEventListener("keydown",sliderbarKeydownHandler,false); function createSlider(){
slider_instance.slider_bar=document.createElement("div");
slider_instance.slider_bar.className="slider_bar";
slider_instance.slider_block=document.createElement("div");
slider_instance.slider_block.className="slider_block";
slider_instance.slider_bar.appendChild(slider_instance.slider_block);
slider_instance.outer.appendChild(slider_instance.slider_bar);
}
function mousedownHandler(event){
slider_instance.mouseLeft=event.clientX-getPageLeft(this);
slider_instance.outer.addEventListener("mousemove",mousemoveHandler,false);
}
function mousemoveHandler(event){
var blockLeft=event.clientX-slider_instance.slider_bar_pageLeft-slider_instance.mouseLeft;
if(blockLeft>slider_instance.slider_bar_width){
blockLeft=slider_instance.slider_bar_width
}else if(blockLeft<0){
blockLeft=0;
}
slider_instance.slider_block.style.left=blockLeft+"px";
slider_instance.slider_content.style.marginLeft="-"+(blockLeft/slider_instance.slider_bar_width*slider_instance.slider_content_width)+"px";
}
function mouseupHandler(event){
slider_instance.outer.removeEventListener("mousemove",mousemoveHandler,false);
}
function sliderbarClickHandler(event){
if(event.target!=slider_instance.slider_block){
var blockLeft=event.clientX-slider_instance.slider_bar_pageLeft-slider_instance.slider_block.offsetWidth/2;
if(blockLeft>slider_instance.slider_bar_width){
blockLeft=slider_instance.slider_bar_width
}else if(blockLeft<0){
blockLeft=0;
}
slider_instance.slider_block.style.left=blockLeft+"px";
slider_instance.slider_content.style.marginLeft="-"+(blockLeft/slider_instance.slider_bar_width*slider_instance.slider_content_width)+"px";;
}
}
function sliderbarKeydownHandler(event){
var newMarginLeft,scrollPercent;
switch(event.keyCode){
//left
case 39:{
if(parseInt(slider_instance.slider_content.style.marginLeft)!=slider_instance.slider_content_width){
newMarginLeft=parseInt(slider_instance.slider_content.style.marginLeft)-slider_instance.outer.clientWidth;
if(-newMarginLeft>slider_instance.slider_content_width){
newMarginLeft=-slider_instance.slider_content_width;
}
scrollPercent=-newMarginLeft/slider_instance.slider_content_width;
slider_instance.slider_content.style.marginLeft=newMarginLeft+"px";
slider_instance.slider_block.style.left=scrollPercent*slider_instance.slider_bar_width+"px";
}
break;
}
case 37:{
if(parseInt(slider_instance.slider_content.style.marginLeft)!=0){
newMarginLeft=parseInt(slider_instance.slider_content.style.marginLeft)+slider_instance.outer.clientWidth;
if(newMarginLeft>0){
newMarginLeft=0;
}
scrollPercent=-newMarginLeft/slider_instance.slider_content_width;
slider_instance.slider_content.style.marginLeft=newMarginLeft+"px";
slider_instance.slider_block.style.left=scrollPercent*slider_instance.slider_bar_width+"px";
}
break;
}
}
}
function getPageLeft(el){
return el.getBoundingClientRect().left;
}
}
new Slider(document.getElementsByClassName("test_div")[0]); }
</script>
<body>
<div class="outer" tabindex="1">
<div class="test_div"></div>
</div>
</body>
</html>
原声JavaScript实现滚动条·改1的更多相关文章
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- 比较原声socket 、GCDAsyncSocket
原声socket NSInputStream 输入流(OC)NSOutputStream 输出流(OC)1:通过c语言的输入输出流CFReadStreamRef/CFWirteStreamRef(输入 ...
- 关于ios原声嵌入web页面的问题
当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...
- 大D实例化model-->调用自定义类方法,大M调用原声model方法
class ContactsModel extends Model{ public function addxxx(){ } } $conmodel = D('contacts','Model'); ...
- 移动WEB模拟原声APP滑动删除
移动WEB模拟原声APP滑动删除 效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- matrix-gui-2.0 将javascript文件夹改成js文件夹
/******************************************************************************** * matrix-gui-2.0 将 ...
- node.js 安装方法 以及 用原声搭建服务器
node.js 安装方法: 第一步: 64位的安装包网址: https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 第二步: 进入命令提示框 输入 ...
- 【原】javascript最佳实践
摘要:这篇文章主要内容的来源是<javascript高级程序设计第三版>,因为第二遍读完,按照书里面的规范,发觉自己在工作中没有好好遵守.所以此文也是对自己书写js的一种矫正. 1.可维护 ...
- 【原】javascript数组操作
继续我的第二遍<javascript高级程序设计第三版>,今天要做的笔记是array 一.数组的操作 1.数组的创建: var colors= new Array(); //创建一个数组 ...
随机推荐
- C#中Invoke 和 BeginInvoke 的区别
Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...
- 对于那本--你必须知道的499个C语言问题--总结
(1)1.3 (2)1.10没看懂 (3)1.11和1.12都讲到了 静态变量和局部变量,那么这两个是啥啊,我不懂: (4)1.13针对那两个字符串定义为啥有问题,不懂 (5)2.8是做什么的 ( ...
- mac升级后提示pod: command not found
问题:升级mac到10.12使用pod,提示pod: command not found 解决方法:sudo gem install -n /usr/local/bin cocoapods 如 ...
- Camtasia Studio屏幕录像安装与破解
Camtasia Studio汉化版是一款功能强大的屏幕录像工具,能在任何颜色模式下轻松地记录屏幕动作,包括影像.音效.鼠标移动轨迹.解说声音等.Camtasia Studio具有强大的视频播放和视频 ...
- window.location 结构
属性 含义 protocol 协议 hostname 服务器的名字 port 端口 pathname URL中主机名后的部分 search "?"后的部分,又称 ...
- C# Graphics类详解
转自于:http://blog.163.com/gis_warrior/blog/static/19361717320119227034181/ Brush 类.NET Framework 4定义用于 ...
- java io流之字节流
字节流 字节流主要是操作byte类型数据,以byte数组为准,主要操作类就是OutputStream.InputStream 字节输出流:OutputStream OutputStream是整个IO包 ...
- 解决程序出现“terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_alloc Aborted (core dumped)”的问题
最近跑程序时出现了这么一个问题: terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_al ...
- Codeforces Round #384 (Div. 2) //复习状压... 罚时爆炸 BOOM _DONE
不想欠题了..... 多打打CF才知道自己智商不足啊... A. Vladik and flights 给你一个01串 相同之间随便飞 没有费用 不同的飞需要费用为 abs i-j 真是题意杀啊, ...
- 如何理解反向传播 Backpropagation 梯度下降算法要点
http://colah.github.io/posts/2015-08-Backprop/ http://www.zhihu.com/question/27239198 待翻译 http://blo ...