用CSS实现文字变图象特效

　　一段文字，当鼠标在文字上面单击，文字消失，原来文字的地方却立即变成了一张图片，当鼠标在图片上单击，图片又消失，原来的文字又重现了，像变魔术一样，是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现，但那要增加一段javascript程序，明显增加了不少代码。而用CSS来制作这种效果，增加的代码却要少得多。

　　原理:利用CSS的属性值可动态改变的特点。

　　思路:定义一个HTML元素CSS属性的两种属性值，再用一个事件来触发，一旦事件发生，则改变HTML元素的属性值，从而达到预期目的。

　　制作方法:

　　1、在网页中输入一段文字，用“Span”标记把它括起来，并给它加一个CSS的“ID”属性(也就是给这段文字编一个代号，如:“Text1”，以便识别);再插入一张图片，同样也用“Span”把它括起来，也给它加一个“ID”属性，如:ID="image1";

　　2、在网页源代码的〈head〉与〈/head〉之间加上下面这段CSS代码:

　　〈style type="text/css"〉

　　〈!--

　　.style1 { position:absolute; top: 200px; left:180px;

　　background-color:#ccccff; visibility:hidden}

　　.style2 { position:absolute; top: 200px; left:180px;

　　background-color:#ccccff; }

　　.style3 { position:absolute; top: 190px; left:180px;

　　visibility:hidden}

　　.style4 { position:absolute; top: 190px; left:180px; }

　　--〉

　　〈/style〉

　　上述代码中的“top”、“left”的值用于定位文本和图片在网页中位置，“backgroud-color”用于确定文本的背景颜色，这些属性值要根据实际情况修改。visibility是决定当前对象是否显示的CSS属性，本例就是动态地改变这个属性值来达到效果的;

　　3、在“Text1 ”的那个“span”中加载CSS的“.style2”，让那段文本一开始是显示的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“Text1”采用CSS的“.style1”，把文本隐藏;二是让“image1”采用CSS的“.style4”，让图象显示。这样，“Text1”及那段文本的代码是这样的:〈span　id="text1" class="style2" onclick="document.all.text1.className=''style1''; document.all.image1.className=''style4'' "〉〈font color="#0000FF"〉鼠标在这段文字上单击，文字消失变为图象。在图象上单击，图象消失，恢复为文字。〈/font〉

　　〈/span〉
　　4、同样在“image1 ”的那个“span”中加载CSS的“.style3”，让那张图片一开始是隐藏的，并再加载一个“onclick”触发事件，一旦这个事件发生，将做两件事，一是让“Text1”采用CSS的“.style2”，把文本显示;二是让“image1”采用CSS的“.style3”，让图象隐藏。这样，“image1”及那张图片的代码是这样的:

　　〈span id="image1" class="style3" onclick="document.all.text1.className=''style2'';document.all.image1.

　　className=''style3'' "〉〈img src="image/line.gif" width="316"

　　height="26"〉〈/span〉

　　上面代码中“img”中的代码在实际制作中将随插入图片的不同而改变。

赞 (0)

相关推荐

  • 保存几个不错的css特效字

    .drop0 {color:#FFFFFF;filter: DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1);FONT-SIZE: 12px;} .drop1 {color:#000000;filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1, Positive=1);FONT-SIZE: 12px;} 测试CSS文字阴影特效 测试CSS文字阴影特效 Test CSS text Shadow s

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • 用CSS实现鼠标单击特效

    如果你能很好地应用CSS,那么你的主页将被打扮得很靓.下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图. 1.将下面的代码复制到你的主页中和之间. 〈STYLE〉.shadow { FILTER: shadow(color=blue,direction=225) } .shadow1 { FILTER: shadow(color=red,direction=225) } .shadow2 { FILTER: shadow(color=green,direction=225) } .div {

  • 基于jQuery实现的文字按钮表单特效整理

    基于jQuery实现的文字按钮表单特效整理

    1.jQuery幻灯片按钮控制图片过渡特效 基于jQuery实现的幻灯片按钮控制图片过渡特效源码,共有4幅图片进行自动切换,且切换时有幻灯片过度的效果.用户还可自定义幻灯片的标题文字和内容.是一款非常优秀的特效源码. 在线演示 源码下载 2.htm5+CSS3实现的表单美化带输入验证特效 纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用. 在线演示 源码下载 3.jquery制作的带有遮罩弹出层实现登录注册等表单 实现了点击后在原始页面上弹出想用页面的

  • DIV+CSS实现的滑动门菜单特效代码

    DIV+CSS实现的滑动门菜单特效代码

    我们DIV+CSS实现的滑动门菜单特效 #menu { margin:0; padding:0; height:26em; overflow:hidden; background:#FFFCF2; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; wid

  • jQuery 和 CSS 的文本特效插件集锦

    jQuery 和 CSS 的文本特效插件集锦

    Jumble Text Effect Plugins Demo||Download Vticker – Vertical News Ticker With JQuery Plugin Demo||Download JQuery TE – Text Editor With JQuery Plugin Demo||Download Squishy – JQuery Plugin For Fitting Text Exactly To Its Container Demo||Download Boot

  • jQuery实现Twitter的自动文字补齐特效

    jQuery实现Twitter的自动文字补齐特效

    上图效果可以使用jQuery插件Typeahead.js来实现,这款jQuery插件来自于Twitter的一个新的项目,支持远程和本地的数据集.比较有特色的地方在于你可以将数据集使用本地存储(local storage)来保存在本地,有效的提高用户体验.同时也拥有很多远程数据集的处理选项,例如(请求频率,最大的并发请求数,等等). 主要特性 支持数据本地保存,客户端加载,优化加载速度 支持多语言,并且支持阿拉伯文 支持Hogan.js模板引擎整合 支持多数据集拼装 支持本地和远程的数据集 项目地

  • 精心挑选的15款优秀jQuery 本特效插件和教程

    精心挑选的15款优秀jQuery 本特效插件和教程

    今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果. 01. 滑动的字符 在线演示 下载源码 02. 鼠标悬停变换效果 在线演示 下载源码 03. 旋转的文本 在线演示 下载源码 04. 滚动变换的文本 在线演示 下载源码 05. 精致的倒计时效果 在线演示 下载源码 06.

  • 用CSS实现文字变图象特效

    一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到

  • js+css实现文字散开重组动画特效代码分享

    js+css实现文字散开重组动画特效代码分享

    文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l

  • angularjs实现文字上下无缝滚动特效代码

    angularjs实现文字上下无缝滚动特效代码

    最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}

  • js实现非常简单的焦点图切换特效实例

    本文实例讲述了js实现非常简单的焦点图切换特效的方法.分享给大家供大家参考.具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • jQuery实现仿Alipay支付宝首页全屏焦点图切换特效

    本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • jQuery焦点图切换特效代码分享

    jQuery焦点图切换特效代码分享

    本文实例讲述了jQuery焦点图切换特效.分享给大家供大家参考.具体如下: 这是一款网易保健品商城网站的jQuery焦点图代码,界面简洁.时尚.大方,通用性比较强,实现过程很简单. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css

  • jquery实现多屏多图焦点图切换特效的方法

    本文实例讲述了jquery实现多屏多图焦点图切换特效的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • jquery京东商城双11焦点图多图广告特效代码分享

    jquery京东商城双11焦点图多图广告特效代码分享

    本文实例讲述了jquery京东商城双11焦点图多图广告特效.分享给大家供大家参考.具体如下: jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码,是一段模仿京东商城双11的焦点图代码,专业应用于网站的图片展示及重点展示的区域,该段代码实现了鼠标滑过切换图片及自动切换图片两种效果. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jque

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =

随机推荐