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

随机推荐

image配准，发布geoserver服务
1.arcmap配准:注:png只保留需要显示范围,多余部分删除,,配准后再进行栅格裁剪(为了去除偏移后出现的NoData值) 2.导出tif:注:NoData值设置,一般为256(有时候经过裁剪会默 ...
python中set
集合update方法:是把要传入的元素拆分,做为个体传入到集合中,例如: >>> a = set('boy') >>> a.update('python') > ...
3.Springboot之修改启动时的默认图案Banner
一.SpringBoot的默认启动图案在SpringBoot启动的时候,默认的会展示出一个spring的logo,这个图案我们用户是可以自定义的二.自定义启动图案方法一: Application ...
invalid byte sequence for encoding "UTF8": 0xe99d2c
服务器还原数据库数据出错,老规矩... 字符集编码的问题 http://blog.csdn.net/beiigang/article/details/39582583 over....
mybatis 易百练习笔记
1. session.commit() 增删改需要提交 session.close() session需要关闭 2. insert into t() values() 不用写i ...
Java事务管理之Hibernate
环境与版本 Hibernate 版本:Hibernate 4.2.2 (下载后的文件名为hibernate-release-4.2.2.Final.zip,解压目录hibernate-release- ...
（转）链接服务器——获取EXCEL数据
测试目的:验证利用链接服务器.分布式查询获取EXCEL中的数据测试环境:Microsoft SQL Server 2005 - 9.00.3080.00 (X64) Enterprise Editi ...
SQL中的注释语句
SQL中的注释分为单行注释和多行注释.顾名思义,单行注释就是对一行进行注释,多行注释就是同时对多行进行注释. 一.单行注释 SQL语句中的单行注释使用 -- create database datab ...
Zabbix监控实例
本节内容: zabbix web添加主机定义Items 创建graph 创建template 一.zabbix web添加主机 1. 进入zabbix web界面,点击配置—>主机—>创 ...
面试题41：和为s的两个数字 || 和为s的连续正数序列
和为s的两个数字题目:输入一个递增排序的数组和一个数字s,在数组中查找两个数,使得它们的和正好是s.如果有多对数字的和等于s,输出任意一对即可. 有点类似于夹逼的思想注意两个int相加的和要用lo ...

div模拟selection标签 下拉列表

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

随机推荐

热门专题

div模拟selection标签下拉列表

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