注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML文本框滚动代码4:卷轴变化应用  

2011-02-11 02:51:58|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

       

 

 

  

                      卷轴变化应用

1、左侧拖曳棒(即拖曳棒的位置)

示例:

HTML语法:

语法描述: 

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

 

<DIV style="OVERFLOW: scroll; DIRECTION: rtl; WIDTH:255px; HEIGHT: 200px; BACKGROUND-COLOR:#003300">编辑文字图片内容</DIV>

DIRECTION 属性

设置元素的文本方向

DIRECTION: rtl
内容从右向左流动
DIRECTION: ltr 默认
内容从左向右流动
2、隐形的卷轴(只看的见按钮箭头▲▼)

示例:

HTML语法:

语法描述: 

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

 

 

<DIV style="OVERFLOW: scroll; WIDTH:255px; HEIGHT: 350px; background-color: #003300;

SCROLLBAR-FACE-COLOR: #003300;

SCROLLBAR-HIGHLIGHT-COLOR: #003300;

SCROLLBAR-SHADOW-COLOR: #003300;

SCROLLBAR-3DLIGHT-COLOR: #003300;

SCROLLBAR-ARROW-COLOR: #FF0000;

SCROLLBAR-TRACK-COLOR: #003300;

SCROLLBAR-DARKSHADOW-COLOR: #003300;

SCROLLBAR-BASE-COLOR: #003300">编辑文字图片内容</DIV>

 

 

 

 

 

在文本框所有设置的颜色中,只变化了( SCROLLBAR-ARROW-COLOR: )的颜色值,其他颜色值与( background-color:)背景颜色值相同。

3、透明的卷轴

示例:

HTML语法:

语法描述:   

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

 <DIV style="FILTER: Chroma(Color=yellow); HEIGHT: 1px">
<DIV style="OVERFLOW: scroll; WIDTH:255px; HEIGHT: 350px; background-color: #003300; SCROLLBAR-FACE-COLOR: yellow;
SCROLLBAR-HIGHLIGHT-COLOR: yellow;
SCROLLBAR-SHADOW-COLOR: yellow;
SCROLLBAR-3DLIGHT-COLOR: yellow;
SCROLLBAR-ARROW-COLOR: red;
SCROLLBAR-TRACK-COLOR: yellow;
SCROLLBAR-DARKSHADOW-COLOR: yellow;
SCROLLBAR-BASE-COLOR: yellow">编辑文字图片内容</DIV>

 

在这里添加了Filter滤镜属性,滤掉某种颜色。

style=<DIV style="FILTER: Chroma(Color=yellow); HEIGHT: 1px">

 

 

语法中设置了三种颜色

( background-color:)背景颜色值

( SCROLLBAR-ARROW-COLOR: )的颜色值

其他颜色值和滤镜颜色值相同。

4、发光的卷轴

示例:

HTML语法:

语法描述:   

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

<DIV style="FILTER: glow(color=#6666ff,Strength=6); HEIGHT: 1px">
<DIV style="FILTER: Chroma(Color=yellow); HEIGHT: 1px">
<DIV style="OVERFLOW: auto; WIDTH: 255px; HEIGHT: 350px; BACKGROUND-COLOR: #003300;
SCROLLBAR-FACE-COLOR: yellow;
SCROLLBAR-HIGHLIGHT-COLOR: #6666ff;
SCROLLBAR-SHADOW-COLOR:#6666ff;
SCROLLBAR-3DLIGHT-COLOR:#6666ff;
SCROLLBAR-ARROW-COLOR:red;
SCROLLBAR-DARKSHADOW-COLOR:#6666ff;
SCROLLBAR-BASE-COLOR:#6666ff">
编辑文字图片内容</DIV></DIV></DIV>

 

在这里添加了Filter滤镜属性,删掉滚动条的背景色。

1Filter加光属性glow

加光辉在附近对象的边外

style=<DIV style="FILTER: glow(color=#6666ff,Strength=6); HEIGHT: 1px">

2Filter透明属性Chroma

制作专用颜色透明

style=<DIV style="FILTER: Chroma(Color=yellow); HEIGHT: 1px">

