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 ...

随机推荐

一、Vue入门
vue官网:https://cn.vuejs.org/ 学习路线:VueJs2.0建议学习路线在浏览器上安装 Vue Devtools工具 1.vue入门 <script src=" ...
python基础-类的起源
Python中一切事物都是对象. class Foo(object): def __init__(self,name): self.name = name f = Foo("alex&quo ...
TF-图像的深度和通道的概念(转)
图像的深度和通道概念图像的深度: 图片是由一个个像素点构成的,所有不同颜色的像素点构成了一副完整的图像,计算机存储图片是以二进制来进行的. 1 bit : 用一位来存储,那么这个像素点的取值范围就是 ...
Nginx - buffer缓冲区部分
目录- 1. 前言- 2. 指令- 3. 原理及总结 1. 前言关于缓冲,主要是合理设置缓冲区大小,尽量避免缓冲到硬盘 2. 指令 proxy_buffering 说明:proxy_bufferin ...
js权威指南---学习笔记01
1.当函数赋值给对象的属性时,就变为了方法:2.被零整除不报错,只会返回无穷大(Infinity)或者负无穷大.例外:零除以零等于非数字(NaN).3.NaN与任何值都不相等! 4.Javascrip ...
分析new delete 的本质
在程序设计中,数据可能会存在不同的内存空间,如函数栈堆全局变量区 ,今天我们来分析一下C++中堆分配方式和C语言的堆分配方式异同,从而更好的理解new delete本质 C语言使用mall ...
Gitflow工作流
什么是Gitflow工作流 Gitflow工作流定义了一个围绕项目发布的严格分支模型.虽然比功能分支工作流复杂几分,但提供了用于一个健壮的用于管理大型项目的框架. Gitflow工作流没有用超出功能分 ...
POJ 3376 Finding Palindromes（manacher求前后缀回文串+trie）
题目链接:http://poj.org/problem?id=3376 题目大意:给你n个字符串,这n个字符串可以两两组合形成n*n个字符串,求这些字符串中有几个是回文串. 解题思路:思路参考了这里: ...
数据库中INFORMATION_SCHEMA的说明及使用
第一个查询看看库里有多少个表,表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息 ...
JavaScript中判断日期是否相等
问题做一个节日提示网页,首先获得当前日期,然后与最近的节日比较,如果恰好是同一天,提示"XX节快乐!"否则,提示"离XX节还有X天".判断是否恰好同一天的时候 ...

div模拟selection标签 下拉列表

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

随机推荐

热门专题

div模拟selection标签下拉列表

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