页面滑块式调色板

原创 2007年10月09日 14:44:00
<!--样式表部分=============================================================-->
<style type="text/css">
.drag {CURSOR: hand; POSITION: relative;HEIGHT: 17px; LEFT: 2px; WIDTH: 20px; Z-INDEX: 3}
#barLyr,#barLyr1,#barLyr2{BACKGROUND-COLOR: #000; HEIGHT: 110px; LEFT: 9px; POSITION: absolute; TOP: 5px; WIDTH: 2px; Z-INDEX: 1}
#innerLyr,#innerLyr1,#innerLyr2{BACKGROUND-COLOR: #888; HEIGHT: 117px; LEFT: 2px; POSITION: absolute; TOP: 2px; WIDTH: 20px; Z-INDEX: 2}
#outerLyr,#outerLyr1,#outerLyr2{BACKGROUND-COLOR: #000; HEIGHT: 120px; POSITION: absolute; TOP: 80px; WIDTH: 23px; Z-INDEX: 1}
#outerLyr {LEFT:30px;}
#outerLyr1{LEFT:60px;}
#outerLyr2{LEFT:90px;}
</style>
<!--JS部分=============================================================-->
<script type="text/javascript">
var sPosition;
var showPerc=100;
document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")
var Color= new Array();
Color[0] = "00";
Color[1] = "11";
Color[2] = "22";
Color[3] = "33";
Color[4] = "44";
Color[5] = "55";
Color[6] = "66";
Color[7] = "77";
Color[8] = "88";
Color[9] = "99";
Color[10] = "AA";
Color[11] = "BB";
Color[12] = "CC";
Color[13] = "DD";
Color[14] = "EE";
Color[15] = "FF";
var rVal,gVal,bVal, cCol
function chgBg() {
 cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
 ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
 if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;
 if (kObj.id =="knobImg1")  document.bgColor="#"+rVal+Color[ind]+bVal;
 if (kObj.id =="knobImg2")  document.bgColor="#"+rVal+gVal+Color[ind];
}
var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
 oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos;
 if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
 if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
 if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
 sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5;
 chgBg();
 return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
}
</script>
<!--页面内容部分=============================================================-->
<h4>页面滑块式调色板</h4>
<p>模式:
  <INPUT name="perCent" type="radio" value="false" />
  Prozent
  <INPUT name="perCent" type="radio" value="true" checked>
  255</p>
<DIV id="outerLyr"><IMG class="drag" id="knobImg" style="TOP: 100px;">
  <DIV id="innerLyr">
    <DIV id="barLyr"></DIV>
  </DIV>
</DIV>
<DIV id="outerLyr1"><IMG class="drag" id="knobImg1" style="TOP: 100px;">
  <DIV id="innerLyr1">
    <DIV id="barLyr1"></DIV>
  </DIV>
</DIV>
<DIV id="outerLyr2"><IMG class="drag" id="knobImg2" style="TOP: 100px;">
  <DIV id="innerLyr2">
    <DIV id="barLyr2"></DIV>
  </DIV>
</DIV> 

通过java程序写的一个调色板(rgb格式)

效果如下图所示:
  • u011768325
  • u011768325
  • 2014年07月22日 23:17
  • 1975

jsp页面引入调色板、颜色表

jsp页面:   javascript脚本: $(document).ready(function() {    initPanel(); //初始化调色板    $("#fon...
  • u010953431
  • u010953431
  • 2016年05月17日 11:23
  • 1515

input type=“range”滑块自定义样式,实现步骤详解及实际应用

写在前面: 本文的主要内容包括:type="range"属性介绍,修改range默认css样式以及在js中的实际应用。本文面向前端小白,写的不好之处,请多多见谅。文末有demo链接,可以自行复制...
  • OBKoro1
  • OBKoro1
  • 2017年04月16日 19:54
  • 2316

java调色板(用滑块控制RGB的值)

import java.awt.BorderLayout; import java.awt.Color; import java.awt.GridLayout; import javax.swing....
  • yuehailin
  • yuehailin
  • 2017年05月18日 16:12
  • 463

实现微博个人页面的滑块浮动切换页面效果(OC)

前言 这篇文章真的是不想写的, 因为之前分享过一篇用swift实现的相同的效果, 无奈很多的朋友总是问有没有oc版的, 好吧, 也可以理解在swift不太普及的情况下出现这样的事情, 看来最近真...
  • qq_30513483
  • qq_30513483
  • 2016年08月29日 08:45
  • 581

实现淘宝商品页面的滑块浮动切换页面的效果修改版

前言, 之前写了一篇文章, 实现类似淘宝商品界面的滑块效果, 不过很(##抱歉##)的是, 笔者当时没有测试TableView等的使用,大家反映TableView不能正常使用,(研究一段时间发现, 之...
  • zerojswift
  • zerojswift
  • 2016年04月25日 10:44
  • 809

jquery插件之功能完美的响应式滑块轮播插件

  • 2014年06月13日 22:18
  • 1.48MB
  • 下载

3_PTT型滑块式并联机床的PLC控制_关学锋

  • 2014年09月20日 08:24
  • 177KB
  • 下载

**Android三五行代码结局有滑块,可滑动的TABLE导航栏。类似斗鱼直播的直播页面导航栏,滑块可动态根据栏目宽度适应,无需自定义view** 先来说下思路把,很简单,一个HorizontalS

**Android三五行代码结局有滑块,可滑动的TABLE导航栏。类似斗鱼直播的直播页面导航栏,滑块可动态根据栏目宽度适应,无需自定义view**先来说下思路把,很简单,一个HorizontalScr...
  • qq_34169248
  • qq_34169248
  • 2017年07月31日 18:02
  • 345

嵌入式中如何统一多幅位图的调色板并生成C格式数据详解

在嵌入式开发当中,我们经常会需要显示公司logo,或者操作界面的图标,也自然会用到图像转换工具,比如uC-GUI-BitmapConvert, 下载地址连接页面 ,我们可以用它进行输入一幅位图,然后输...
  • qianggezhishen
  • qianggezhishen
  • 2015年06月02日 15:50
  • 1903
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面滑块式调色板
举报原因:
原因补充:

(最多只允许输入30个字)