你好,游客 登录 注册 搜索

Dreamweaver网页动态特效

来源:net 作者:轶名 日期:2009-11-06

Dreamweaver网页动态特效

水泡鼠标特效
把如下代码加入到<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
Image0 = new Image();
Image0.src = "http://pugongyingw.51.net/java/image/sui.gif";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
   }
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
//  End -->
</script>

背景下雨特效

把如下代码加入到<body>区域中
<script language="JavaScript">
<!--
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) { 
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"#999999\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"#999999\">");
document.write(",</font></layer>");
   }
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"#999999\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"#999999\">");
document.write(",</font></div>");
      }
   }
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}

-->
</script>

蝴蝶飞舞

<script language="JavaScript1.2">
<!-- Begin
var Ymax=8;
var Xmax=8;
var Tmax=10000;
var floatimages=new Array();
floatimages[0]='http://flower26.anyp.cn/PageLayout/UserDataA/Data47/USID200403032117111204/Articles/Images/040303112405218.gif';
floatimages[1]='http://flower26.anyp.cn/PageLayout/UserDataA/Data47/USID200403032117111204/Articles/Images/040303112405218.gif';
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
t+='<img src="'+floatimages+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}
function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}
function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}
function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}
function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}
function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}
function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}
function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}
function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}
function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}
function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs=getid('pic'+i);
if(NS4){
IDs.W=IDs.document.images["p"+i].width;
IDs.H=IDs.document.images["p"+i].height;
}
if(NS6 || IE4){
IDs.W=document.images["p"+i].width;
IDs.H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs.W)), Math.floor(Math.random()*(wind_h-IDs.H)));
if(NS4)IDs.visibility = "show";
if(IE4 || NS6)IDs.style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}
function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}
if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
// End -->
</script>

制作精美圆角表格两种方法
 
   做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。
  方法一:用图片制作圆角表格
  这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。
  ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。
  ②不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。张贴后,保存为WEB所用格式即可。
  ③重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。(如图2)
  ④打开网页制作软件,这里以Dreamweaver为例。插入一个一行三列的表格,设置其CellPad、CellSpace和Border属性值都为0。在第一列插入图片1.gif,第三列插入图片3.gif,并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色,设置宽度为整个表格的宽度减去两个图片的宽度,并打开源代码察看器,删除这列中的字符” ”(Dreamweaver会自动在每个单元格中插入此字符,若不删除会撑大表格)。依葫芦画瓢,做好下半部分的圆角。
  ⑤再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、CellSpace和Border属性值都为0,宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看器,删除这两列中的字符” ”。到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容。(如图3)
  方法二:利用VML技
  用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!
  ①修改<html>表识为<html xmlns:v>
  ②在<head>区域添加如下代码:
  <style>〈br>v:* {behavior: url(#default#VML);}〈br〉</style>
  ③在您要添加圆角表格的地方加入以下代码:<v:RoundRect style="position:relative;width:200;height:100px">
  <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/>
  <v:textbox style="font-size:12px">
  这里输入表格中的内容
  </v:textbox>
  </v:RoundRect>
  您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。
  这样,一个有投影的圆角表格就制作好了(如图4)。
  这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法

 

本文地址:http://www.bhxzjzx.com/show.aspx?id=245&cid=34,转载请注明出处。

0 | | colin |
相关新闻