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

随机推荐

Operfire 安装指南
http://www.cnblogs.com/hoojo/archive/2012/05/13/2498151.html 本文的英文原文来自 http://www.igniterealtime.org ...
基于vue配置axios
转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景在项目开发中ajax请求是必不可缺少一部分ajax请求不需要loading或则请求 ...
[转] Cacti+Nagios监控平台完美整合
Cacti+Nagios监控平台完美整合 http://os.51cto.com/art/201411/458006.htm 整合nagios+cacti+微信.飞信实现网络监控报警 http://b ...
Centos7.3安装vsftp服务
我们需要向centos操作系统的服务器上上传文件或者下载文件,这时候,ftp有必要安装下, 我们选择主流的vsftp: 第一步:安装vsftp yum install -y vsftpd 第二步:设置 ...
书接前文，用多进程模式实现fibonnachi并发计算
#coding: utf-8 import logging import os import random import sys import time import re # import requ ...
jQuery类名添加click方法
通过$("").jQuery为元素添加点击事件,在使用类的情况下,可以使用$(e.target).attr('title');获得被点击元素的属性值. 示例代码如下 $(" ...
python 库资源大全
偶然的机会翻到这篇文章,很全面,来源: Python 资源大全中文版哪些 Python 库让你相见恨晚? 环境管理管理 Python 版本和环境的工具 p:非常简单的交互式 pyth ...
Factroy 简单工厂
意图定义一个用于创建对象的接口,让子类决定实例化哪一个类. Factory Method使一个类的实例化延迟到其子类. 动机框架使用抽象类定义和维护对象之间的关系.这些对象的创建通常也由框架负责. ...
手动安装pydev
在网上下载pydev.zip,解压后有两个文件夹,features和plugins.把这两个文件夹复制到eclipse目录下的dropins文件夹下.
002 Jupyter-NoteBook工具介绍（网页版编辑器）
1.Jupyter-NoteBook位置在安装完anaconda后,这个工具已经被安装完成. 2.打开 3.功能讲解目录:C:\Users\dell,这个可以看上面控制台上的信息. 4.其余的功能 ...

div模拟selection标签 下拉列表

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

随机推荐

热门专题

div模拟selection标签下拉列表

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