[分享] 一些 java 簡單實用風格效果語法

Styles Released by Other phpbb Sites
推薦您喜歡的非官方認證風格吧!享受多樣化的 phpBB 。

版主: 版主管理群譯文組

主題已鎖定
頭像
kkt
竹貓忠實會員
竹貓忠實會員
文章: 625
註冊時間: 2005-06-15 01:37
來自: H.K.
聯繫:

[分享] 一些 java 簡單實用風格效果語法

文章 kkt »

以下這些都是藉著 javascript 所造成的效果

我衹在 overall_header.tpl 做一次示範, 其它的也是一樣.
====================================

連結下壓: 滑鼠指向連結時會有下壓效果

打開:
overall_header.tpl

找到: <head>與</head>之間

加入:

代碼: 選擇全部

<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
要在 Top 5 呈現效果

打開:
adv_top5_body

找到: <head>與</head>之間

加入:

代碼: 選擇全部

<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>



可修改的部份:position:relative;top:1px;left:1px;

上行的數值可自己更改,玩玩看吧.


====================================

閃動連結: 當滑鼠移至有連結的圖片便會有閃動的效果!!

複製以下程式碼至<head>與</head>之間

代碼: 選擇全部

<script language="JavaScript">
<!-- 
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;

function dynOpacity(opObject,stop)
{
if (stop) 
{
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>110) direction=-4;
if (opIndex<0) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared)
{
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
//alert(window.tm);

}

function handleevent()
{

if (event.type=="mouseover")
if(event.srcElement.tagName=="IMG") 
if (event.srcElement.parentElement.tagName=="A") 
{
dynOpacity(event.srcElement,false);
}
if (event.type=="mouseout")
if(event.srcElement.tagName=="IMG") 
{
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true); 
}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;
// --> 
</script>

====================================

連結霧化效果: 當滑鼠移至圖檔連結處,就會有霧化的效果哦!!

複製以下程式碼至<body>與</body>之間

代碼: 選擇全部

<script>
<!--
function blu(a,b){
a.filters.blur.strength=b}
-->
</script>
<a href="#">
<img src="圖檔位置" style="filter:blur(strength=0)" onMouseover="blu(this,10)" onMouseout="blu(this,0)"></a>

====================================

鑲入頁面: 就是在你的網頁中加入另一個網頁的意思!!

複製以下程式碼至網頁欲呈現效果的地方

代碼: 選擇全部

<IFRAME SRC="你想鑲入的頁面網址" width=300 height=200 frameborder="0"></IFRAME>
可更改語法中的 width 和 height 控制鑲入頁面的大小

====================================

彩色頁框: 往下拉頁面看看, 頁框會變色哦!!

複製以下程式碼至<body>與</body>之間

代碼: 選擇全部

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

colours=new Array('ff0000','ff9900','ffff00','339900','33ff00','6600ff','cc00ff')
function gs(){
var clrPos=Math.floor(Math.random()*colours.length)
 with (window.document.body.style){
 borderWidth=5; // 邊框寬度
 borderStyle='solid';
 borderColor=colours[clrPos];
 }
}
if (document.all)window.document.body.onscroll=gs;

// End -->
</SCRIPT>
=====================================


公告視窗:
請先儲存關閉視窗的小圖 ----> 圖檔

複製以下程式碼至<head>與</head>之間

代碼: 選擇全部

<script language="JavaScript1.2">                                      
var dragswitch=0                                      
var nsx                                      
                                      
function drag_dropns(name){                                      
temp=eval(name)                                      
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)                                      
temp.onmousedown=gons                                      
temp.onmousemove=dragns                                      
temp.onmouseup=stopns                                      
}                                      
                                      
function gons(e){                                      
temp.captureEvents(Event.MOUSEMOVE)                                      
nsx=e.x                                      
nsy=e.y                                      
}                                      
function dragns(e){                                      
if (dragswitch==1){                                      
temp.moveBy(e.x-nsx,e.y-nsy)                                      
return false                                      
}                                      
}                                      
                                      
function stopns(){                                      
temp.releaseEvents(Event.MOUSEMOVE)                                      
}                                      
                                      
//drag drop function for IE 4+////                                      
/////////////////////////////////                                      
                                      
