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 ...
随机推荐
- python网络编程--进程池
一:进程池 进程池内部维护一个进程序列,当使用时,则去进程池中获取一个进程, 如果进程池序列中没有可供使用的进进程,那么程序就会等待,直到进程池中有可用进程为止. 进程池中有两个方法: apply a ...
- python基础-实现进度条功能,for和yield实现
实现进度条功能 方法一:简单FOR实现打印进度条功能 for i in range(10): print("#",end="",flush=True) time ...
- 使用qshell备份七牛云存储文件
qshell是利用七牛文档上公开的API实现的一个方便开发者测试和使用七牛API服务的命令行工具.我们可以利用它来将七牛云上存储的文件备份到本地. 它提供Mac OSX, Linux, Windows ...
- 从源码层次分析asterisk如何产生呼叫
老规矩,看别人是怎么搞的 http://blog.chinaunix.net/uid-14723273-id-1739552.html over...
- Vue select 下拉菜单
1.html <div id="app-8"> <select v-model="selected"> <option v-for ...
- SQL语句资料
--语 句 功 能 --数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --从数据库表中删除数据行 UPDATE --更新数据 ...
- MySQL学习笔记：字符串前后补全0
遇到一个需求:不足6位的需要自动补全6位,使用函数LPAD()和RPAD()补全. LPAD(str, len, padstr) 用字符串padstr对str进行左边填充补全直至它的长度达到len个字 ...
- 浏览器被hao123，hao524劫持的解决办法
今天研究(翻,墙),装了几个插件,什么云帆.外遇.蓝灯 后来我的google浏览器被hao123劫持,百度浏览器被hao524劫持 删除浏览器快捷方式.属性目标里的后缀,过不多久又被劫持,把我搞毛了 ...
- 一个文件系统过滤驱动的demo
因为没写过FSD过滤驱动,所以拿来练练手,没有什么技术含量.参考自Win内核安全与驱动开发. 先梳理一下大概的流程,就是怎么去绑定设备栈.怎么去过滤各种请求的. 首先肯定是要绑定设备栈的,来看下怎么绑 ...
- GitHub在线创建文件夹
点击New files按钮,然后输入含有slash字符(“/”)的文件名即可.也就是建立一个含有路径(目录)的文件,即会自动产生新文件夹. 点击Upload files按钮,然后直接把本地的文件夹(内 ...