=====这种“惊艳”的网页配色方案如何搞出来的呢?====

moffatt 2005-06-02 12:49:54
详见:http://down.vv66.com/index.htm
点击右上角的“我的配色”,弹出一个配色网页对话框,这种效果如何设计出来?那里有得下载呢?
...全文
417 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
mikespook 2005-06-03
  • 打赏
  • 举报
回复
我记得sourceforge.net上有一个PHP写的不用数据库的BLOG里有类似的功能,而且是不用FLASH,用的纯JS做的仿PHOTOSHOP的取色工具~~~

呵呵,这个叫惊艳,那要叫唯美了~~~
AppleBBS 2005-06-03
  • 打赏
  • 举报
回复
上面第1行调用的css应该是直接调用蓝色经典里的
<link rel=stylesheet type=text/css href=http://www.blueidea.com/css/style.css>
<style>
legend {
font-size: 12px;
font-weight: bold;
}
fieldset {
border: 1px solid #CCCCCC;
padding: 5px;
margin:5px 10px;
padding-bottom:10px;
}
.theme {
width:9;
height:9;
margin:0px 2px;
cursor:hand;
border:1px solid #CCCCCC;
}
</style>
<script>
function cc(setcolor){
document.body.style.filter='blendTrans(duration=1)';
document.body.filters[0].apply();
for(i=0;i<document.styleSheets[0].rules.length;i++) {
with(document.styleSheets[0].rules[i]) {
if (selectorText.toLowerCase().replace(/[^\.]*\./i,'')=='body'){
style.backgroundColor=setcolor;}
}
}
document.body.filters[0].play();
}
</script>
<body bgcolor=blue>
<br><br><br><br>
<fieldset><legend>现有成套配色</legend><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e7e8e9;" title="《绿色版》 -cola"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#0067c2;" title="《蓝色天际版》 -菜菜子"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#990000;" title="《围炉火锅版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffffff;" title="《青天白日梦版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#4c4e52;" title="《青天白夜梦版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6e6;" title="《夏日清凉版》 -handmade"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ecf3f9;" title="《未命名版》 -doupi"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffadd6;" title="《女性版》 -胸口别朵大红花"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#408080;" title="《学生版》 -胸口别朵大红花"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#8c8a84;" title="《暖灰版》 -imagebear"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#507171;" title="《姜子牙版》 -quester"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#10497b;" title="《钴蓝色版》 -梦觉"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#777718;" title="《绿色版》 -梦觉"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#6e6e80;" title="《暖色版》 -lee"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ced3d9;" title="《冷色版》 -lee"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#462d79;" title="《紫色版》 -Poorfish"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#c2cc66;" title="《黄色版》 -Poorfish"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#000000;" title="《紫色迷情版》 -LeXRus"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#d7faa8;" title="《绿之FD五月版》 -cartouche"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#95bf00;" title="《雨后清风版》 -dancing"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#edf7f3;" title="《秋荷淡叶版》 -moonjeep"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#001500;" title="《骇客帝国版》 -moonjeep"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#000000;" title="《未命名版》 -freewar"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffffff;" title="《灰色版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ff0000" title="《赤色版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6dc" title="《仿Macromedia版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6dc" title="《经典怀旧版》 -色眯眯的小疯狗" >
</fieldset>
<input type=button value=changecolor onclick="cc('green')">
AppleBBS 2005-06-03
  • 打赏
  • 举报