var dragapproved=false                                      
                                      
function drag_dropie(){                                      
if (dragapproved==true){                                      
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex                                      
document.all.showimage.style.pixelTop=tempy+event.clientY-iey                                      
return false                                      
}                                      
}                                      
                                      
function initializedragie(){                                      
iex=event.clientX                                      
iey=event.clientY                                      
tempx=showimage.style.pixelLeft                                      
tempy=showimage.style.pixelTop                                      
dragapproved=true                                      
document.onmousemove=drag_dropie                                      
}                                      
                                      
if (document.all){                                      
document.onmouseup=new Function("dragapproved=false")                                      
}                                      
                                      
////drag drop functions end here//////                                      
                                      
function hidebox(){                                      
if (document.all)                                      
showimage.style.visibility="hidden"                                      
else if (document.layers)                                      
document.showimage.visibility="hide"                                      
}                                      
</script>
複製以下程式碼至<body>與</body>之間

代碼: 選擇全部

<div id="showimage" style="position: absolute; width: 250; left: 430; top: 26; height: 86">
<table border="0" width="150" bgcolor="#f3f7fb" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" align="center" valign="middle"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36">
<tr>
<td onMousedown="initializedragie()" style="cursor:hand" width="100%" align="left"><font size="2"><ilayer width="100%"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"><font color="#8e8e8e">公告視窗說明</font></layer></ilayer></font></td> 
<td style="cursor:hand"><a href="#" onClick="hidebox();return false">
<img src="close_d.gif" alt="關閉" width="11" height="11" border=0></font></a></td> 
</tr> 
<tr> 
<td width="100%" bgcolor="#ffffff" style="padding:4px" colspan="2" align="left"> 
<font face=Verdana color=adb6d6 size=2>內容</font>
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table>
</div>
=======================================

浮動視窗: 一個浮動的公告視窗, 你可調整大小及內容.

複製以下程式碼至<body>與</body>之間

代碼: 選擇全部

<script language="JavaScript"> 
self.onError=null; 
currentX = currentY = 0; 
whichIt = null; 
lastScrollX = 0; lastScrollY = 0; 
NS = (document.layers) ? 1 : 0; 
IE = (document.all) ? 1: 0; 
<!-- STALKER CODE --> 
function heartBeat() { 
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } 
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 
if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); if(IE) document.all.secrp.style.pixelTop += percent; 
if(NS) document.secrp.top += percent; lastScrollY = lastScrollY + percent; 
} 
if(diffX != lastScrollX) { 
percent = .1 * (diffX - lastScrollX); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.secrp.style.pixelLeft += percent; 
if(NS) document.secrp.left += percent; 
lastScrollX = lastScrollX + percent; 
} 
} 
function checkFocus(x,y) { 
stalkerx = document.secrp.pageX; 
stalkery = document.secrp.pageY; 
stalkerwidth = document.secrp.clip.width; 
stalkerheight = document.secrp.clip.height; 
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; 
else return false; 
} function grabIt(e) { 
if(IE) { 
whichIt = event.srcElement; 
while (whichIt.id.indexOf("secrp") == -1) { 
whichIt = whichIt.parentElement; 
if (whichIt == null) { return true; } 
} 
whichIt.style.pixelLeft = whichIt.offsetLeft; 
whichIt.style.pixelTop = whichIt.offsetTop; 
currentX = (event.clientX + document.body.scrollLeft); 
currentY = (event.clientY + document.body.scrollTop); 
} else { 
window.captureEvents(Event.MOUSEMOVE); 
if(checkFocus (e.pageX,e.pageY)) { 
whichIt = document.secrp; 
StalkerTouchedX = e.pageX-document.secrp.pageX; 
StalkerTouchedY = e.pageY-document.secrp.pageY; 
} } 
return true; 
} 
function moveIt(e) { 
if (whichIt == null) { return false; } 
if(IE) { 
newX = (event.clientX + document.body.scrollLeft); 
newY = (event.clientY + document.body.scrollTop); 
distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; 
whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; 
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; 
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; 
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; 
event.returnValue = false; 
} else { 
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); 
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; 
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; 
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; 
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; 
return false; 
} 
return false; 
} 
function dropIt() { 
whichIt = null; 
if(NS) window.releaseEvents (Event.MOUSEMOVE); 
return true; 
} 
if(NS) { 
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); 
window.onmousedown = grabIt; 
window.onmousemove = moveIt; 
window.onmouseup = dropIt; 
} 
if(IE) { 
document.onmousedown = grabIt; 
document.onmousemove = moveIt; 
document.onmouseup = dropIt; 
} 
if(NS || IE) action = window.setInterval("heartBeat()",1); 
</script>
<div ID="secrp" style="position: absolute; visibility: visible; left: 502; top: 206; width: 175; height: 219">
<table style="background-color: #FFE6F2; border: 1 double #FF75BA" border="0" width="175" cellspacing="0" cellpadding="0" height="70">
<tr><td bgcolor="#FF75BA" align="center" height="20" width="169">
<p align="center"><font color="#FFFFFF">-----  浮  動  
視  窗 -----</font></td>
</tr><tr><td align="center" height="50" width="169">
<p align="center"><br>這個特效感覺很不錯吧
<p align="center">這裡填上你要輸入的文字內容<p align="center">框線色碼可自行修改。<p align="center">表格大小當然也可以改哦<p align="center">還可設連結:<a href="http://www.xxxxxxx.com" target="_blank">按我</a>看看<p align="center"><br></td></tr></table></div>
======================================

