dreamweaver图片展示特效代码

dreamweaver常用代码。

1.控制横向和纵向滚动条的显隐？<body style="overflow-y:hidden"> 去掉x轴<body style="overflow-x:hidden"> 去掉y轴<body scroll="no">不显--------------------------------------------------------------------------------2.表格变色<TDstyle="CURSOR: hand">--------------------------------------------------------------------------------3.禁止复制，鼠标拖动选取<body ondragstart=window.event.returnValue=falseoncontextmenu=window.event.returnValue=falseonselectstart=event.returnValue=false>--------------------------------------------------------------------------------4.普通iframe页面<iframe name="name" src="/Web/main.htm" width="450"height="287" scrolling="Auto" frameborder="0"></iframe>--------------------------------------------------------------------------------5.iframe自适应高度<iframe name="pindex" src="/Web/index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no ></iframe>--------------------------------------------------------------------------------6.IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标<link rel="Shortcut Icon" href="/Web/favicon.ico"><link rel="Bookmark" href="/Web/favicon.ico">--------------------------------------------------------------------------------7.字号缩放越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。

DW常用代码

dw中常用的特效代码参考：/1.让浏览器窗口永远都不出现滚动条。

〈body style="overflow-x:hidden;overflow-y:hidden"〉或〈body style="overflow:hidden"〉或〈body scroll=no〉没有水平滚动条〈body style="overflow-x:hidden"〉没有垂直滚动条〈body style="overflow-y:hidden"〉2,如何给图片抖动怎做的.〈SCRIPT language=javascript1.2〉〈!--var rector=2var stopit=0var a=1var count=0function init(which){stopit=0shake=whichshake.style.left=0shake.style.top=0}function rattleimage(){if ((!document.all&&!document.getElementById)||stopit==1||count==100)returncount++if (a==1){shake.style.top=parseInt(shake.style.top)+rector}else if (a==2){shake.style.left=parseInt(shake.style.left)+rector}else if (a==3){shake.style.top=parseInt(shake.style.top)-rector}else{shake.style.left=parseInt(shake.style.left)-rector}if (a〈4)a++elsea=1setTimeout("rattleimage()",50)}function stoprattle(which){stopit=1count=0which.style.left=0which.style.top=0}//--〉〈/SCRIPT〉〈style〉.shakeimage {POSITION: relative}〈/style〉〈img src="图片的路径" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage()class=shakeimage〉4，在DW如何给水平线加颜色。

dreamweaver常用的代码

网页的HTML基本代码贴图：<img src="图片地址">; 加入连接：<a href="所要连接的相关地址">写上你想写的字</a>;在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>;移动字体(走马灯)：<marquee>写上你想写的字</marquee>; 字体加粗：<b>写上你想写的字</b>字体斜体：<i>写上你想写的字</i>; 字体下划线: <u>写上你想写的字</u>;字体删除线: <s>写上你想写的字</s>;字体加大: <big>写上你想写的字</big>;字体控制大小：<h1>写上你想写的字</h1>(其中字体大小可从h1-h5,h1最大，h5最小);更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间;消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>;贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>;贴flash: <embed src="flash地址" width="宽度" height="高度">;贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>;换行：<br>; 段落：<p>段落</p>;原始文字样式：<pre>正文</pre>;换帖子背景：<body background="背景图片地址">; 固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>;定制帖子背景颜色：<body bgcolor="#value">(value值见10); 帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>; 贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>以下代码是让滚动文字字幕的代码：<marquee scrollamount=3 direction=up height=50><center><font face=黑体color=blue size=5><b>文字一<br><br>文字二<br><br>文字三<br><br>文字四<br><br>文字五</b></font> <br><br></center></marquee><marquee >里面的参数修改一下，效果将不一样，这里仅提醒一下direction参数，可以改为向下（down）、向左（left）和向右（right）。

Dreamweaver网页设计代码大全

Dreamweaver网页设计代码大全Dreamweaver网页设计HTML语法大全由51RGB小编整理分享：< !> 跑马灯<marquee>...</marquee>普通卷动<marquee behavior=slide>...</marquee>滑动<marquee behavior=scroll>...</marquee>预设卷动<marquee behavior=alternate>...</marquee>来回卷动<marquee direction=down>...</marquee>向下卷动<marquee direction=up>...</marquee>向上卷动<marquee direction=right></marquee>向右卷动<marquee direction=left></marquee>向左卷动<marquee loop=2>...</marquee>卷动次数<marquee width=180>...</marquee>设定宽度<marquee height=30>...</marquee>设定高度<marquee bgcolor=FF0000>...</marquee>设定背景颜色<marquee scrollamount=30>...</marquee>设定卷动距离<marquee scrolldelay=300>...</marquee>设定卷动时间<!>字体效果<h1>...</h1>标题字(最大)<h6>...</h6>标题字(最小)<b>...</b>粗体字<strong>...</strong>粗体字(强调)<i>...</i>斜体字<em>...</em>斜体字(强调)<dfn>...</dfn>斜体字(表示定义)<u>...</u>底线<ins>...</ins>底线(表示插入文字)<strike>...</strike>横线<s>...</s>删除线<del>...</del>删除线(表示删除)<kbd>...</kbd>键盘文字<tt>...</tt> 打字体<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>...</plaintext>固定宽度字体(不执行标记符号)<listing>...</listing> 固定宽度小字体<font color=00ff00>...</font>字体颜色<font size=1>...</font>最小字体<font style =font-size:100 px>...</font>无限增大<!>区断标记<hr>水平线<hr size=9>水平线(设定大小)<hr width=80%>水平线(设定宽度)<hr color=ff0000>水平线(设定颜色)<br>(换行)<nobr>...</nobr>水域(不换行)<p>...</p>水域(段落)<center>...</center>置中<!>连结格式<base href=地址>(预设好连结路径)<a href=地址></a>外部连结<a href=地址target=_blank></a>外部连结(另开新窗口)<a href=地址target=_top></a>外部连结(全窗口连结)<a href=地址target=页框名></a>外部连结(在指定页框连结)<!>贴图/音乐<img src=图片地址>贴图<img src=图片地址width=180>设定图片宽度<img src=图片地址height=30>设定图片高度<img src=图片地址alt=提示文字>设定图片提示文字<img src=图片地址border=1>设定图片边框<bgsound src=MID音乐文件地址>背景音乐设定<!>表格语法<table aling=left>...</table>表格位置,置左<table aling=center>...</table>表格位置,置中<table background=图片路径>...</table>背景图片的URL=就是路径网址<table border=边框大小>...</table>设定表格边框大小(使用数字)<table bgcolor=颜色码>...</table>设定表格的背景颜色<table borderclor=颜色码>...</table>设定表格边框的颜色<table borderclordark=颜色码>...</table>设定表格暗边框的颜色<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)<table cols=参数>...</table>指定表格的栏数<table frame=参数>...</table>设定表格外框线的显示方式<table width=宽度>...</table>指定表格的宽度大小(使用数字)<table height=高度>...</table>指定表格的高度大小(使用数字)<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)<!>分割窗口<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整<frameset cols="20%,*">分割左右两个框架<frameset cols="20%,*,20%">分割左中右三个框架< 分割上下两个框架<frameset rows="20%,*,20%">分割上中下三个框架<! - - ... - -> 批注感谢下载!欢迎您的下载，资料仅供参考。

Dreamweaver网页动态特效教程

Dreamweaver网页动态特效教程一、介绍Dreamweaver是一款强大的网页制作软件，其丰富的特效功能使得网页设计更加生动和具有吸引力。

本教程将介绍Dreamweaver中动态特效的应用，帮助读者快速制作出令人惊艳的网页动画效果。