回复
<link rel=stylesheet type=text/css href=/css/style.css>
<style>
legend {
font-size: 12px;
font-weight: bold;
}
fieldset {
border: 1px solid #CCCCCC;
padding: 5px;
margin:5px 10px;
padding-bottom:10px;
}
.theme {
width:9;
height:9;
margin:0px 2px;
cursor:hand;
border:1px solid #CCCCCC;
}
</style>
<script>
function cc(setcolor){
document.body.style.filter='blendTrans(duration=1)';
document.body.filters[0].apply();
for(i=0;i<document.styleSheets[0].rules.length;i++) {
with(document.styleSheets[0].rules[i]) {
if (selectorText.toLowerCase().replace(/[^\.]*\./i,'')=='body'){
style.backgroundColor=setcolor;}
}
}
document.body.filters[0].play();
}
</script>
<body bgcolor=blue>
<br><br><br><br>
<fieldset><legend>现有成套配色</legend><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e7e8e9;" title="《绿色版》 -cola"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#0067c2;" title="《蓝色天际版》 -菜菜子"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#990000;" title="《围炉火锅版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffffff;" title="《青天白日梦版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#4c4e52;" title="《青天白夜梦版》 -POPOEVER"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6e6;" title="《夏日清凉版》 -handmade"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ecf3f9;" title="《未命名版》 -doupi"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffadd6;" title="《女性版》 -胸口别朵大红花"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#408080;" title="《学生版》 -胸口别朵大红花"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#8c8a84;" title="《暖灰版》 -imagebear"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#507171;" title="《姜子牙版》 -quester"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#10497b;" title="《钴蓝色版》 -梦觉"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#777718;" title="《绿色版》 -梦觉"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#6e6e80;" title="《暖色版》 -lee"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ced3d9;" title="《冷色版》 -lee"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#462d79;" title="《紫色版》 -Poorfish"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#c2cc66;" title="《黄色版》 -Poorfish"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#000000;" title="《紫色迷情版》 -LeXRus"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#d7faa8;" title="《绿之FD五月版》 -cartouche"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#95bf00;" title="《雨后清风版》 -dancing"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#edf7f3;" title="《秋荷淡叶版》 -moonjeep"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#001500;" title="《骇客帝国版》 -moonjeep"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#000000;" title="《未命名版》 -freewar"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ffffff;" title="《灰色版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#ff0000" title="《赤色版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6dc" title="《仿Macromedia版》 -myhyli"><img onclick="cc(this.style.backgroundColor)" src=/img/spacer.gif class="theme" style="background-color:#e6e6dc" title="《经典怀旧版》 -色眯眯的小疯狗" >
</fieldset>
<input type=button value=changecolor onclick="cc('green')">
jxdn_yang 2005-06-02
  • 打赏
  • 举报
回复
你看看FRONTPAGE里的配色吧,
AppleBBS 2005-06-02
  • 打赏
  • 举报
回复
大惊小怪啊
asp1110 2005-06-02
  • 打赏
  • 举报
回复
100MB asp和 asp.net空间 50/1年
我看到了一个网站 100MB asp和 asp.net空间 现在促销,
同学们可以做一个简单的个人网站用来找工作 ,
支持 asp.net 一年才50元!不要错过哦!!!
速度非常快,一般公司企业 足够用了!
http://www.hi876.com
希望能对大家有帮助
mjpclab 2005-06-02
  • 打赏
  • 举报
回复
展示意义大于实际意义
cheng17 2005-06-02
  • 打赏
  • 举报
回复
那里有惊艳效果呀
abc666 2005-06-02
  • 打赏
  • 举报
回复
不就是调css嘛
jted 2005-06-02
  • 打赏
  • 举报
回复
这个配色的完整代码网上有下的。。家里电脑有存。。才20分。。兄弟们就自己去GG搜一下吧。。我懒得搜了。
iamxiang 2005-06-02
  • 打赏
  • 举报
回复
我顶,用FLASH生成CSS,然后应用到网页中。这个想法好,顶
mfkiqpl 2005-06-02
  • 打赏
  • 举报
回复
很早就看到了。。篮色理想就是这样的。。但不知道是怎么搞的。。。关注!
patchclass 2005-06-02
  • 打赏
  • 举报
回复
flash只是一个界面而已,应该是动态的生成一些css的吧,要看看代码就知道了

纯的HTML + Javascript,也可以实现这样的效果,只要想做
fangq 2005-06-02
  • 打赏
  • 举报
回复
这个并非“惊艳”所在,弹出个对话框后,点击上面相应的颜色,看看整个网站的配色方案都改了,真绝!
qiangtian 2005-06-02
  • 打赏
  • 举报
回复
flash和网页的配合挺厉害的,不懂flash,帮顶
sharing 2005-06-02
  • 打赏
  • 举报
回复
关注
真的开始大惊小怪了.
ShiningstarHu 2005-06-02
  • 打赏
  • 举报
回复
那个是Flash做的,没什么稀奇的。如果是纯HTML + Javascript那就有点技术了。
treeroot 2005-06-02
  • 打赏
  • 举报
回复
flash

28,406

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