原声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(); //创建一个数组 ...

随机推荐

数据库一些常用的SQL语句
1.多表连接查询: 假设现在有三个表,One,Two,Three: One表字段:Code(主键),Name Two表字段:Birthday,T_code(One表Code的外键) Three表字段: ...
mac系统，git上刚刚checkout出来的文件，一检查，发现已经被修改过了，怎么破？？？
如下图中所示: 事实上,checkout之后什么都还没做,这些文件为何就被修改? 检查一下别的电脑上所存放的同一套源码,原来出问题的文件都是同名文件,只不过是有大小写区分而已!!! linux系统可以 ...
Samba 共享文件后在Windows 上无法访问的问题
/etc/samba/smb.conf的配置如下: #============================ Share Definitions ========================== ...
iOS错误总结（三）
1.如果tableView设置为分组的样式(默认是有cell之间的分割线,可以设置颜色),默认有组以及组尾的高度需要手动在组头组尾的代理方法中进行组高的设置(如果想设置为0,最好写0.01) 2.组 ...
iOS打包ipa包
创建证书之类这里就不说了,毕竟我也没有弄过. 我是团队开发,直接给我的p12文件,去开发者中心下载provision并且是distribute的就可以了. 1>.Xcode打包: 注意两个地方都 ...
uvm - driver
`ifndef MY_DRIVER__SV `define MY_DRIVER__SV class my_driver extends uvm_driver; function new(string ...
第三方登录 QQ 错误码100044（提示该应用非官方正版应用）
当你碰到这个问题的时候,不要着急,你的功能已经走通了,代码没有问题. 100044 原因: 1.首先确定你的包名和签名,跟申请第三方平台的是一个.(真心吐槽一下,接盘侠不好当,尤其是没有交接的) 2. ...
win10使用小技巧以及常见问题处理方案
1.win10开机一直处于黑屏状态或者反复重启怎么处理? 处理小方法:开机按win+X组合件进入高级修复模式---选择修复开启模式---f4进入安全模式开机状态---管理控制面板---禁用或者卸载显卡 ...
css 清除浮动最佳方法！
.clear:after{content:'\0020';display:block;height:0;clear:both} .clear{*zoom:1}
Android消息的提示,Toast吐司方式
1:选中某个控件进行触发 2:触发事件进行监听,然后绑定Toast对象进行消息提示 1,创建Android项目的时候,自带的一个Activity,我们看看代码 package com.example. ...

原声JavaScript实现滚动条·改1

原声JavaScript实现滚动条·改1的更多相关文章

随机推荐

热门专题