二、背景知识在学习动态特效之前，有些基本知识是必要的。

首先，要了解网页中的HTML、CSS和Javascript三者之间的关系和作用。

这三个标准技术在网页设计中起到至关重要的作用。

其次，对于动态特效的实现需要掌握基本的CSS和Javascript知识，包括选择器、属性和方法等。

三、基本动态特效1. 图片轮播图片轮播效果在网页设计中非常常见，可以使网页变得更有吸引力。

在Dreamweaver中，使用Javascript的代码可以实现简单的轮播功能。

可以通过设置延时函数和计时器实现图片的自动切换，或者通过点击事件改变展示图片。

2. 导航动画网页导航条是用户浏览网站的重要组成部分，为了使导航更吸引眼球，可以通过动画效果提升用户体验。

在Dreamweaver中，可以通过设置CSS的过渡和动画属性来实现导航栏的动态效果，比如菜单项的放大、颜色渐变等。

四、高级动态特效1. 视差滚动效果视差滚动效果是一种通过不同层级元素的滚动速度差异来创建的效果，使得页面的深度和立体感更加突出。

在Dreamweaver中，可以通过使用CSS和Javascript的组合来实现这一效果。

通过控制元素的滚动速度和位置，可以使页面中的元素具有立体感，并且引导用户的注意力。

2. 瀑布流布局瀑布流布局是一种网页设计中常用的动态效果，常用于图片墙等场景。

在Dreamweaver中，可以通过CSS和Javascript结合来实现瀑布流布局。

通过计算每个元素的位置和高度，动态调整元素的位置，实现瀑布流效果。

五、实际案例为了更好地理解动态特效的应用，下面以一个实际案例来说明。

假设我们要制作一个产品展示页面，页面包含多张产品图片和文字描述。

Dreamweaver网页设计代码大全

Dreamweaver网页设计代码大全Dreamweaver网页设计HTML语法大全由51RGB小编整理分享：< !> 跑马灯<marquee>...</marquee>普通卷动<marquee behavior=slide>...</marquee>滑动<marquee behavior=scroll>...</marquee>预设卷动<marquee behavior=alternate>...</marquee>来回卷动<marquee direction=down>...</marquee>向下卷动<marquee direction=up>...</marquee>向上卷动<marquee direction=right></marquee>向右卷动<marquee direction=left></marquee>向左卷动<marquee loop=2>...</marquee>卷动次数<marquee width=180>...</marquee>设定宽度<marquee height=30>...</marquee>设定高度<marquee bgcolor=FF0000>...</marquee>设定背景颜色<marquee scrollamount=30>...</marquee>设定卷动距离<marquee scrolldelay=300>...</marquee>设定卷动时间<!>字体效果<h1>...</h1>标题字(最大)<h6>...</h6>标题字(最小)<b>...</b>粗体字<strong>...</strong>粗体字(强调)<i>...</i>斜体字<em>...</em>斜体字(强调)<dfn>...</dfn>斜体字(表示定义)<u>...</u>底线<ins>...</ins>底线(表示插入文字)<strike>...</strike>横线<s>...</s>删除线<del>...</del>删除线(表示删除)<kbd>...</kbd>键盘文字<tt>...</tt> 打字体<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>...</plaintext>固定宽度字体(不执行标记符号)<listing>...</listing> 固定宽度小字体<font color=00ff00>...</font>字体颜色<font size=1>...</font>最小字体<font style =font-size:100 px>...</font>无限增大<!>区断标记<hr>水平线<hr size=9>水平线(设定大小)<hr width=80%>水平线(设定宽度)<hr color=ff0000>水平线(设定颜色)<br>(换行)<nobr>...</nobr>水域(不换行)<p>...</p>水域(段落)<center>...</center>置中<!>连结格式<base href=地址>(预设好连结路径)<a href=地址></a>外部连结<a href=地址target=_blank></a>外部连结(另开新窗口)<a href=地址target=_top></a>外部连结(全窗口连结)<a href=地址target=页框名></a>外部连结(在指定页框连结)<!>贴图/音乐<img src=图片地址>贴图<img src=图片地址width=180>设定图片宽度<img src=图片地址height=30>设定图片高度<img src=图片地址alt=提示文字>设定图片提示文字<img src=图片地址border=1>设定图片边框<bgsound src=MID音乐文件地址>背景音乐设定<!>表格语法<table aling=left>...</table>表格位置,置左<table aling=center>...</table>表格位置,置中<table background=图片路径>...</table>背景图片的URL=就是路径网址<table border=边框大小>...</table>设定表格边框大小(使用数字)<table bgcolor=颜色码>...</table>设定表格的背景颜色<table borderclor=颜色码>...</table>设定表格边框的颜色<table borderclordark=颜色码>...</table>设定表格暗边框的颜色<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)<table cols=参数>...</table>指定表格的栏数<table frame=参数>...</table>设定表格外框线的显示方式<table width=宽度>...</table>指定表格的宽度大小(使用数字)<table height=高度>...</table>指定表格的高度大小(使用数字)<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)<!>分割窗口<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整<frameset cols="20%,*">分割左右两个框架<frameset cols="20%,*,20%">分割左中右三个框架< 分割上下两个框架<frameset rows="20%,*,20%">分割上中下三个框架<! - - ... - -> 批注。

Dreamweaver代码大全

Dreamweaver代码大全2010-11-10 17:09html文档示例：＜html＞＜head＞＜title＞标题＜title＞＜/head＞＜body＞……….文件内容……….＜/body＞＜/html＞html标签范例：<头标签>内容<尾标签>1.文件标题＜title＞……….＜/title＞2.文件更新–＜meta＞【1】10秒后自动更新一次＜meta http-equiv=”refresh”content=10＞【2】10秒后自动连结到另一文件＜meta http-equiv=”refresh”content=10＞3.查询用表单–＜isindex>若欲设定查询栏位前的提示文字：＜isindex prompt=”提示文字”＞4.预设的基准路径–＜base>＜base href=”放置文件的主机之URL”＞版面1.标题文字＜h#＞……….＜/h#＞#=1~6；h1为最大字，h6为最小字2.字体变化＜font＞……….＜/font＞【1】字体大小＜font size=#＞……….＜/font＞#=1~7；数字愈大字也愈大【2】指定字型＜font face=”字型名称”＞……….＜/font＞【3】文字颜色＜font color=#rrggbb＞……….＜/font＞rr：表红色（red）色码gg：表绿色（gree3.显示小字体＜small＞……….＜/small＞4.显示大字体＜big＞……….＜/big＞5.粗体字＜b＞……….＜/b＞6.斜体字＜i＞……….＜/i＞7.打字机字体＜tt＞……….＜/tt＞8.底线＜u＞……….＜/u＞9.删除线＜strike＞……….＜/strike＞10.下标字＜sub＞……….＜/sub＞11.上标字＜sup>……….＜/sup＞12.文字闪烁效果＜blink＞……….＜/blink＞13.换行＜br＞14.分段＜p＞15.文字的对齐方向＜p align=”#”＞ #号可为 left：表向左对齐（预设值）center：表向中对齐 right：表向右对齐 P.S.＜p align=”#”＞之后的文字都会以所设的对齐方式显示，直到出现另一个＜p align=”#”＞改变其对齐方向，或遇到＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。

【免费下载】常用的网页特效代码

