欢迎来到天天文库
浏览记录
ID：24350543
大小：53.00 KB
页数：4页
时间：2018-11-13
《巧用css动态控制文本的属性》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
巧用CSS动态控制文本的属性>>edu.5151doc.教育资源库用CSS可以很方便地动态改变文本的属性，从而可制作出动态地使文字变大、缩小、改变文字颜色、改变文本的背景、字间距、行间距等等网页特效，一切都在你的掌握之中。是不是有点玄？事实就是如此。那一定很复杂吧？不！看完本文，你就会明白，原来这么简单。原理：利用CSS的属性值可动态改变的特点。思路：定义文本的多种属性值，再用一个事件来触发，一旦事件发生，则改变文本属性值，从而达到预期目的。请看下面的示例：一、动态改变文字大小这个例子的效果是：一段文本，当鼠标在这段文本上，文字变大，鼠标离开时又恢复原样。制作方法：1、在Dreamouseover="this.className='style1'"onmouseout="this.className='style2'"。至此，制作完成，能产生效果的那段文字的源代码是这样的：<ponmouseover="this.className='style1'" onmouseout="this.className='style2'"><fontcolor="#FF0000">鼠标在这段文字上，文字变大，鼠标离开时变小。</font></p>不使用Dreamouseover="this.className='style1'"onmouseout="this.className='style2'">鼠标在这段文字上，改变文字的大小、颜色、加粗，鼠标离开时恢复原样。</p>三、动态改变部分文本的背景这个例子的效果是：当鼠标移到某行文本上，这行一部分文本的背景改变了，而本行的另一段背景却不变。这个例子与上面的例子在制作方法上有点改变，上面的例子都是对整段文本的属性进行改变，所以把触发事件加载在“P”标记上；而本例是只改变一段文本的一部分的背景颜色，所以应先用"Span"标记把要改变背景的文本括起来，然后把触发事件加载到“Span”标记上。本例在<head>与</head>之间增加的CSS代码为：<styletype="text/css"><!--.style1{background:#99CCFF}.style2{background:#FFFFFF}--> </style>制作完成，能产生效果的那段文字的源代码是这样的：<p><spanclass="style6"onmouseover="this.className='style1'"onmouseout="this.className='style1'">当鼠标移到这段文本上，背景改变了，</span>而本行的另一段背景却不变。</p>四、给超级链接动态加图标这个例子的效果是：当鼠标移到某个超级链接上，它的左边会出现一个图象，鼠标移开，图象消失。本例在制作方法上与上例相同，都是改变文本的背景，但在制作时要注意几点：1、在设置CSS的背景时是选择图象背景，并在设置图象背景的“repeat”参数时要选择“no-repeat”（不平铺）；2、在设置超级链接时，在其左边要预留出图象的位置；3、触发事件要加载在超级链接上。本例在<head>与</head>之间增加的CSS代码为：<styletype="text/css"><!-- .style1{background:url(image/dot.gif) no-repeat;}.style2{background:#FFFFFF}--></style>制作完成，能产生效果的那个超级链接的源代码是这样的：<ahref="#"onmouseover="this.className='style1'"onmouseout="this.className='style2'">将鼠标移动过来</a>通过动态改变文本的CSS属性，还可以做出许多特效，但方法基本相同，不再一一例举了，掌握了方法，你就可以发挥想象力去创作了。[这篇文章来自..，]
此文档下载收益归作者所有
举报原因
联系方式
详细说明
内容无法转码请点击此处
