[轉貼]CSS+JS實現網頁(圖片)特效

來源:互聯網
上載者:User

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 開發規範等,很有協助。 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.