1.图片半透明效果
实现图片默认显示是半透明的效果，鼠标移上去时透明度变为100%。
①用CSS＋JS实现
- 用CSS定义一类： #spotlight { FILTER: light }
- 并加入如下JS代码：
<SCRIPT language=JavaScript1.2>
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearInterval(highlighting)
}
</SCRIPT> - 调用效果语句：
<a href="http://www.thinkjam.org"><img border=0 name=Image1 onMouseOut=low(this) onMouseOver=high(this)
src="http://www.thinkjam.org/images/newjam/logo.jpg" style="FILTER: alpha(opacity=50)" width=18 height="18"></a>
②将代码和样式直接写入调用语句中
<img alt="半透明图片" src="http://www.thinkjam.org/images/newjam/logo.jpg" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">
这种方法比较简单。只是在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。
针对IE的设定：this.filters.alpha.opacity=50
针对Mozilla的设定：this.style.MozOpacity=0.5
2.图片背景产生阴影效果
可以直接截取阴影部分的条状渐变的图片作为背景，也可以为图片加上filter属性。样例代码如下：
<img src="http://www.thinkjam.org/images/newjam/logo.jpg style="filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=t , color=#ff0000 , direction=135 , strength=10 )">
3.鼠标移到图片上，图片在旁边放大显示
有点像某些相册的功能，移动鼠标到感兴趣的缩略图上，旁边的位置（可以自己设定）出现未缩放的原图。只需要一张原大小的图片即可，缩略图是属性中设置的大小（offsetX、offsetY是原图出现位置相对缩略图片左上角的位置）。代码如下：
<SCRIPT LANGUAGE="JavaScript">
<!--
var offsetX=-20;
var offsetY=-210;
function Fpop()
{
var oImg =event.srcElement;
var px =oImg.offsetLeft;
var py =oImg.offsetTop;
popDiv.innerHTML ="<img src=/""+oImg.src+"/" />"
popDiv.style.left =px+offsetX;
popDiv.style.top =py+offsetY;
popDiv.style.display="";
}
function Fhidden()
{
popDiv.style.display="none";
}
//-->
</SCRIPT>
<div id="popDiv" style="position:absolute;z-index:10;border:5px solid #f6f6f6;display:none; "></div>
<img src="jiading-pic/DSC00018.jpg" alt="2005.7.6" width="90" height="60" onmouseout="Fhidden()" onmouseover="Fpop()" class="alpha"/><img src="jiading-pic/DSC00019.jpg" alt="2005.8.9" width="90" height="60" onerror="this.onmouseover='';" onmouseout="Fhidden()" onmouseover="Fpop()" class="alpha"/>
4.文字/图片的无缝滚动
有点类似于marquee的功能，是用JS程序控制的。
<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>
<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
<a href="javascript:">一只青蛙</a>
<a href="javascript:">四条腿 </a>
<a href="javascript:">两只眼睛</a>
<a href="javascript:">一张嘴</a>
<a href="javascript:">噗通一声跳下水</a>
<a href="javascript:">大家一起来跳水</a>
<a href="javascript:">噗通噗通噗通跳呀跳下水</a>
</div>
行高height可以控制显示的宽度，即文字的行数。
<div id="div1" style="width:300px;height:15px;overflow:hidden">
5.图片逐渐缩小直到消失
可以用来做浮动的宣传窗口吧，最后查无所踪，让痛恨此类窗口的人，哭笑不得？呵呵
<script language="javascript">
function resize()
{
if(oImg.height>0)
{
oImg.height--;
}
}
setInterval("resize()",200);
</script>
<img witdh="300" id="oImg" src="http://www.thinkjam.org/images/newjam/logo.jpg"/>
6.鼠标放到链接上立即出现提示
HTML的ALT属性也可以实现提示功能，不过似乎有0.7秒的滞留时间。不怕麻烦的同学可以试试加JS代码来实现。
<Script>
var i=0
function tt(){
if(i==0){
aa.style.display="none";
}
else{
aa.style.left=window.event.x+2;
aa.style.top=window.event.y+2;
aa.style.display="";
}
}
</Script>
<a href="www.thinkjam.org" onmouseover="i=1;tt();" onmouseout="i=0;tt();">神啊！现身吧</a>
<div id="aa" style="position:absolute;background:#0000ff;display:none;width:100;filter:alpha(opacity=75)">我就是神，我出来了，谁在叫我？</div>
7.屏蔽转向链接的地址
有些不想为人所知的链接的“隐身法”。
<script>
function a(){window.status = "就不让你看见我"}
setInterval("a()",100)
</script>
希望这些小程序对大家有用。此外，对CSS感兴趣的，可以看看有人搜集的CSS技巧大放送，简明 HTML CSS 开发规范等，很有帮助。