找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 4335|回复: 3
打印 上一主题 下一主题

易达CMS实现跑马灯特效!

2467

主题

2467

主题

2467

主题

管理员

易达创始人

Rank: 9Rank: 9Rank: 9

积分
30815
跳转到指定楼层
1#
admin_2 发表于 2012-2-15 12:36:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

 

呵呵 想实现这样的效果吗?

滚动的文字

 

很多网站上都能看到这样的特效,呵呵 利用易达的自定义标签

可以轻松实现这样的效果。

 

第一步 登录后台  ,条件设置,自定义标签

 

标签添写run

标签名称添写 跑马灯特效

标签内容中添写如下代码:

 

  1. <marquee>滚动的文字</marquee>
复制代码

 

 

创建成功后打开模板文件 如:zh_index.html (这是模板首页文件)

把刚才创建的自定义标签:{Yidacms_t:run} 放到一个你认为合适的地方

 

这样 跑马灯效果就实现了! 

2467

主题

2467

主题

2467

主题

管理员

易达创始人

Rank: 9Rank: 9Rank: 9

积分
30815
2#
 楼主| admin_2 发表于 2012-2-15 12:43:26 | 只看该作者

以下是 更多跑马灯特效代码:

 

  1. [br]1 各种跑马灯代码: [br]2 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: [br]3 滚动的文字 [br]4 适当的运用<marquee>标签的参数,可以表现出不同的效果,请看下面的几个例子: [br]5 1、左右弹来弹去的跑马灯 [br]6 弹来弹去跑马灯! [br]7 实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。 [br]8 源码粘贴框: [br]9 <marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee> [br]10 [br]11 2、跑的很快的跑马灯 [br]12 跑的很快跑马灯!  [br]13 只要在<marquee>标签内加上“scrollamount=30”参数即可。 [br]14 3、带有超级链接的跑马灯 [br]15 带有超链接的跑马灯!点我试试?          还有一条呢!点我试试?  [br]16 其实实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。 [br]17 源码粘贴框: [br]18 <marquee width=90%> [br]19 <a href=http://www.22.tc/ target=_blank>带有超链接的跑马灯!点我试试?</a> [br]20 <a href=http://www.22.tc/ target=_blank>还有一条呢!点我试试?</a> [br]21 </marquee> [br]22 以上几个例子都是<marquee>标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,<marquee>标签只被IE所支持,使用Netscape浏览器是看不到的噢。 [br]23 参数 用法介绍 [br]24 behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动 [br]25 direction=left,right ,up,down 跑马方向:从左向右,从右向左 [br]26 loop=100 跑马次数:循环100次,如不写默认为一直循环 [br]27 width=100%,height=200 跑马范围:宽为100%,高为200像素 [br]28 scrollamount=20 跑马速度:数越大越快 [br]29 scrolldelay=500 跑马延时:毫秒数,利用它可实现跃进式滚动 [br]30 hspace=20,vspace=20 跑马区域与其它区域间的空白大小 [br]31 bgcolor=#00FFCC 跑马区域的背景颜色 [br]32 id=gonggao 指定Id [br]33 onmouseout=gonggao.start() 鼠标离开时重新滚动 [br]34 onmouseover=gonggao.stop() 鼠标放上去时停止 [br]35 [br]36 4、超链接的跑马灯式提示信息 [br]37   把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看: [br]38   源码粘贴框: [br]39 1)将下面代码放在<body>标签下: [br]40 <script> [br]41 if (!document.layers&&!document.all) [br]42 event="test" [br]43 function showtip2(current,e,text){ [br]44 if (document.all&&document.readyState=="complete"){ [br]45 document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>' [br]46 document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 [br]47 document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 [br]48 document.all.tooltip2.style.visibility="visible" [br]49 } [br]50 else if (document.layers){ [br]51 document.tooltip2.document.nstip.document.write('<b>'+text+'</b>') [br]52 document.tooltip2.document.nstip.document.close() [br]53 document.tooltip2.document.nstip.left=0 [br]54 currentscroll=setInterval("scrolltip()",100) [br]55 document.tooltip2.left=e.pageX+10 [br]56 document.tooltip2.top=e.pageY+10 [br]57 document.tooltip2.visibility="show" [br]58 } [br]59 } [br]60 function hidetip2(){ [br]61 if (document.all) [br]62 document.all.tooltip2.style.visibility="hidden" [br]63 else if (document.layers){ [br]64 clearInterval(currentscroll) [br]65 document.tooltip2.visibility="hidden" [br]66 } [br]67 } [br]68 function scrolltip(){ [br]69 if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) [br]70 document.tooltip2.document.nstip.left-=5 [br]71 else [br]72 document.tooltip2.document.nstip.left=150 [br]73 } [br]74 </script> [br]75 2)然后在要出现提示信息的链接中,添加onMouseover语句: [br]76 <a href="pm23.htm" >跑马灯大全(一)</a> [br]77 <a href="/pc/index.htm" >电脑交互教程</a> [br]78 <a href="pmjq00.htm" >网页制作技巧技巧</a> [br]79   实现步骤: [br]80   (1)先在<body>标签下面插入一段JavaScript代码; [br]81   (2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。 [br]82
复制代码

1

主题

1

主题

1

主题

金牌会员

Rank: 6Rank: 6

积分
1961
QQ
3#
宋泽贵 发表于 2012-3-9 10:19:55 | 只看该作者
好的,谢谢了。

0

主题

0

主题

0

主题

高级会员

Rank: 4

积分
540
4#
q512868643 发表于 2012-4-6 14:13:07 | 只看该作者
顶!!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表