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的大小和透明度的更多相关文章

  1. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  2. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  3. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  4. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息

    三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv ...

  6. jQuery---鼠标滚轮控制div横向滚动条左右移动

    HTML <div class="table-responsive"> <div class="fhtable" style="wi ...

  7. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  8. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  9. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

随机推荐

  1. Delphi2010中DataSnap高级技术(7)—TDSServerClass中Lifecycle生命周期三种属性说明

    Lifecycle 三种属性: Session.Invocation.Server 这三种属性都用在什么情况,有什么要注意的事项,Delphi2010中罕有说明. 如果乱用这三种属性,你的服务程序有可 ...

  2. shared memory realm does not exist

    有天启动ORACLE,碰到如下问题 提示ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist 解决 ...

  3. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  4. 一个页面中显示多个button时总行数计算公式。

    总行数 ＝ (按钮总数 + 每一行按钮数 - 1) / 每一行按钮数. 同理.假设我们要显示一定总数的item.每页固定数量,则总页数为. 总页数 ＝ (总显示数量 + 每页显示的数量 - 1) / ...

  5. chapter1 渗透测试与metasploit

    网络对抗技术课程学习 chapter1 渗透测试与metasploit 一.读书笔记 二.渗透测试 通过模拟恶意攻击者的技术与方法进行攻击,挫败目标系统安全控制措施,取得访问控制权,并发现具备业务影响 ...

  6. Net力软快速信息化系统开发框架 + 开发手册+数据库说明

    源码目录结构说明LeaRun.Cache –缓存层LeaRun.Resource –本地语言LeaRun.Utilities –公共类库LeaRun.DataAccess –数据库访问核心组件LeaR ...

  7. window go protobuf

    http://studygolang.com/articles/8804 protoc --go_out=. protocol.proto E:\TEST\TESTGRPC\src\google.go ...

  8. 什么是业务运维，企业如何实现互联网+业务与IT的融合

    业务运维并不是一个新概念,针对传统信息架构提出的业务服务管理就是把以业务为核心的IT系统与IT基础设施性能进行整合运维的解决方案.然而随着互联网+转型的不断推进,基础设施的智能化和广泛云化成为IT发展 ...

  9. Python—判断变量的基本类型

    type() >>> type(123)==type(456) True >>> type(123)==int True >>> type('ab ...

  10. 【BZOJ1208】宠物收养所（平衡树，splay）

    题意:见题面 思路:因为每个时刻要么全是人要么全是宠物,所以可以一棵splay解决 维护单点插入,单点删除,求前驱,求后继即可 ..,..]of longint; num,fa:..]of longi ...