AS3中实现多样化的A标签
2016-09-20 11:37
92 查看
AS3中实现多样化的A标签
2013年3月26日发表评论阅读评论首先说下想要实现的效果。在htmlText里有多个A标签,想要鼠标滑到不同的标签时,显示不同的颜色.很明显的使用html+css( styleSheel)比较方便。OK,既然是html+css,一开始我还觉得很是简单,因为AS3支持部分css的,但是当我真正去实现的时候才明白.好多事情并不是那么的想当然。
html+css的简单思路
我们使用html+css的思路来看这个问题,实在是超简单的,首先使用下面的html:<a class='a1' href='#'>This is A1</a><br/> <a class='a2' href='#'>This is A2</a>
然后再配合下面的css来实现:
.a1 a:hover{ color:#FF0000; } .a2 a:hover{ color:#00FF00; }
这样开起来很不错,但是很遗憾,AS3的 TextFiled.htmlText 不支持css的联合选择器.所以不能将
class .a1与
伪类 a:hover同时使用。如果自己解析html+解析css+textFormat不太现实。
变通办法
虽然AS3不支持css的联合选择器,但是对于单个选择器还是支持的。因此可以先给html文本设置默认的css样式,当鼠标移动到需要改变样式的字符上,再应用对应的样式即可。这个思路的难点在于如何知道鼠标移动到了需要改变的字符上,其实有两种解决方法:
判断字符在文本中的索引,根据索引段来应用对应的样式。
链接文本时,根据文本的url来应用对应的样式。
这里使用第二种,因为我们有链接文本。那么配合MouseEvent.MOUSE_OVER事件+ TextFormat.url 来实现。
将上面的css拆分为2个css,并且修改html代码为:
<a href='event:#1'>This is A1</a><br/> <a href='event:#2'>This is A2</a>
这样,鼠标到不同的a标签上,使用不同的css就可以了。
演示示例
这是一个css A:hover的示例showFlashLib.initBox("<a href="http://www.litefeel.com/wp-content/uploads/2013/03/AHoverTest.swf" ,"ahovertest",300,100"="" style="color: rgb(41, 112, 166); text-decoration: none;">http://www.litefeel.com/wp-content/uploads/2013/03/AHoverTest.swf","AHoverTest",300,100);
后话
其实AS3对html及css的支持很少。仅支持 CSS1 的一部分而不是全部,所以做一些简单的样式还是蛮好用的,但是复杂的就不要奢望了,而且就这篇文章里的例子,如果推广到非A标签的情况就不好解决了。当然Adobe的帮助文档也没有具体说明哪些css被支持,那么当我们想要使用时还是需要先测试下才好。A标签有4个伪类:
:link未访问的链接(AS3不区别是否访问过)
:visited已访问的链接(AS3不支持)
:active选定的链接(在鼠标点击与释放之间发生的事件)
:hover鼠标移动到链接上
源代码
package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFormat; /** * ... * @author lite3 */ public class AhoverTest extends Sprite { private var txt:TextField; private var style1:StyleSheet; private var style2:StyleSheet; public function AhoverTest() { var html:String = "<a href='event:#1'>This is A1</a><br/>" + "<a href='event:#2'>This is A2</a>"; style1 = new StyleSheet(); style1.parseCSS("a:hover { color:#FF0000; }"); style2 = new StyleSheet(); style2.parseCSS("a:hover { color:#00FF00; }"); txt = new TextField(); txt.multiline = true; txt.styleSheet = style1; txt.htmlText = html; addChild(txt); txt.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler); } private function moveHandler(e:MouseEvent):void { var i:int = txt.getCharIndexAtPoint(e.localX, e.localY); if (i < 0) return; // 在需要的时候更新css样式 var tf:TextFormat = txt.getTextFormat(i, i + 1); switch(tf.url) { case "event:#1" : setStyle(style1); break; case "event:#2" : setStyle(style2); break; } } private function setStyle(style:StyleSheet):void { // 这里一定要先判断当前有没有被设置过 if (txt.styleSheet != style) { txt.styleSheet = style; } } } }
» 转载请注明来源:www.litefeel.com » 《AS3中实现多样化的A标签》
» 本文链接地址:https://www.litefeel.com/css-more-a-hover-in-as3/
相关文章推荐
- 蛙蛙推荐:ASP实现自定义标签模板
- 用标签实现循环功能---标签开发之三(Inber原作)
- 在VB.NET中如何使在Webbrowser中实现标签页中打开新链接
- 使用button标签,实现三态图片按钮
- Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)
- 使用button标签,实现三态图片按钮
- newxy标签实现部门管理、用户权限管理
- Ajax程序中,自己实现页面前进、后退、与标签功能(asp.net2.0)
- 学习笔记---使用prototype.js扩展struts标签实现xmlhttprequest
- Taglib原理和实现 第五章:再论支持El表达式和jstl标签
- 用HTC实现自定义Html标签
- 实现一个具有弹性且多样化的菜单、内容菜单与状态栏
- 实现一个具有弹性且多样化的菜单、内容菜单与状态栏
- 如何实现页面上的超链接指向这个嵌入的网页?/ IFRAME标签的使用。
- Taglib原理和实现 第六章:标签内常用方法总结
- 利用html中的div标签实现网页中某一块区域的自动滚动
- 这是我们项目中的分页代码,是用JSTL + 自定义标签文件 + JAVABEAN实现的
- 用定制标签库和配置文件实现对JSP页面元素的访问控制
- 雅虎、网易ajax标签导航效果的实现