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. MFC 关于MFC中CImage的简单使用

    首先要将#include <atlimage.h>加进来,开始时我加到stdafx.h中,但一直提示windows.h被重复引入的问题,后将其加在别的头文件中,就可以了..   --! 一 ...

  2. Native wifi API使用

    写于博客园,自己迁过来: 一.WlanOpenHandle打开一个客户端句柄 DWORD WINAPI WlanOpenHandle( __in DWORD dwClientVersion, __re ...

  3. HDU 5410 CRB and His Birthday ——（完全背包变形）

    对于每个物品,如果购买,价值为A[i]*x+B[i]的背包问题. 先写了一发是WA的= =.代码如下: #include <stdio.h> #include <algorithm& ...

  4. div+css的第一个布局

    ---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  5. 初学c# -- 学习笔记（一）

    初学c# -- 学习笔记(一) 学习C#了,参考许多资料,一步步学习.这一段学习ajax的工作原理,参照其他例子写了web版的群聊小程序,全部文件代码也就不到300行,很简单.使用时先输入用户名,点确 ...

  6. linux 定时执行php脚本

    第一种方法: 1.编写shell脚本: shell文件:/home/www/shell/phpshell.php #!/bin/bash while [ true ]; do /bin/sleep 1 ...

  7. nosql数据库学习

    1.MongoDB 介绍 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.主要解决的是海量数据的访问效率问题,为WEB应用提供可扩展的高性能数据存储解决方案.当数据量达到50GB以上 ...

  8. REORG TABLE命令优化数据库性能

    [转]DB2日常维护——REORG TABLE命令优化数据库性能     一个完整的日常维护规范可以帮助 DBA 理顺每天需要的操作,以便更好的监控和维护数据库,保证数据库的正常.安全.高效运行,防止 ...

  9. liunx 开机流程与模块管理

    系统开机的经过可以汇整成底下的流程的: 加载 BIOS 的硬件信息与进行自我测试,并依据设定取得第一个可开机的装置: 读取并执行第一个开机装置内 MBR 的 boot Loader (亦即是 grub ...

  10. centos 7 下nginx启动脚本

    centos 7下用了版本6下的脚本,总是报错,于是拷贝了nginx一键安装包里面的一个版本,结果可以,贴出来 #! /bin/sh # chkconfig: # Description: Start ...