div模拟selection标签下拉列表

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>垂直滚动条</title>

  <style type="text/css">

     .box{

       border:1px solid red;

       width:300px;

       height:500px;

       margin:50px auto;

       overflow:hidden;

       position:relative;

     }

     .content{

     height:1000px;

     padding-right:25px;

     position:relative;

     left:0;

     top:0;

     }

     .scrollBox{

       position:absolute;

       top:0;

       right:0;

       width:20px;

       height:500px;

       background:#b5b5b5;

     }

     .scroll{

       width:inherit;

       height:100px;

       background:#ff3300;

       position:absolute;

       left:0;

       top:0;

       cursor:pointer;

     }

  </style>

 </head>

 <body>

   <!--

     分析

     就是一个大盒子

     里面有左右两个盒子

     左边:文字内容

     右边:一个背景滚动条

     而且有一个子盒子(红色小方块)

     一共四个盒子

    结构:

    <div>

        <div></div>

        <div>

            <div></div>

        </div>

    </div>

   -->

 <div class="box">

   <div class="content">

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

    帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9帅哥天下9

 </div>

 <div class="scrollBox">

    <div class="scroll"></div>

       </div>

   </div>

   <script type="text/javascript">

   /*

     初步分析  应该是  红色滚动轴跟随鼠标移动

     然后内容根据红色滚动在父元素高度的距离百分比  我移动1%  你移动1%

     刚开始的 

   */

   var scroll=document.querySelector(".scroll");

   var content=document.querySelector(".content");

   var scrollBox=document.querySelector(".scrollBox");

       /*内容越多的时候  滚动条应该越短

        公式就是   容器高度*容器高度/内容高度

                          一个属*一个小于一的数  永远不可能大于自己

                */

        ~~function setScrollLength(){

              if(scroll.offsetHeight<=10){

               scroll.style.height="10px";

              }

              else{

              scroll.style.height=scrollBox.offsetHeight*scrollBox.offsetHeight/content.offsetHeight+"px"

              }

        }();

        ~~function start(){

        scroll.onmousedown=function(event){

            var that=this;

            var event=event||window.event;

            var top=event.clientY-this.offsetTop;

            var parentH=scrollBox.offsetHeight;

            document.onmousemove=function(event){

                 var event=event||window.event;

                 var y=event.clientY-top;

                 if(y<=0){

                   y=0;

                 }

                 else if(y>=parentH-that.offsetHeight){

                    y=parentH-that.offsetHeight;

                 }

                 that.style.top=y+"px";

                 /*

                     刚开始就 有滚动条的一部分距离   所以滚动条不可能运动和容器一样的高度

                     内容同理  内容也会显示一部分(容器高度的)内容

                     算比例就好了  滚动条运动的距离   内容应该移动的距离

                                            内容高度-容器高度/容器高度-滚动条的高度*滚动条移动的距离

                                            OK

                 */

                 var start=parentH-that.offsetHeight;

                 content.style.top=-1*parseFloat(content.offsetHeight-parentH)/start*y+"px";

                 //为了不让下拉滚动条的时候选中字体

                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            }

        }

        document.onmouseup=function(){

          document.onmousemove=null;

        }

        }();

   </script>

 </body>

</html>

div模拟selection标签下拉列表的更多相关文章

div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
jquery用div模拟一个下拉列表框
原文 jquery用div模拟一个下拉列表框今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
jquery双向列表选择器DIV模拟版
前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...
div模拟table，可实现左右高度同增长（html布局）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

随机推荐

CentOS系统时间与现在时间相差8小时解决方法
很多网友在安装完CentOS系统后发现时间与现在时间相差8小时,这是由于我们在安装系统的时选择的时区是上海,而CentOS默认bios时间是utc时间,所以时间相差了8小时.这个时候的bios的时间和 ...
jmeter之数据库
https://www.cnblogs.com/ShadowXie/p/6007515.html
使用JS实现2048小游戏
JS实现2048小游戏源码效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
Git push将本地版本库的分支推送到远程服务器上对应的分支
在使用git commit命令将修改从暂存区提交到本地版本库后,只剩下最后一步将本地版本库的分支推送到远程服务器上对应的分支了,如果不清楚版本库的构成,可以查看我的另一篇,git 仓库的基本结构. g ...
js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
peda的官方文档说明
peda在github上的官方文档,摘抄过来,方便查阅. 安装 git clone https://github.com/longld/peda.git ~/peda echo "sourc ...
nsis安装包_示例脚本语法解析
以下是代码及解析,其中有底色的部分为脚本内容. 注释.!define.变量.!include.常量 ; Script generated by the HM NIS Edit Script Wizar ...
Visual Studio 2017各版本安装包离线下载
关于Visual Studio 2017各版本安装包离线下载.更新和安装的方法以及通过已下载版本减少下载量的办法微软最近发布了正式版Visual Studio 2017并公开了其下载方式,不过由于V ...
Owin 自定义中间件（2）中间件进阶
前面一篇文章简单的介绍了中间件的应用下面编写一个自定义的中间件类库,并加入中间件参数以及引入日志记录中间件的异常下面来看下中间件的构造,参数可以自定义这里我定义了一个参数类编写中间件需要引入 ...
一步一步学习IdentityServer3 (10)
在某些服务器环境下 identityserver3 会闹情绪, 比如在google浏览器下授权失败(陷入死循环) 查了很多资料好像然并卵 Microsoft.Owin.Security.Notific ...

div模拟selection标签 下拉列表

div模拟selection标签 下拉列表的更多相关文章

随机推荐

热门专题

div模拟selection标签下拉列表

div模拟selection标签下拉列表的更多相关文章