背景音樂 : 一進入網頁就會自動播放音樂哦!!

複製以下程式碼至<head>與</head>之間

代碼: 選擇全部

<bgsound src="歌曲位置" loop="1">
可自行設定播放次數:

loop=-1 連續播放
loop=1 播放1次
loop=2 播放2次 以此類推.

======================================

播放選擇: 可選擇開關的背景音樂 ---> 撥放音樂 | 停止音樂

複製以下程式碼至播放效果的頁面任何位置

代碼: 選擇全部

<embed src="歌曲路逕" hidden="true" name="asf">
<a href="javascript:document.asf.play()" target=_self><font color=ff80c0 size=2>撥放音樂</font></a>
<a href="javascript:document.asf.stop()" target=_self><font face=Verdana color=ff80c0 size=2>停止音樂</font></a>
語法中的 asf 為音樂檔類型,若你的音樂檔為 mid, wma, mp3 檔

請將語法中的 asf 全部改為 mid, wma, mp3


======================================

視訊播放:

複製以下程式碼至播放效果的頁面任何位置

代碼: 選擇全部

<EMBED src="視訊路逕"  width=300  height=260  AUTOPLAY=TRUE AUTOSTART=TRUE>
======================================

自動轉址:

可以設定進入網頁後直接執行轉換到 指定的網頁,就像轉址。

複製以下程式碼至<head>與</head>之間

代碼: 選擇全部

<SCRIPT>
if(top.usrID ==  null) {
location = "指定的網頁"
}
</SCRIPT>
======================================

來訪次數:

此語法可記錄你進入此網頁的次數!!

↓ 範例 ↓
*嗨!! 歡迎~您已經來第 2 次囉*

複製以下程式碼至網頁欲呈現效果的地方

代碼: 選擇全部

<script language="JavaScript">
function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) 
      break;
  }
  return null;
}
function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape (value) +
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}
function DeleteCookie(name) {
  var exp = new Date();
  FixCookieDate (exp); // Correct for Mac bug
  exp.setTime (exp.getTime() - 1);  // This cookie is history
  var cval = GetCookie (name);
  (cval != null)
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var expdate = new Date();
var num_visits;
expdate.setTime(expdate.getTime() + (5*24*60*60*1000));
if (!(num_visits = GetCookie("num_visits")))
  num_visits = 0;
num_visits++;
SetCookie("num_visits",num_visits,expdate);
document.write("<font size=2 face=Verdana color=#ff80c0>*嗨!歡迎~您已經來第 "+num_visits+" 次囉*</font><br>");
</script>
======================================



大家分享一下吧!!



.
舊站台經已結朿了, 學生們可到遊戲站玩玩 Flash Game (不必註冊) 免費 Flash Game
在此學到很多架站知識, 永遠多謝:
心靈捕手老師, ~倉木麻衣~, 依夢兒 及 神川小羽各位大大相助
主題已鎖定

回到「非官方認證風格」