javascript文字特效(js写动画特效)
javascript文字特效,实现任意文字串字体由小变大，再由大变小。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" "
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
titletest/title
/head
div align=center id=Tdiv/div
body onload=wavy(0)
SCRIPT language="JavaScript"
var theText = "abcdef";
function Cycle(text,dis){
str = "";
for (i = 0; i text.length; i++){
size = 72*Math.abs( Math.sin((i+dis)/(text.length/3.14)));
str += "font style='font-size: "+ size +"pt;'" +text.substring(i,i+1)+ "/font";
}
Tdiv.innerHTML = str;
}
function wavy(n){
Cycle(theText,n);
if (n theText.length) {n=0}
setTimeout("wavy(" + (n+1) + ")", 100);
}
/SCRIPT/body
/html
一行文字跑马灯怎样用Jquery或js做？
使用方法：
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
script?src="jquery-1.11.2.min.js"/script script?src="marquee.js"/script
HTML结构：
跑马灯中的文字使用无序列表来制作，外面使用一个div作为包裹容器。
123456789101112 ? ?div?class="container"??div?class="marquee-sibling"?Breaking?News?/div??div?class="marquee"????ul?class="marquee-content-items"??????liItem?1/li??????liItem?2/li??????liItem?3/li??????liItem?4/li??????liItem?5/li????/ul??/div/div ?
CSS样式：
下面是该跑马灯特效的一些基本样式。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 ? ?.container?{??width:?100%;??background:?#4FC2E5;??float:?left;??display:?inline-block;??overflow:?hidden;??box-sizing:?border-box;??height:?45px;??position:?relative;??cursor:?pointer;}??.marquee-sibling?{??padding:?0;??background:?#3BB0D6;??width:?20%;??height:?45px;??line-height:?42px;??font-size:?12px;??font-weight:?normal;??color:?#ffffff;??text-align:?center;??float:?left;??left:?0;??z-index:?2000;}??.marquee,*[class^="marquee"]?{??display:?inline-block;??white-space:?nowrap;??position:?absolute;}??.marquee?{?margin-left:?25%;?}??.marquee-content-items?{??display:?inline-block;??padding:?5px;??margin:?0;??height:?45px;??position:?relative;}??.marquee-content-items?li?{??display:?inline-block;??line-height:?35px;??color:?#fff;}??.marquee-content-items?li:after?{??content:?"|";??margin:?0?1em;} ?
初始化插件：
123 ? ?$(function?(){??createMarquee();}); ?
在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。
配置参数：
下面是该跑马灯特效的可用配置参数。
12345678910111213141516171819202122232425262728 ? ?$(function?(){????createMarquee({??????????//?controls?the?speed?at?which?the?marquee?moves????duration:30000,???????//?right?margin?between?consecutive?marquees????padding:20,???????//?class?of?the?actual?div?or?span?that?will?be?used?to?create?the?marquee?-?????//?multiple?marquee?items?may?be?created?using?this?item's?content.?????//?This?item?will?be?removed?from?the?dom????marquee_class:'.example-marquee',???????//?the?container?div?in?which?the?marquee?content?will?animate.?????container_class:?'.example-container',???????//?a?sibling?item?to?the?marqueed?item??that?affects?-?????//?the?end?point?position?and?available?space?inside?the?container.?????sibling_class:?'.example-sibling',???????//?Boolean?to?indicate?whether?pause?on?hover?should?is?required.?????hover:?false????});??}); ?
网站里的文字像打字一样一个一个出来是怎么做的? JAVAscript的，请高手帮忙，
htmlhead
title打字效果的文字特效/title
script language="JavaScript"
var layers = document.layers;
var style = document.all;
var both = layers || style;
var idme = 908601;
if(layers) //如果不是ie浏览器
{
layerRef = 'document.layers';
styleRef = '';
}
if(style) //如果是ie浏览器
{
layerRef = 'document.all';
styleRef = '.style';
}
function writeOnText(obj, str) { //函数在页面上打印字符串
if(layers) {
with(document[obj]) {
document.open();
document.write(str); //write方法打印字符串
document.close();
}
}
if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串
}
var dispStr = new Array("javascript源码大全"); //字符串数组
var overMe = 0;
function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果
{
var tmp0 = tmp1 = '', skip = 100;
if(both idx = str.length) {
if(str.charAt(idx) == '') {
while(str.charAt(idx) != '') idx++;
idx++;
}
if(str.charAt(idx) == '' str.charAt(idx+1) != '') {
while(str.charAt(idx) != ';') idx++;
idx++;
}
tmp0 = str.slice(0, idx);
tmp1 = str.charAt(idx++);
if(overMe==0 plysnd==1) {
if(navigator.plugins[0]) {
if(navigator.plugins["LiveAudio"][0].type == "audio/basic" navigator.javaEnabled()) {
document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)", 100);
}
} else if(document.all) {
ding.Stop();
setTimeout("ding.Run()", 100);
}
overMe = 1;
} else {
overMe = 0;
}
writeOnText(idObj, "span class="+spObj+"font color='"+clr1+"'"+tmp0+"/fontfont color='"+clr2+"'"+tmp1+"/font/span");
//调用writeOnText函数将字符显示在网页上
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);
}
}
function init()
{
txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0); //调用txtTyper函数开始打字
}
/script
/head
body onLoad="init();"
center
h1打字效果的文字特效/h1
hr /
div class="ttll" id="tt10"/div
/center
/body
/html
用IE 打开 试过了。。。