message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 }
var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-200 }
} function www_helpor_net___Mousetrace(evnt) { if (www_helpor_net__ns4) {if (evnt.pageX) {www_helpor_net___ml=evnt.pageX; w else{ www_helpor_net___ml=(event.clientX + document.body. www_helpor_net___mt=(event.clientY + document.body. } if (www_helpor_net___tracescript)eval(www_helpor_ne } </script>
6．接触链接自动打开窗口
说明鼠标放到链接上，就立刻弹出警告框效果试试
<a href="" onMouseOver="alert('你好！\n\n本站域名:ht
代码
7．数字时钟
说明数字化的时钟
对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术关，系电，力根通保据过护生管高产线中工敷资艺设料高技试中术卷资，配料不置试仅技卷可术要以是求解指，决机对吊组电顶在气层进设配行备置继进不电行规保空范护载高与中带资负料荷试下卷高问总中题体资，配料而置试且时卷可，调保需控障要试各在验类最；管大对路限设习度备题内进到来行位确调。保整在机使管组其路高在敷中正设资常过料工程试况中卷下，安与要全过加，度强并工看且作护尽下关可都于能可管地以路缩正高小常中故工资障作料高；试中对卷资于连料继接试电管卷保口破护处坏进理范行高围整中，核资或对料者定试对值卷某，弯些审扁异核度常与固高校定中对盒资图位料纸置试，.卷保编工护写况层复进防杂行腐设自跨备动接与处地装理线置，弯高尤曲中其半资要径料避标试免高卷错等调误，试高要方中求案资技，料术编试交写5、卷底重电保。要气护管设设装线备备置敷4高、调动设中电试作技资气高，术料课中并3中试、件资且包卷管中料拒含试路调试绝线验敷试卷动槽方设技作、案技术，管以术来架及避等系免多统不项启必方动要式方高，案中为；资解对料决整试高套卷中启突语动然文过停电程机气中。课高因件中此中资，管料电壁试力薄卷高、电中接气资口设料不备试严进卷等行保问调护题试装，工置合作调理并试利且技用进术管行，线过要敷关求设运电技行力术高保。中护线资装缆料置敷试做设卷到原技准则术确：指灵在导活分。。线对对盒于于处调差，试动当过保不程护同中装电高置压中高回资中路料资交试料叉卷试时技卷，术调应问试采题技用，术金作是属为指隔调发板试电进人机行员一隔，变开需压处要器理在组；事在同前发一掌生线握内槽图部内纸故，资障强料时电、，回设需路备要须制进同造行时厂外切家部断出电习具源题高高电中中源资资，料料线试试缆卷卷敷试切设验除完报从毕告而，与采要相用进关高行技中检术资查资料和料试检，卷测并主处且要理了保。解护现装场置设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。

dreamweaver经典网页特效及网页代码设计技巧系列之---文字跳舞效果

dreamweaver 经典网页特效及网页代码设计技巧系列之---文字跳舞效果脚本说明:第一步:把如下代码加入<body>区域中<SCRIPTlanguage=JavaScript></SCRIPT><SCRIPTlanguage=JavaScript></SCRIPT><DIV id=Layer1 style="Z-INDEX: 1; LEFT: 264px; WIDTH: 58px; POSITION:absolute; TOP: 86px; HEIGHT: 52px"><FONT face=隶书color=#ff3333size=7>网</FONT></DIV><DIV id=Layer2style="Z-INDEX: 2; LEFT: 324px; WIDTH: 36px; POSITION: absolute; TOP: 112px; HEIGHT: 27px"><FONT face=隶书size=4><fontcolor="#336600"size="5">页</font></FONT></DIV><DIV id=Layer4style="Z-INDEX: 4; LEFT: 363px; WIDTH:25px; POSITION:absolute; TOP: 116px; HEIGHT: 22px"><FONT face=隶书size=4><fontcolor="#FFFF00">制</font></FONT></DIV><DIV id=Layer5style="Z-INDEX: 5; LEFT: 388px; WIDTH:1px; POSITION:absolute; TOP: 116px; HEIGHT: 1px"><FONT face=隶书size=4><FONTcolor=#ff33ff>作</FONT></FONT></DIV><DIV id=Layer6 style="Z-INDEX: 6; LEFT: 408px; WIDTH: 18px; POSITION:absolute; TOP: 116px; HEIGHT: 12px"><FONT face=隶书size=4><fontcolor="#0000CC">特</font></FONT></DIV><DIV id=Layer7style="Z-INDEX: 7; LEFT: 428px; WIDTH:21px; POSITION:absolute; TOP: 116px; HEIGHT: 15px"><FONT face=隶书size=4><fontcolor="#FF6633">效</font></FONT></DIV><DIV id=Layer3style="Z-INDEX: 8; LEFT: 453px; WIDTH:31px; POSITION: absolute; TOP: 91px; HEIGHT:42px"><B><FONT color=#00ff00size=+5><I><font color="#009900">～</font></I></FONT></B></DIV>第二步:把<body>中的内容改为:<bodybgcolor="#fef4d9" onload="MM_timelinePlay('Timeline1')">。

Dreamweaver代码大全DW常用代码

Dreamweaver 代码大全 Dreamweaver 代码基本结构标签: <HTML>,表示该文件为HTML 文件<HEAD>,包含文件的标题,使用的脚本,样式定义等<TITLE>---</TITLE>,包含文件的标题,标题出现在浏览器标题栏中</HEAD>,<HEAD>的结束标志<BODY>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示. </BODY>,<BODY>的结束标志 </HTML>,<HTML>的结束标志其它主要标签,以下所有标志用在<BODY></BODY>中:<A,href="…"></A>,链接标志,"…"为链接的文件地址<IMG,src="…">,显示图片标志,"…"为图片的地址<BR>,换行标志、<P>,分段标志<B></B>,采用黑体字<I></I>,采用斜体字<HR>,水平画线<TABLE></TABLE>,定义表格,HTML 中重要的标志<TR></TR>,定义表格的行,用在<TABLE></TABLE>中<TD></TD>,定义表格的单元格,用在<TR></TR>中<FONT></FONT>,字体样式标志例:属性 bgcolor="BLACK"表示背景色为黑色.引用属性的例子:`<BODY,bgcolor="BLACK"></BODY>表示页面背景色为黑色;<TABLE,bgcolor="BLACK"></TABLE>表示表格背景色为黑色.ALIGN=LEFT,左对齐(缺省值),WIDTH=象素值或百分比,对象宽度.ALIGN=CENTER,居中,HEIGHT=象素值或百分比,对象高度.ALIGN=RIGHT,右对齐.COLOR=#RRGGBB,前景色,参考色彩对照表.BGCOLOR=#RRGGBB,背景色.<center>表示绝对居中.(<table></table>表格标识的开始和结束.cellpadding=数值单位是像素,定义表元内距cellspacing=数值单位是像素,定义表元间距border=数值单位是像素,定义表格边框宽度width=数值单位是像素或窗口百分比,定义表格宽度background=图片链接地址,定义表格背景图<tr></tr>表格中一个表格行的开始和结束;<td></td>表格中行内一个单元格的开始和结束Colspan="",单元格跨越多列;:Rowspan="",单元格跨越多行;Width="";定义表格宽度Height="";定义表格高度Align="";对齐方式Valign="";Border="",边框宽度;Bgcolor="",背景色;Bordercolor="",边框颜色;Bordercolorlight="",边框明亮面的颜色;Bordercolordark="",边框暗淡面的颜色;Cellpadding="",内容与边框的距离(默认为 2);；Cellspacing="",单元格间的距离(默认为 2);<br>强制换行<font></font>文本标识的开始和结束face=字体color=颜色<b></b>加粗文字标识的开始和结束style=font-size:40pt;,用样式表方式控制字体大小,这里是 40 点<div></div>,分区标识的开始和结束/align=|center|left|right|水平对齐方式<marquee></marquee>动态标识的开始和结束,如标识内放置贴图格式则可实现图片滚动scrollamount=1~60,滚动速度direction=|left|right|up|down|,滚动方向scrolldelay=滚动延时,单位:毫秒<P>段落标识,空格符,<img>贴图标识·Multiple,多选src=../../图片链接地址,贴图标识必备属性：style=filter:Alpha(opacity=100,style=2);filter:样式表滤镜;Alpha:透明滤镜,opacity:不透明度 100(0~100);style:样式 2(0~3),rules="none"不显示内框"<embed,src ="…">多媒体文件标识src="../../FILENAME",设定音乐文件的路径,文件类型除了可以播放.rm;.mp3;.wav 等音频,还可播放.swf 和.mov 等视频. AUTOSTART=TRUE/FALSE,、是否要音乐文件传送完就自动播放,TRUE 是要,FALSE 是不要,默认为 FALSELOOP=,设定播放重复次数,LOOP=6 表示重复 6 次,true 或-1 为无限循环,false 为播放一次即停止. STARTIME="分:秒",设定乐曲的开始播放时间,如 20 秒后播放写为 STARTIME=00:20VOLUME=0-100,设定音量的大小.如果没设定的话,就用系统的音量. WIDTH,HEIGHT,设定控制面板的大小,都设为 0 可隐藏播放器 HIDDEN=TRUE,隐藏控制面板CONTROLS=CONSOLE/SMALLCONSOLE,-设定控制面板的样子,<bgsound,src ="…">,背景音乐标识,只能用于.wav 和.mp3 格式.LOOP=,设定播放重复次数,LOOP=6 表示重复 6 次,true 或-1 为无限循环,false 为播放一次即停止. 表单标签:<form></form>表格标识的开始和结束,表单的内容都放在这里.下边的标签放在表单内:<select>下拉选择框<option></option></select><textarea></textarea>,大量文字输入的编辑块Cols="",行;Rows="",列;<input,type="text">,文本框<input,type="password">,密码框<input,type="submit">,提交按扭<input,type="checkbox">,复选框<input,type="radio">,单选框<input,type="reset">,重置按扭*<input,type="image">,图片按扭<input,type="hidden">,隐藏域<input,type="button">,按扭<input,type="file">,浏览文件Name="";Value=""Size=""<bgsound>,背景音乐;src=""~Loop="",循环次数;<embed>,媒体播放块;src=""Loop="",循环次数;<marquee></marquee>,滚动部分;Bgcolor=""Behavior,设置或获取文本如何在字幕中滚动.Direction="",滚动方向;Height=""Width=""Loop="",环次数;,注释标记,在""之间的内容将不在浏览器中显示.<html></html>,创建一个 HTML 文档;<head></head>,设置文档标题和其它在网页中不显示的信息;<title></title>,设置文档的标题;<h1></h1>,最大的标题;<pre></pre>,预先格式化文本;<u></u>,下划线<b></b>,黑体字;。

【网页特效代码-页面特效】图片幻灯片特效代码

【网页特效代码-页面特效】图片幻灯片特效代码.txt <title>网站常用的一种JS制作的幻灯片Ｑ291911320</title></head><body><script>var widths=282;var heights=164;var counts=6;img1=new Image();img1.src='/teixiao/UploadFiles_4612/200711/20071107093221112.jpg';img2=new Image();img2.src='/teixiao/UploadFiles_4612/200711/20071107093221878.jpg';img3=new Image();img3.src='/teixiao/UploadFiles_4612/200711/20071107093222138.jpg';img4=new Image();img4.src='/teixiao/UploadFiles_4612/200711/20071107093222549.jpg';img5=new Image();img5.src='/teixiao/UploadFiles_4612/200711/20071107093222663.jpg';img6=new Image();img6.src='/teixiao/UploadFiles_4612/200711/20071107093222549.jpg';url1=new Image ();url1.src='';url2=new Image ();url2.src='';url3=new Image ();url3.src='';url4=new Image ();url4.src='';url5=new Image ();url5.src='';url6=new Image ();url6.src='';//var nn=1;var key=0;function change_img(){if(key==0){key=1;}else if(document.all){document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}eval('document.getElementById("pic").src=img'+nn+'.src');eval('document.getElementById("url").href=url'+nn+'.src');for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}document.getElementById("xxjdjj"+nn).className='bxx';nn++;if(nn>counts){nn=1;}tt=setTimeout('change_img()',4000);}function changeimg(n){nn=n;window.clearInterval(tt);change_img();}document.write('<style>');document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-he ight:12px;font:9px sans-serif;background-color:#999;}');document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-he ight:12px;font:9px sans-serif;background-color:#D34600;}');document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-he ight:12px;font:9px sans-serif;background-color:#D34600;}');document.write('</style>');document.write('<divstyle="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:cli p;">');document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0 ,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>'); document.write('<divstyle="filter:alpha(style=1,opacity=10,finishOpacity=80);background:#888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;h eight:12px;padding:0px;margin:0px;border:0px;">');for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}document.write('</div></div>');change_img();</script></body></html>言者无罪，闻者足戒。

Dreamweaver英语代码详解

Decoration：在文本中添加underline（下划线）、overline（上划线）、line-through（中划线）、blink（闪烁效果）。这些效果可以同时存在，将效果前的复选框选定即可。相对应的CSS属性是”text-decoration”。
注意：链接的默认设置是Underline，我们可以通过选none去除下划线。Blink（闪烁效果）只在NC浏览器里可以看到。 Weight：给字体指定粗体字的磅值。Normal等同于400；Bold等同于700。设粗体字一般用bold。相对应的CSS属性是”font-weight”。 Variant：允许你选取字体的变种，选small-caps（小型大写字母）时，此样式区域内所有字母大写。相对应的CSS属性是，或者令单词全部大写或全部小写。参数：capitalize（单词首字母大写）、uppercase（转换成大写）、lowercase（转换成小写）、none（不转换）。相对应的CSS属性是” text-transform”。 Color：定义文字颜色。相对应的CSS属性是” color”。注意：CSS中颜色的值有三种表示方法： l #RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为“00 – FF”的两位十六进制正整数。例如：#FF0000表示红色，#FFFF00表示黄色。 l rgb(R,G,B)格式，RGB为三色的值，取0~255，例如：rgb(255,0,0)表示红色，rgb(255,255,0)表示黄色。 l 用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色，yellow表示黄色。 2. Background（背景） Background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。 Background Color：设置元素的背景色。相对应的CSS属性是”background-color”。 Background Image：设置元素的背景图像。相对应的CSS属性是”background-image”。 Repeat：确定背景图像是否以及如何重复。No Repeat：在元素的开头显示一遍图像。Repeat：在元素的背景部分水平和垂直方向平铺图像。Repeat-x and Repeat-y：分别在水平和垂直方向重复显示，默认为Repeat。相对应的CSS属性是”background-repeat”。注意：如果定义的元素的BODY，可以控制页面背景是否重复。 Attachment：固定背景图像或者跟随内容滚动。参数fixed表示固定背景，scroll表示跟随内容滚动的背景。相对应的CSS属性是”background-attachment”。注意：如果定义的元素的BODY，可以使页面背景固定。

图片特效代码

超酷超绚精美图片展示效果代码(一)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超酷超绚精美图片展示效果代码(一) - 网页特效观止-网页特效代码||</title><meta http-equiv="imagetoolbar" content="no"><style type="text/css">html {overflow: hidden;}body {margin: 0px;padding: 0px;background: #000;width: 100%;height: 100%;}#imageFlow {position: absolute;width: 100%;height: 80%;left: 0%;top: 10%;background: #000;}#imageFlow .diapo {position: absolute;left: -1000px;cursor: pointer;-ms-interpolation-mode: nearest-neighbor;}#imageFlow .link {border: dotted #fff 1px;margin-left: -1px;margin-bottom: -1px;}#imageFlow .bank {visibility: hidden;}#imageFlow .top {position: absolute;width: 100%;height: 40%;background: #181818;}#imageFlow .text {position: absolute;left: 0px;width: 100%;bottom: 16%;text-align: center;color: #FFF;font-family: verdana, arial, Helvetica, sans-serif;z-index: 1000;}#imageFlow .title {font-size: 0.9em;font-weight: bold;}#imageFlow .legend {font-size: 0.8em;}#imageFlow .scrollbar {position: absolute;left: 10%;bottom: 10%;width: 80%;height: 16px;z-index: 1000;}#imageFlow .track {position: absolute;left: 1%;width: 98%;height: 16px;filter: alpha(opacity=30);opacity: 0.3;}#imageFlow .arrow-left {position: absolute;}#imageFlow .arrow-right {position: absolute;right: 0px;}#imageFlow .bar {position: absolute;height: 16px;left: 25px;}</style><script type="text/javascript">var imf = function () {var lf = 0;var instances = [];function getElementsByClass (object, tag, className) {var o = object.getElementsByTagName(tag);for ( var i = 0, n = o.length, ret = []; i < n; i++)if (o[i].className == className) ret.push(o[i]);if (ret.length == 1) ret = ret[0];return ret;}function addEvent (o, e, f) {if (window.addEventListener) o.addEventListener(e, f, false);else if (window.attachEvent) r = o.attachEvent('on' + e, f);}function createReflexion (cont, img) {var flx = false;if (document.createElement("canvas").getContext) {flx = document.createElement("canvas");flx.width = img.width;flx.height = img.height;var context = flx.getContext("2d");context.translate(0, img.height);context.scale(1, -1);context.drawImage(img, 0, 0, img.width, img.height);context.globalCompositeOperation = "destination-out";var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);gradient.addColorStop(1, "rgba(255, 255, 255, 0)");gradient.addColorStop(0, "rgba(255, 255, 255, 1)");context.fillStyle = gradient;context.fillRect(0, 0, img.width, img.height * 2);} else {/* ---- DXImageTransform ---- */flx = document.createElement('img');flx.src = img.src;flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +(img.height * .25) + ')';}/* ---- insert Reflexion ---- */flx.style.position = 'absolute';flx.style.left = '-1000px';cont.appendChild(flx);return flx;}/* //////////// ==== ImageFlow Constructor ==== //////////// */function ImageFlow(oCont, size, zoom, border) {this.diapos = [];this.scr = false;this.size = size;this.zoom = zoom;this.bdw = border;this.oCont = oCont;this.oc = document.getElementById(oCont);this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');this.text = getElementsByClass(this.oc, 'div', 'text');this.title = getElementsByClass(this.text, 'div', 'title');this.legend = getElementsByClass(this.text, 'div', 'legend');this.bar = getElementsByClass(this.oc, 'img', 'bar');this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');this.bw = this.bar.width;this.alw = this.arL.width - 5;this.arw = this.arR.width - 5;this.bar.parent = this.oc.parent = this;this.arL.parent = this.arR.parent = this;this.view = this.back = -1;this.resize();this.oc.onselectstart = function () { return false; }/* ---- create images ---- */var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');this.NF = img.length;for (var i = 0, o; o = img[i]; i++) {this.diapos[i] = new Diapo(this, i,o.rel,o.title || '- ' + i + ' -',o.innerHTML || o.rel,o.href || '',o.target || '_self');}/* ==== add mouse wheel events ==== */if (window.addEventListener)this.oc.addEventListener('DOMMouseScroll', function(e) {this.parent.scroll(-e.detail);}, false);else this.oc.onmousewheel = function () {this.parent.scroll(event.wheelDelta);}/* ==== scrollbar drag N drop ==== */this.bar.onmousedown = function (e) {if (!e) e = window.event;var scl = e.screenX - this.offsetLeft;var self = this.parent;/* ---- move bar ---- */this.parent.oc.onmousemove = function (e) {if (!e) e = window.event;self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);if (self.view != self.back) self.calc();return false;}/* ---- release scrollbar ---- */this.parent.oc.onmouseup = function (e) {self.oc.onmousemove = null;return false;}return false;}/* ==== right arrow ==== */this.arR.onclick = this.arR.ondblclick = function () {if (this.parent.view < this.parent.NF - 1)this.parent.calc(1);}/* ==== Left arrow ==== */this.arL.onclick = this.arL.ondblclick = function () {if (this.parent.view > 0)this.parent.calc(-1);}}/* //////////// ==== ImageFlow prototype ==== //////////// */ImageFlow.prototype = {/* ==== targets ==== */calc : function (inc) {if (inc) this.view += inc;var tw = 0;var lw = 0;var o = this.diapos[this.view];if (o && o.loaded) {/* ---- reset ---- */var ob = this.diapos[this.back];if (ob && ob != o) {ob.img.className = 'diapo';ob.z1 = 1;}/* ---- update legend ---- */this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);this.legend.replaceChild(document.createTextNode(o.text),this.legend.firstChild);/* ---- update hyperlink ---- */if (o.url) {o.img.className = 'diapo link';window.status = 'hyperlink: ' + o.url;} else {o.img.className = 'diapo';window.status = '';}/* ---- calculate target sizes & positions ---- */o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);var x = x0 + o.w1 + this.bdw;for (var i = this.view + 1, o; o = this.diapos[i]; i++) {if (o.loaded) {o.x1 = x;o.w1 = (this.ht / o.r) * this.size;x += o.w1 + this.bdw;tw += o.w1 + this.bdw;}}x = x0 - this.bdw;for (var i = this.view - 1, o; o = this.diapos[i]; i--) {if (o.loaded) {o.w1 = (this.ht / o.r) * this.size;o.x1 = x - o.w1;x -= o.w1 + this.bdw;tw += o.w1 + this.bdw;lw += o.w1 + this.bdw;}}/* ---- move scrollbar ---- */if (!this.scr && tw) {var r = (this.ws - this.alw - this.arw - this.bw) / tw;this.bar.style.left = Math.round(this.alw + lw * r) + 'px';}/* ---- save preview view ---- */this.back = this.view;}},/* ==== mousewheel scrolling ==== */scroll : function (sc) {if (sc < 0) {if (this.view < this.NF - 1) this.calc(1);} else {if (this.view > 0) this.calc(-1);}},/* ==== resize ==== */resize : function () {this.wh = this.oc.clientWidth;this.ht = this.oc.clientHeight;this.ws = this.scrollbar.offsetWidth;this.calc();this.run(true);},/* ==== move all images ==== */run : function (res) {var i = this.NF;while (i--) this.diapos[i].move(res);}}/* //////////// ==== Diapo Constructor ==== //////////// */Diapo = function (parent, N, src, title, text, url, target) {this.parent = parent;this.loaded = false;this.title = title;this.text = text;this.url = url;this.target = target;this.N = N;this.img = document.createElement('img');this.img.src = src;this.img.parent = this;this.img.className = 'diapo';this.x0 = this.parent.oc.clientWidth;this.x1 = this.x0;this.w0 = 0;this.w1 = 0;this.z1 = 1;this.img.parent = this;this.img.onclick = function() { this.parent.click(); }this.parent.oc.appendChild(this.img);/* ---- display external link ---- */if (url) {this.img.onmouseover = function () { this.className = 'diapo link'; }this.img.onmouseout = function () { this.className = 'diapo'; } }}/* //////////// ==== Diapo prototype ==== //////////// */Diapo.prototype = {/* ==== HTML rendering ==== */move : function (res) {if (this.loaded) {var sx = this.x1 - this.x0;var sw = this.w1 - this.w0;if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {/* ---- paint only when moving ---- */this.x0 += sx * .1;this.w0 += sw * .1;if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {/* ---- paint only visible images ---- */this.visible = true;var o = this.img.style;var h = this.w0 * this.r;/* ---- diapo ---- */o.left = Math.round(this.x0) + 'px';o.bottom = Math.floor(this.parent.ht * .25) + 'px';o.width = Math.round(this.w0) + 'px';o.height = Math.round(h) + 'px';/* ---- reflexion ---- */if (this.flx) {var o = this.flx.style;o.left = Math.round(this.x0) + 'px';o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';o.width = Math.round(this.w0) + 'px';o.height = Math.round(h) + 'px';}} else {/* ---- disable invisible images ---- */if (this.visible) {this.visible = false;this.img.style.width = '0px';if (this.flx) this.flx.style.width = '0px';}}}} else {/* ==== image onload ==== */if (plete && this.img.width) {/* ---- get size image ---- */this.iw = this.img.width;this.ih = this.img.height;this.r = this.ih / this.iw;this.loaded = true;/* ---- create reflexion ---- */this.flx = createReflexion(this.parent.oc, this.img);if (this.parent.view < 0) this.parent.view = this.N;this.parent.calc();}}},/* ==== diapo onclick ==== */click : function () {if (this.parent.view == this.N) {/* ---- click on zoomed diapo ---- */if (this.url) {/* ---- open hyperlink ---- */window.open(this.url, this.target);} else {/* ---- zoom in/out ---- */this.z1 = this.z1 == 1 ? this.parent.zoom : 1;this.parent.calc();}} else {/* ---- select diapo ---- */this.parent.view = this.N;this.parent.calc();}return false;}}/* //////////// ==== public methods ==== //////////// */return {/* ==== initialize script ==== */create : function (div, size, zoom, border) {/* ---- instanciate imageFlow ---- */var load = function () {var loaded = false;var i = instances.length;while (i--) if (instances[i].oCont == div) loaded = true;if (!loaded) {/* ---- push new imageFlow instance ---- */instances.push(new ImageFlow(div, size, zoom, border));/* ---- init script (once) ---- */if (!imf.initialized) {imf.initialized = true;/* ---- window resize event ---- */addEvent(window, 'resize', function () {var i = instances.length;while (i--) instances[i].resize();});/* ---- stop drag N drop ---- */addEvent(document.getElementById(div), 'mouseout', function (e) {if (!e) e = window.event;var tg = e.relatedTarget || e.toElement;if (tg && tg.tagName == 'HTML') {var i = instances.length;while (i--) instances[i].oc.onmousemove = null;}return false;});/* ---- set interval loop ---- */setInterval(function () {var i = instances.length;while (i--) instances[i].run();}, 16);}}}/* ---- window onload event ---- */addEvent(window, 'load', function () { load(); });}}}();/* ==== create imageFlow ==== */// div ID , size, zoom, borderimf.create("imageFlow", 0.15, 1.5, 10);</script></head><body><div id="imageFlow"><div class="top"></div><div class="bank"><a rel="images/08081201001.jpg" title="Myselves" href="/">My identity lies in not knowing who I am</a><a rel="images/08081201002.jpg" title="Discoveries" href="/">...are made by not following instructions</a><a rel="images/08081201003.jpg" title="Nothing" href="/">...can come between us</a><a rel="images/08081201004.jpg" title="New life" href="/">Here you come!</a><a rel="images/08081201005.jpg" title="Optimists" href="/">They don't know all the facts yet</a><a rel="images/08081201006.jpg" title="Empathy" href="/">Emotional intimacy</a><a rel="images/08081201007.jpg" title="Much work" href="/">...remains to be done before we can announce our total failure to make anyprogress</a><a rel="images/08081201008.jpg" title="System error" href="/">Errare Programma Est</a><a rel="images/08081201009.jpg" title="Nonexistance" href="/">There's no such thing</a><a rel="images/08081201010.jpg" title="Inside" href="/">I抦now trapped, without hope of escape or rescue</a><a rel="images/08081201011.jpg" title="E-Slaves" href="/">The World is flat</a><a rel="images/08081201012.jpg" title="l0v3" href="/">1 l0v3 j00 - f0r3v3r</a><a rel="images/08081201013.jpg" title="T minus zero" href="/">111 111 111 x 111 111 111 = 12345678987654321</a><a rel="images/08081201014.jpg" title="The End" href="/">...has not been written yet</a> </div><div class="text"><div class="title">Loading</div><div class="legend">Please wait...</div></div><div class="scrollbar"><img class="track" src="images/08081201sb.gif" alt=""><img class="arrow-left" src="images/08081201sl.gif" alt=""><img class="arrow-right" src="images/08081201sr.gif" alt=""><img class="bar" src="images/08081201sc.gif" alt=""> </div></div></body></html>超酷超绚精美图片展示效果代码(二)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超酷超绚精美图片展示效果代码(二) - 网页特效观止-网页特效代码||</title><meta http-equiv="imagetoolbar" content="no"><style type="text/css">html {overflow: hidden;}body {background: #222;width: 100%;height: 100%;cursor: crosshair;}.spanSlide {position: absolute;background: #000;font-size: 1px;overflow: hidden;}.imgSlide {position: absolute;left: 5%;top: 5%;width: 90%;height: 90%;overflow: hidden;}.txtSlide {position: absolute;top: 5%;left: 50px;width:100%;color:#FFF;font-family: arial, helvetica, verdana, sans-serif;font-weight: bold;font-size:96px;letter-spacing:12px;filter: alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}</style><script type="text/javascript">var ym=0;var ny=0;createElement = function(container, type, param){o=document.createElement(type);for(var i in param)o[i]=param[i];container.appendChild(o);return o;}mooz = {O:[],/////////mult:6,nbI:5,/////////rwh:0,imgsrc:0,W:0,H:0,Xoom:function(N){this.o = createElement(document.getElementById("screen"), "span", { 'className':'spanSlide'});img = createElement(this.o, "img", {'className':"imgSlide",'src':mooz.imgsrc[N%mooz.imgsrc.length].src});spa = createElement(this.o, "span", {'className':"imgSlide"});txt = createElement(spa, "span", {'className':"txtSlide",'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title});this.N = 10000+N;},mainloop:function(){with(this){for(i=0; i<mooz.nbI; i++) {O[i].N += (ym-ny)/8000;N = O[i].N%nbI;ti = Math.pow(mult,N);with(O[i].o.style){left = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";top = Math.round((H-ti)/(H+ti)*(H*.5))+"px";zIndex = Math.round(10000-ti*.1);width = Math.round(ti*rwh)+"px";height = Math.round(ti)+"px";}}}setTimeout("mooz.mainloop();", 16);},oigres:function(){with(this){W = parseInt(document.getElementById("screen").style.width);H = parseInt(document.getElementById("screen").style.height);imgsrc = document.getElementById("images").getElementsByTagName("img");rwh = imgsrc[0].width/imgsrc[0].height;for(var i=0;i<nbI;i++) O[i] = new Xoom(i);mainloop();}}}document.onmousemove = function(e){if(window.event) e=window.event;ym = (e.y || e.clientY);if(ym/2>ny)ny=ym/2;}window.onload = function(){ym = ny+50;mooz.oigres();</script></head><body><div style="position:absolute;left:50%;top:50%"><divstyle="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></di v><divstyle="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loadin g...</div><div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></di v></div><div id="images" style="visibility:hidden"><img title="infinite" src="images/08081201001.jpg"><img title="yellow" src="images/08081201004.jpg"><img title="earth" src="images/08081201005.jpg"><img title="dream" src="images/08081201010.jpg"><img title="flowers" src="images/08081201012.jpg"></div></body></html>超酷超绚精美图片展示效果代码(三)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>超酷超绚精美图片展示效果代码(三) - 网页特效观止-网页特效代码||</title><style type="text/css">html {overflow: hidden;}body {margin: 0px;padding: 0px;background: #000;position: absolute;width: 100%;height: 100%;cursor: crosshair;}#diapoContainer {position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #222;overflow: hidden;}.imgDC {position: absolute;cursor: pointer;border: #000 solid 2px;filter: alpha(opacity=90);opacity: 0.9;visibility: hidden;}.spaDC {position: absolute;filter: alpha(opacity=20);opacity: 0.2;background: #000;visibility: hidden;}.imgsrc {position: absolute;width: 120px;height: 67px;visibility: hidden;margin: 4%;}#bkgcaption {position: absolute;bottom: 0px;left: 0px;width: 100%;height: 6%;background:#1a1a1a;}#caption {position: absolute;font-family: arial, helvetica, verdana, sans-serif;white-space: nowrap;color: #fff;bottom: 0px;width: 100%;left: -10000px;text-align: center;}</style><script type="text/javascript">var xm;var ym;/* ==== onmousemove event ==== */document.onmousemove = function(e){if(window.event) e=window.event;xm = (e.x || e.clientX);ym = (e.y || e.clientY);}/* ==== window resize ==== */function resize() {if(diapo)diapo.resize();}onresize = resize;/* ==== opacity ==== */setOpacity = function(o, alpha){if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha; }/////////////////////////////////////////////////////////////////////////////////////////////* ===== encapsulate script ==== */diapo = {O : [],DC : 0,img : 0,txt : 0,N : 0,xm : 0,ym : 0,nx : 0,ny : 0,nw : 0,nh : 0,rs : 0,rsB : 0,zo : 0,tx_pos : 0,tx_var : 0,tx_target : 0,/////// script parameters ////////attraction : 2,acceleration : .9,dampening : .1,zoomOver : 2,zoomClick : 6,transparency : .8,font_size: 18,///////////////////////////////////* ==== diapo resize ==== */resize : function(){with(this){nx = DC.offsetLeft;ny = DC.offsetTop;nw = DC.offsetWidth;nh = DC.offsetHeight;txt.style.fontSize = Math.round(nh / font_size) + "px";if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();rsB = rs;}},/* ==== create diapo ==== */CDiapo : function(o){/* ==== init variables ==== */this.o = o;this.x_pos = this.y_pos = 0;this.x_origin = this.y_origin = 0;this.x_var = this.y_var = 0;this.x_target = this.y_target = 0;this.w_pos = this.h_pos = 0;this.w_origin = this.h_origin = 0;this.w_var = this.h_var = 0;this.w_target = this.h_target = 0;this.over = false;this.click = false;/* ==== create shadow ==== */this.spa = document.createElement("span");this.spa.className = "spaDC";diapo.DC.appendChild(this.spa);/* ==== create thumbnail image ==== */this.img = document.createElement("img");this.img.className = "imgDC";this.img.src = o.src;this.img.O = this;diapo.DC.appendChild(this.img);setOpacity(this.img, diapo.transparency);/* ==== mouse events ==== */this.img.onselectstart = new Function("return false;");this.img.ondrag = new Function("return false;");this.img.onmouseover = function(){diapo.tx_target=0;diapo.txt.innerHTML=this.O.o.alt;this.O.over=true;setOpacity(this,this.O.click?diapo.transparency:1);}this.img.onmouseout = function(){diapo.tx_target=-diapo.nw;this.O.over=false;setOpacity(this,diapo.transparency);}this.img.onclick = function() {if(!this.O.click){if(diapo.zo && diapo.zo != this) diapo.zo.onclick();this.O.click = true;this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;diapo.zo = this;setOpacity(this,diapo.transparency);} else {this.O.click = false;this.O.over = false;this.O.resize();diapo.zo = 0;}}/* ==== rearrange thumbnails based on "imgsrc" images position ==== */ this.resize = function (){with (this) {x_origin = o.offsetLeft;y_origin = o.offsetTop;w_origin = o.offsetWidth;h_origin = o.offsetHeight;}}/* ==== animation function ==== */this.position = function (){with (this) {/* ==== set target position ==== */w_target = w_origin;h_target = h_origin;if(over){/* ==== mouse over ==== */w_target = w_origin * diapo.zoomOver;h_target = h_origin * diapo.zoomOver;x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));} else {/* ==== mouse out ==== */x_target = x_origin;y_target = y_origin;}if(click){/* ==== clicked ==== */w_target = w_origin * diapo.zoomClick;h_target = h_origin * diapo.zoomClick;}/* ==== magic spring equations ==== */x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);diapo.rs += (Math.abs(x_var) + Math.abs(y_var));/* ==== html animation ==== */with(img.style){left = Math.round(x_pos) + "px";top = Math.round(y_pos) + "px";width = Math.round(Math.max(0, w_pos)) + "px";height = Math.round(Math.max(0, h_pos)) + "px";zIndex = Math.round(w_pos);}with(spa.style){left = Math.round(x_pos + w_pos * .1) + "px";top = Math.round(y_pos + h_pos * .1) + "px";width = Math.round(Math.max(0, w_pos * 1.1)) + "px";height = Math.round(Math.max(0, h_pos * 1.1)) + "px";zIndex = Math.round(w_pos);}}}},/* ==== main loop ==== */run : function(){diapo.xm = xm - diapo.nx;diapo.ym = ym - diapo.ny;/* ==== caption anim ==== */diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";/* ==== images anim ==== */for(var i in diapo.O) diapo.O[i].position();/* ==== loop ==== */setTimeout("diapo.run();", 16);},/* ==== load images ==== */images_load : function(){// ===== loop until all images are loaded =====var M = 0;for(var i=0; i<diapo.N; i++) {if(diapo.img[i].complete) {diapo.img[i].style.position = "relative";diapo.O[i].img.style.visibility = "visible";diapo.O[i].spa.style.visibility = "visible";M++;}resize();}if(M<diapo.N) setTimeout("diapo.images_load();", 128);},/* ==== init script ==== */init : function() {diapo.DC = document.getElementById("diapoContainer");diapo.img = diapo.DC.getElementsByTagName("img");diapo.txt = document.getElementById("caption");diapo.N = diapo.img.length;。

dreamweaver图片展示特效代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"> <html><head><title>6</title><style type="text/css">html {overflow: hidden;}body {position: absolute;margin: 0px;padding: 0px;background: #111;width: 100%;height: 100%;}#screen {position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #000;}#screen img {position: absolute;cursor: pointer;visibility: hidden;width: 0px;height: 0px;}#screen .tvover {border: solid #876;opacity: 1;filter: alpha(opacity=100);}#screen .tvout {border: solid #fff;opacity: 0.7;}#bankImages {display: none;}</style><script type="text/javascript">var Library = {};Library.ease = function () {this.target = 0;this.position = 0;this.move = function (target, speed){this.position += (target - this.position) * speed;}}var tv = {/* ==== variables ==== */O : [],screen : {},grid : {size : 4, // 4x4 gridborderSize : 6, // borders sizezoomed : false},angle : {x : new Library.ease(),y : new Library.ease()},camera : {x : new Library.ease(),y : new Library.ease(),zoom : new Library.ease(),focalLength : 750 // camera Focal Length},/* ==== init script ==== */init : function (){this.screen.obj = document.getElementById('screen');var img = document.getElementById('bankImages').getElementsByTagName('img');this.screen.obj.onselectstart = function () { return false; }this.screen.obj.ondrag = function () { return false; }/* ==== create images grid ==== */var ni = 0;var n = (tv.grid.size / 2) - .5;for (var y = -n; y <= n; y++){for (var x = -n; x <= n; x++){/* ==== create HTML image element ==== */var o = document.createElement('img');var i = img[(ni++) % img.length];o.className = 'tvout';o.src = i.src;tv.screen.obj.appendChild(o);/* ==== 3D coordinates ==== */o.point3D = {x : x,y : y,z : new Library.ease()};/* ==== push object ==== */o.point2D = {};o.ratioImage = 1;tv.O.push(o);/* ==== on mouse over event ==== */o.onmouseover = function (){if (!tv.grid.zoomed){if (tv.o){/* ==== mouse out ==== */tv.o.point3D.z.target = 0;tv.o.className = 'tvout';}/* ==== mouse over ==== */this.className = 'tvover';this.point3D.z.target = -.5;tv.o = this;}}/* ==== on click event ==== */o.onclick = function (){if (!tv.grid.zoomed){/* ==== zoom in ==== */tv.camera.x.target = this.point3D.x;tv.camera.y.target = this.point3D.y;tv.camera.zoom.target = tv.screen.w * 1.25;tv.grid.zoomed = this;} else {if (this == tv.grid.zoomed){/* ==== zoom out ==== */tv.camera.x.target = 0;tv.camera.y.target = 0;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);tv.grid.zoomed = false;}}}/* ==== 3D transform function ==== */o.calc = function (){/* ==== ease mouseover ==== */this.point3D.z.move(this.point3D.z.target, .5);/* ==== assign 3D coords ==== */var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;var z = this.point3D.z.position * tv.camera.zoom.position;/* ==== perform rotations ==== */var xy = tv.angle.cx * y - tv.angle.sx * z;var xz = tv.angle.sx * y + tv.angle.cx * z;var yz = tv.angle.cy * xz - tv.angle.sy * x;var yx = tv.angle.sy * xz + tv.angle.cy * x;/* ==== 2D transformation ==== */this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);this.point2D.x = yx * this.point2D.scale;this.point2D.y = xy * this.point2D.scale;this.point2D.w = Math.round(Math.max(0,this.point2D.scale * tv.camera.zoom.position * .8));/* ==== image size ratio ==== */if (this.ratioImage > 1)this.point2D.h = Math.round(this.point2D.w / this.ratioImage);else{this.point2D.h = this.point2D.w;this.point2D.w = Math.round(this.point2D.h * this.ratioImage);}}/* ==== rendering ==== */o.draw = function (){if (plete){/* ==== paranoid image load ==== */if (!this.loaded){if (!this.img){/* ==== create internal image ==== */this.img = new Image();this.img.src = this.src;}if (plete){/* ==== get width / height ratio ==== */this.style.visibility = 'visible';this.ratioImage = this.img.width / this.img.height;this.loaded = true;this.img = false;}}/* ==== HTML rendering ==== */this.style.left = Math.round(this.point2D.x * this.point2D.scale +tv.screen.w - this.point2D.w * .5) + 'px';this.style.top = Math.round(this.point2D.y * this.point2D.scale +tv.screen.h - this.point2D.h * .5) + 'px';this.style.width = this.point2D.w + 'px';this.style.height = this.point2D.h + 'px';this.style.borderWidth = Math.round(Math.max(this.point2D.w,this.point2D.h) * tv.grid.borderSize * .01) + 'px';this.style.zIndex = Math.floor(this.point2D.scale * 100);}}}}/* ==== start script ==== */tv.resize();mouse.y = tv.screen.y + tv.screen.h;mouse.x = tv.screen.x + tv.screen.w;tv.run();},/* ==== resize window ==== */resize : function (){var o = tv.screen.obj;tv.screen.w = o.offsetWidth / 2;tv.screen.h = o.offsetHeight / 2;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {tv.screen.x += o.offsetLeft;tv.screen.y += o.offsetTop;}},/* ==== main loop ==== */run : function (){/* ==== motion ease ==== */tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);tv.camera.zoom.move(tv.camera.zoom.target, .05);/* ==== angles sin and cos ==== */tv.angle.cx = Math.cos(tv.angle.x.position);tv.angle.sx = Math.sin(tv.angle.x.position);tv.angle.cy = Math.cos(tv.angle.y.position);tv.angle.sy = Math.sin(tv.angle.y.position);/* ==== loop through all images ==== */for (var i = 0, o; o = tv.O[i]; i++){o.calc();o.draw();}/* ==== loop ==== */setTimeout(tv.run, 32);}}/* ==== global mouse position ==== */ var mouse = {x : 0,y : 0}document.onmousemove = function(e) {if (window.event) e = window.event;mouse.x = e.clientX;mouse.y = e.clientY;return false;}</script></head><body><div id="bankImages"><img alt="" src="images/wi23.jpg"><img alt="" src="images/wt06.jpg"><img alt="" src="images/wt47.jpg"><img alt="" src="images/wt16.jpg"><img alt="" src="images/wt43.jpg"><img alt="" src="images/wt19.jpg"><img alt="" src="images/wt27.jpg"><img alt="" src="images/wt46.jpg"><img alt="" src="images/wt14.jpg"><img alt="" src="images/wt21.jpg"><img alt="" src="images/wt35.jpg"><img alt="" src="images/wt48.jpg"><img alt="" src="images/wt55.jpg"><img alt="" src="images/wt40.jpg"><img alt="" src="images/wt53.jpg"><img alt="" src="images/wt25.jpg"></div><script type="text/javascript">/* ==== start script ==== */onresize = tv.resize;tv.init();</script></body></html>效果图。

Dreamweaver怎样实现飘浮光球特效

Dreamweaver怎样实现飘浮光球特效Dreamweaver怎样实现飘浮光球特效大家都知道，Dreamweaver是一款专业的网页设计工具，提供了许多方便、实用的功能，使得以前许多网页效果的实现从繁琐的代码中解脱出来，只要轻点鼠标即可实现。

其中为网页图像增添特效就是其具有特色的功能之一，利用它可以为图像添加诸如阴影、运动、波浪、及淡入淡出等特效。

这种特效不会增加图像的大小，当然也不会影响其下载速度。

其具体的实现方法如下：1、在Dreamweaver编辑窗口中，点击菜单命令“Window/Css Styles”打开样式浮动面板，在浮动面板中点击右键菜单中的“New Style”选项或者点击右下角带“+”的按钮，打开新增样式对话框(如图1)，在“Name”栏中输入新增特效名称，并选择Type的第一个选项：“Make custom style”，然后点击“OK”按钮，并在出现的保存对话框中输入文件名保存样式文件。

[ 图1 填上特效名称 ]2、在随即出现的样式定义设置对话框中，选择Category列表框中的最后一项“Extensions”选项(如图2)，打开扩展窗口参数设置窗口，其中“Page Break”选项用于设置样式应用前后的位置，可以不予设置，而“Visual Effect”下的“Cursor”则用于自定义鼠标指针形状，“Filter”用于选择效果的类型，共有16个选项。

用户选择好效果类型以后，将其中有问号的地方改成自己希望的参数，点击“OK”即完成样式的定义。

[ 图2 选择设置参数 ]3、点击菜单“Insert/Image”打开图片，选择对话框插入希望应用特效的图像，然后在编辑窗口中选中该图像，并点击样式浮动面板中刚才创建的样式，按下“F12”键，在浏览器中即可看到特效显示的最终效果。

如图3即为Filter类型为“Wave”，参数为：“Add=1，Freq=6，LightStrength=20，Phase=8，Strength=15”的样式在图片上应用以后的效果对比。