3、删掉SCROLLBAR八个属性中的滚动条的背景色(SCROLLBAR-TRACK-COLOR:

4、设置颜色

( background-color:)背景颜色值

( SCROLLBAR-ARROW-COLOR: )的颜色值

( SCROLLBAR-FACE-COLOR:)的颜色值与透明属性(Chroma)的颜色值相同

其他颜色值与加光属性(glow)的颜色值相同

备注:

加光属性(glow)一定在透明属性(Chroma)的前面。

SCROLLBAR八个属性参看“为卷轴调色”

5、加上背景的卷轴
★背景不跟卷轴移动

示例:

HTML语法:

语法描述:   

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容.

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

<TABLE width="20%" background=背景图片地址><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; WIDTH: 240px; HEIGHT: 300px;">编辑文字图片内容</DIV></TD></TR></TBODY></TABLE>

 

 

选择适合的背景图片与调节宽度是关键:

1、调节表格的宽度width="20%"比文本框的宽度WIDTH: 240px;小。

2、调节文本框的高度HEIGHT: 300px;比背景图片的高度小。

★背景跟卷轴移动

示例:

HTML语法:

语法描述: 

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

编辑文字图片内容

 

<DIV style="OVERFLOW: auto; WIDTH: 255px; HEIGHT: 300px"><TABLE width="100%" background=背景图片地址><TBODY><TR><TD vAlign=top align=left>编辑文字图片内容</TD></TR></TBODY></TABLE></DIV>

 

 

 

1、选择大小适合的背景图片是关键。

2、表格的宽度width="100%"不变。

3、调节文本框的宽度(WIDTH: 和高度(HEIGHT:)适合自己的需要。

4、与“背景不跟卷轴移动”的代码仅仅变换了包含关系。

即:表格代码包含文本框代码还是文本框包含表格代码。

相关链接:

文本框滚动代码链接

燕衔泥(眉佳)

其他HTML代码链接  

 

颜色代码表(一)

颜色代码表(二)

HTML表格初步制作

HTML表格标记详解1:标签定义 TABLE参数设定

HTML表格标记详解2:TR参数设定

HTML表格标记详解3:TD参数设定

HTML表格标记详解4:TD参数中设定跨列跨行属性

HTML表格标记详解5:TH参数中设定

HTML表格标记详解6:CAPTION标题参数设定

HTML表格标记详解7:THEAD表首标记/TBODY表主体标记/TFOOT表尾标记

HTML表格标记详解8:表格嵌套

HTML表格标记详解9:表格边框的css修饰语法

HTML网页列表标记:ul、ol、dir、dl、menu、dt、dd、li

HTML水平线段标记:HR

 

图片雾化移动特效代码

多图重叠移动代码及效果图

图片移动效果的欣赏与制作(一)

图片移动、及其图片链接网址移动代码(二)

让图片产生梦幻效果的代码

图片梦幻显现隐藏移动的特效制作(一)

图片梦幻显现隐藏的特效制作(二)

图片CSS滤镜效果—灰度

图片CSS滤镜—左右旋转效果

图片CSS滤镜—阴影效果

图片CSS滤镜—波形加上半透明合成效果

图片CSS滤镜效果—透明

图片CSS滤镜—X光效果

图片CSS滤镜—发光效果

图片CSS滤镜—色彩对换效果

图片CSS滤镜—波形效果

图片CSS滤镜—图片模糊效果

多张图片串联式放映代码

图片浮雕效果

图片虚线边框并黑白效果

图片加边框代码

图片CSS滤镜—图片动感模糊效果

图片CSS滤镜—扭曲效果

图片CSS滤镜—倒影效果

图片CSS静态滤镜样式(filter)说明

多图重叠移动代码及效果图

Flash圆形雾化移动特效代码

Flash透明动画或文字特效添加一幅背景图

Flash透明动画多个叠加在一张背景图片上

自动播放swf格式小视频

在线制作水波纹动感图片

 

所有代码的粘贴法

在首页添加QQ和POPO在线交谈

一种找到图片地址(或者存大图)极简单的方法

日志列表式能使日志成单页面打开并找准日志地址:

日志文字的编排——借用word设置(启野原创)

博客首页的顶区和底区上传图片

文字特效代码(一)

文字特效代码(二)

日志文字与图片添加

文字图片的链接

如何让网易博客日志显示最大的宽度

怎样添加自定义模块和在自定义模块中做动画的超级链接

博客中的准确网址(原创)

水晶博客边框代码——应用(一)

水晶博客边框代码——应用(二)

水晶博客边框代码——应用(三)

水晶博客边框代码——应用(四)

日志中导入图片的三种方法

背景音乐制作

 

大图音画拼合的代码使用

大图音画拼合效果配图——一卷轻愁书红颜(未调整的效果)

大图音画拼合效果配图——一卷轻愁书红颜(调整后的效果)

宽屏大图片音画教程——缱绻殇效果

大图音画拼合效果配图——蝴蝶之梦

欢迎光临启野博客!
  评论这张
 
阅读(1120)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017