自定义滚动条——控制div的大小和透明度
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#big {
height: 20px;
width: 600px;
background-color: gray;
position: relative;
margin: 100px auto;
}
#small {
height: 20px;
width: 20px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
#side {
width: 0px;
height: 0px;
background-color: green;
}
</style>
</head>
<body>
<div id="big">
<div id="small">
</div>
</div>
<div id="side">
</div>
</body>
<script type="text/javascript">
//实现通过滚动条来控制另一个div的宽高和透明度
//滚动条只能左右滚动
var big = document.getElementById("big");
var small = document.getElementById("small");
var side = document.getElementById("side");
var x = 0;
var y = 0;
small.onmousedown = function(ev) {
var oEvent = ev || event;
x = oEvent.clientX - small.offsetLeft;
document.onmousemove = function(ev) {
var oEvent = ev || event;
var Left = oEvent.clientX - x;
if(Left < 0) {
Left = 0;
} else if(Left > big.offsetWidth - small.offsetWidth) {
Left = big.offsetWidth - small.offsetWidth;
}
small.style.left = Left + "px";
//自定义一个变量scale
//表示滚动条滚动的距离和滚动条可以滚动的最大距离的的比
var scale = Left / (big.offsetWidth - small.offsetWidth);
document.title = scale;
//通过滑块控制side的大小
side.style.width = 400 * scale + "px";
side.style.height = 400 * scale + "px";
//通过滑块控制side的颜色的透明度
side.style.opacity = scale;
side.style.filter = "alpha(opacity:" + scale * 100 + ")";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
</script>
</html>
自定义滚动条——控制div的大小和透明度的更多相关文章
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- day52—JavaScript拖拽事件的应用（自定义滚动条）
转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...
- 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
- jQuery---鼠标滚轮控制div横向滚动条左右移动
HTML <div class="table-responsive"> <div class="fhtable" style="wi ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
随机推荐
- 【英语魔法俱乐部——读书笔记】 3 高级句型-简化从句&倒装句(Reduced Clauses、Inverted Sentences) 【完结】
[英语魔法俱乐部——读书笔记] 3 高级句型-简化从句&倒装句(Reduced Clauses.Inverted Sentences):(3.1)从属从句简化的通则.(3.2)形容词从句简化. ...
- linux操作mysql数据库常用简单步骤
连接mysql数据库: 主要看mysql安装在哪一个目录下: mysql -h主机地址 -u用户名 -p用户密码 或者mysql -h ip地址 -u zaiai -p zaiai 或者/v ...
- 利用docker compose启动gitlab及runner
添加docker compose配置文件 新建文件docker-compose.yml,输入如下内容: gitlab: image: 'gitlab/gitlab-ce:latest' contain ...
- 将sqlserve数据绑定到dataGridView中及一些操作
一:将数据绑定到dataGridView控件上. string sqlconn = "server=.;database=student;integrated security=true&q ...
- js 什么是变量的提升？
- iOS Core Animation之CALayer心得
使用CALayer的mask实现注水动画效果 Core Animation一直是iOS比较有意思的一个主题,使用Core Animation可以实现非常平滑的炫酷动画.Core animtion的AP ...
- JQUERY 保存成功后又下角动态提示
$.messager.show({ // show error message title : '操作结果', msg : '操作成功!' });
- Android开发学习---android下的数据持久化,保存数据到rom文件,android_data目录下文件访问的权限控制
一.需求 做一个类似QQ登录似的app,将数据写到ROM文件里,并对数据进行回显. 二.截图 登录界面: 文件浏览器,查看文件的保存路径:/data/data/com.amos.datasave/fi ...
- Monkeyrunner小脚本关于camera的使用
一下代码涉及自动执行camera,属性一个小设置,恢复初始值,并在中间添加截屏功能 将两个截屏进行前后对比,并返回值 适合初学者,刚刚了解monkeyrunner 的人员来看 注意:一下脚本如果不能执 ...
- mysql存储过程 --游标的使用 取每行记录 (多字段)
delimiter $ create PROCEDURE phoneDeal() BEGIN DECLARE id varchar(64); -- id DECLARE phone1 varchar( ...