2007年07月16日

用了css中的滤镜功能,在IE,firefox,netscape下均能通过,实现一种不错的相册播放功能.

另外找了一篇不错的关于滤镜透明效果介绍的文章:

http://bitesizestandards.com/bites/easy-cross-browser-transparency

代码:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>image</title><script language="javascript">  //  // CSS Photo Shuffler v1.0 by  //   Carl Camera  //   http://iamacamera.org   //  // SetOpacity Function and inpiration from Photo Fade by  //   Richard Rutter  //   http://clagnut.com  //  // License: Creative Commons Attribution 2.5  License  //   http://creativecommons.org/licenses/by/2.5/  //  // Customize your photo shuffle settings  //   // * Surround the target <img /> with a <div>. specify id= in both  // * set background-repeat:no-repeat in CSS for the div  // * The first and final photo displayed is in the html <img> tag  // * The array contains paths to photos you want in the rotation.   //   If you want the first photo in the rotation, then it’s best to  //   put it as the final array image.  All photos must be same dimension  // * The rotations variable specifies how many times to repeat array.  //   images. zero is a valid rotation value.  var gblPhotoShufflerDivId = "photodiv";  var gblPhotoShufflerImgId = "photoimg";   var gblImg = new Array(    "http://bolgimg.b0.upaiyun.com/images/blog_donews_com/kurt198211/129754/o_ss01094.jpg",    "http://bolgimg.b0.upaiyun.com/images/blog_donews_com/kurt198211/129754/o_ss07049.jpg",    "http://bolgimg.b0.upaiyun.com/images/blog_donews_com/kurt198211/129754/o_ss05058.jpg"    );  var gblPauseSeconds = 2.25;  var gblFadeSeconds = .85;  var gblRotations = 1;  // End Customization section    var gblDeckSize = gblImg.length;  var gblOpacity = 100;  var gblOnDeck = 0;  var gblStartImg;  var gblImageRotations = gblDeckSize * gblRotations;  window.onload = photoShufflerLaunch;    function photoShufflerLaunch()  {   var theimg = document.getElementById(gblPhotoShufflerImgId);        gblStartImg = theimg.src; // save away to show as final image setTimeout("photoShufflerFade()",gblPauseSeconds*1000);  }  function photoShufflerFade()  {   var theimg = document.getElementById(gblPhotoShufflerImgId);    // determine delta based on number of fade seconds // the slower the fade the more increments needed        var fadeDelta = 100 / (30 * gblFadeSeconds); // fade top out to reveal bottom image if (gblOpacity < 2*fadeDelta )  {   gblOpacity = 100;   // stop the rotation if we’re done   if (gblImageRotations < 1) return photoShufflerShuffle();   photoShufflerShuffle();   // pause before next fade          setTimeout("photoShufflerFade()",gblPauseSeconds*1000); } else {   gblOpacity -= fadeDelta;   setOpacity(theimg,gblOpacity);   setTimeout("photoShufflerFade()",30);  // 1/30th of a second }  }  function photoShufflerShuffle()  { var thediv = document.getElementById(gblPhotoShufflerDivId); var theimg = document.getElementById(gblPhotoShufflerImgId);  // copy div background-image to img.src theimg.src = gblImg[gblOnDeck]; // set img opacity to 100 setOpacity(theimg,100);  // shuffle the deck gblOnDeck = ++gblOnDeck % gblDeckSize; // decrement rotation counter   if (–gblImageRotations < 1) {   // insert start/final image if we’re done   gblImg[gblOnDeck] = gblStartImg; }// slide next image underneath  }  function setOpacity(obj, opacity) {    opacity = (opacity == 100)?99.999:opacity;        // IE/Win    obj.style.filter = "alpha(opacity:"+opacity+")";        // Safari<1.2, Konqueror    obj.style.KHTMLOpacity = opacity/100;    // Older Mozilla and Firefox    obj.style.MozOpacity = opacity/100;    // Safari 1.2, newer Firefox and Mozilla, CSS3    obj.style.opacity = opacity/100;  }</script></head><body><div id="photodiv"><img id="photoimg" src="http://bolgimg.b0.upaiyun.com/images/blog_donews_com/kurt198211/129754/o_1118023l.jpg" _fcksavedurl="http://bolgimg.b0.upaiyun.com/images/blog_donews_com/kurt198211/129754/o_1118023l.jpg" /></div><input type="button" onClick="javascript:window.location.reload();" value="show again"/></body></html>

 

 ———————————–

