CSS+JS实现网页(图片)特效

开学了，工作是忙碌的，身心是劳累的，但生活是充实快乐的－－因为学习到了新知识并应用于实践，很有成就感。

近来的活儿主要是一部分网页内容的筛选、组织、编辑和页面制作，其中图片展示不在少数。就观察而言，HTML的CSS革命正如卷狂潮般袭来，令人不可抗拒，因此使用CSS控制页面样式势成必然，如何才能在W3C框架下做出漂亮、简洁的效果？如何才能让数量有限的插图和装饰图片印上个人独特的风格烙印？最好的方法就是用CSS配合JS来完成。

以下是本人搜集的一些CSS和JS实现的效果，着力推荐，以供分享哟～

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 开发规范等，很有帮助。