标题:a  内容:&lt;script type="text/javascript"&gt;&lt;!–<BR>google_ad_client = "pub-9134421387884206";<BR>google_ad_width = 160;<BR>google_ad_height = 600;<BR>google_ad_format = "160×600_as";<BR>google_ad_type = "text";<BR>//2007-07-20: weiliu<BR>google_ad_channel = "1715085357";<BR>//–&gt;<BR>&lt;/script&gt;<BR>&lt;script type="text/javascript"<BR>&nbsp; src="<A href="http://pagead2.googlesyndication.com/pagead/show_ads.js">http://pagead2.googlesyndication.com/pagead/show_ads.js</A>"&gt;<BR>&lt;/script&gt;<BR>&lt;br /&gt;<BR>&lt;script type="text/javascript"&gt;&lt;!–<BR>google_ad_client = "pub-9134421387884206";<BR>google_ad_width = 120;<BR>google_ad_height = 60;<BR>google_ad_format = "120×60_as_rimg";<BR>google_cpa_choice = "CAAQme-ujAIaCPxvW_dt-QXiKLHM93MwAA";<BR>//–&gt;<BR>&lt;/script&gt;<BR>&lt;script type="text/javascript" src="<A href="http://pagead2.googlesyndication.com/pagead/show_ads.js">http://pagead2.googlesyndication.com/pagead/show_ads.js</A>"&gt;<BR>&lt;/script&gt;

<html>
<head>
<style>
fieldset{
border:1px solid #666666;
background-color:#cccccc;
}
legend{
font-size:bigger;
font-weight: bolder;
}
label{
display:block;
}
input{
color:#ccc;
}
input:focus{
background-color: #ffffcc;
color:#000000;S
}
em{
font-weight: bold;
color:#ff0000;
}
input.required_Field{
border-left:3px solid #ff0000;
}

</style>
</head>
<body>
<form action="sendit.php" method="post">
<fieldset>
<legend>Tell us a little about yourself</legend>
<label for="your_Name">Your name: <em>(required field)</em></label>
<input type="text" name="your_Name" id="your_Name" class="required_Field">
<label for="your_Email">Your email address: <em>(required field)</em></label>
<input type="text" name="your_Email" id="your_Email" class="required_Field" >
<label for="your_Postcode">Your postcode:</label>
<input type="text" name="your_Postcode" id="your_Postcode" class="required_
Field" >
</fieldset>
<fieldset>
<legend>Tell us a little about your preferences</legend>
<label for="favourite_Food">What’s your favourite food?</label>
<input type="text" name="favourite_Food" id="favourite_Food">
<label for="favourite_Movie">What’s your favourite movie?</label>
<input type="text" name="favourite_Movie" id="favourite_Movie">
<label for="favourite_Car">What’s your favourite car?</label>
<input type="text" name="favourite_Car" id="favourite_Car">
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>

由于:<form action="sendit.php" method="post">
点击submit按钮后会请求sendit.php页面!

要想成为真正的web designer,有三门技术是一定要精通的,那便是xhtml,css,DOM,不仅仅因为现在他们都有了统一的W3C制定的标准,而且各个浏览器都已经普遍支持,

最近在看的Jeremy Keith写的DOM scripting可以说是让我对网页的树层结构和交互技术有了新的认识

,对于一个成功的网站来说structure,presentation,behavior三者缺一不可,我学到了不仅DOM能用来组织,建立网页的node,还能控制css的表现,可以说用好DOM也是网站不可缺少的一项技能,

建议初学jsp的朋友学习mysql时一定参阅参阅它自带的帮助手册!