農家小院·炊煙過際

现在有许多bloger越来越不满足于网页上的图片和布局的标新立异，而是开始追求除了整体效果外的一些更小的细节，比如说，鼠标特效。

鼠标特效其实在上一次的blog代码教程_我要变漂亮里头就有提到过了，可惜还是有许多人觉得不过瘾，认为鼠标的特效应该更多一些，所以今天就在这里放出几个比较常见到的鼠标特效代码，你们自己挑着玩玩。

【随鼠标移动的图片】
<SCRIPT>
suspendcode="<DIV id=yuzi style=right:110px;POSITION:absolute;TOP:200px;>
<img border=0 src=http://xxx.gif></a></div>"
document.write(suspendcode);
lastScrollY=0;
function heartBeat(){
diffY=document.body.scrollTop;
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.all.yuzi.style.pixelTop+=percent;
lastScrollY=lastScrollY+percent;}
window.setInterval("heartBeat()",1);
</SCRIPT>

***小贴士：注意到红色字体的地方没有，请在这里添加你喜欢的小图片吧，请不要添加太大的图片，不然的话……不过你也可以试试啦(奸)

【鼠标hover的状态时,上下出现虚线框定】
border-bottom: 1px dashed; border-top: 1px dashed;

***小贴士：这段代码请添加到a:hover里头，比如下面的：
a:hover{border-bottom: 1px dashed;      //底部虚线为1px
            border-top: 1px dashed;           //顶部虚线为1px
            color: #F5015A;                     //十六进制颜色代码，可设置为其它
            cursor:haircross;                    //鼠标显示为+型}

【鼠标hover状态时的全虚线框定代码】
border-style: dashed;    //border状态为虚线
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
***小贴士：上面的代码同样添加到a:hover{这里}。
这个效果有点类似将整张图片用虚线框起来，挺漂亮的。可以设置一下color的十六进制颜色代码。

【鼠标hover时,使图片逐渐变亮代码】
<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>

这个效果也很不错，在“祭奠悲喜”的bloger上挖到的代码。你们尝试看看咯^__^

【在页面中新开页面的代码】
<A  href="http://****.com" target=_blank>加target=_blank这个就能在另外的也面中打开了

***小贴士：这个代码推荐给所有多个blogcn页面链接的bloger，因为blogcn的RP是众所周知的驴速，为了避免那种等待页面开启的痛苦，用这个代码吧，瞬间解决你们的烦恼——跟扯广告似的OTZ|||……

【点击图片时周围不出现虚线框】
onfocus=this.blur()

***小贴士：加在<A  href="http://****.com" onfocus=this.blur()>里面。
点击图片打开新链接后原来的图片上就不会出现烦人是虚线框了。

【鼠标使图片抖动的代码】
<style>
<!--

.mouseBeOffMe {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000;
border-left:   6px   solid #000000;
border-right:  10px  solid #000000;
}

.mouseBeOnMe {
border-top:    6px   solid #000000;
border-bottom: 14px  solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

.mouseBeDown {
border-top:    13px  solid #000000;
border-bottom: 7px   solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

.mouseBeUp {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

//-->
</style>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">
<tr>
<td bgcolor="#000000">
<img src    = "slideshow1_1.jpg"
title = "This is the Image One Label"
width = "90"
height= "90"
border= "0"
class= "mouseBeOffMe"
onmouseover= "this.className=mouseBeOnMe"
onmousedown= "this.className=mouseBeDown"
onmouseup= "this.className=mouseBeUp"
onmouseout= "this.className=mouseBeOffMe">

<img src= "slideshow1_2.jpg"
title= "This is the Image Two Label"
width= "90"
height= "90"
border= "0"
class= "mouseBeOffMe"
onmouseover= "this.className=mouseBeOnMe"
onmousedown= "this.className=mouseBeDown"
onmouseup= "this.className=mouseBeUp"
onmouseout= "this.className=mouseBeOffMe">

<img src= "slideshow1_3.jpg"
title= "This is the Image Three Label"
width= "90"
height= "90"
border= "0"
class= "mouseBeOffMe"
onmouseover= "this.className=mouseBeOnMe"
onmousedown= "this.className=mouseBeDown"
onmouseup= "this.className=mouseBeUp"
onmouseout= "this.className=mouseBeOffMe">
</td>
</tr>
</table>

***小贴士：这个代码我没有试过，看别人用起来觉得挺漂亮的，但是一想到特效越多越拖网速便舍弃不用了。本来嘛，免费的东西你还能指望它给你搽鞋吗？

最基本的透明flash嵌入代码：
<EMBED height=360 pluginspage=http://www.macromedia.com/go/getflashplayer src=http://****.swf type=application/x-shockwave-flash width=500 wmode="transparent" quality="high"></EMBED>
***小贴士：src的链接地址请找以“.swf”为后缀的文件进行链接，否则无效。
                  height为flash的高度（即y坐标轴），width为flash的宽度（即x坐标轴）。
                  wmode="transparent"是控制Flash是否透明显示的,如果不想让它显示为透明的,直接把wmode="transparent"去掉即可。
                  quality是控制flash的显示效果，一般都会选择“high”，高画质嘛~~~
"pluginspage=http://www.macromedia.com/go/getflashplayer "和"type=application/x-shockwave-flash"其实可以删除，如果你希望代码更简洁的话。

绝对坐标的透明Flash代码：
绝对坐标意味着不管你的窗口拉多大，那个Flash也不会改变其存在位置。

<EMBED style="LEFT: 250px; WIDTH: 550px; POSITION: absolute; TOP: 200px; HEIGHT: 1000px" align=right src=http://****.swf width=500 height=2000 type=application/octet-stream; quality="high" wmode="transparent">

发现了什么吗？这段代码里头比上面的一般嵌入代码多了关于flash的位置（left、width、top以及height等等）的设定。而这些值你们可以自己修改，大胆地尝试，并放到叶子里头查看效果，直到它出现在你觉得理想的位置为止。
***小贴士：left表示flash距离左边位置的大小；
                  width表示flash即将显示的宽度；
                  top表示flash距离页面顶部的位置；
                  hight则为你所希望的flash显示的高度；
                  align表示flash出现的相对位置，可以尝试着去将“right”设置为“left”或“center”等等。
还有必须强调的一点是，有些初学者常常会去修改到“src=http://****.swf”后面的“width”和“height”的值，那个……拜托你们不要动它！当然你也不妨尝试着动它看看好了(笑)。
其余代码的说明有些在上面已经给出，请回上头查看^__^b

相对坐标的透明Flash代码：
<table border="0" cellPadding="0" cellSpacing="0" width=600 height=382 align=center background=http://****.jpg>
<TD width=600 height=382>
<EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://****.swf width="100%" height="100%" type=application/x-shockwave-flash wmode="transparent" quality="high">
</EMBED>
</TD>
</td>
</table>
***小贴士：注意上面代码的table部分，这主要是使用表格作为容器，把Flash“装”到表格里，这样不管浏览者把浏览器拉多大，Flash永远和表格一起动。而且，表格可以设置背景图片（即background的值，图片格式的地址链接为“.jpg”或“.gif”等后缀），表格上面再放一个透明Flash与背景图片相配合。
也就是说，这个flash的处理办法是先画一个表格，再往这个表格里头放flash，就这么简单。
还是上面的那些废话，你们试试修改width、height和align的值看看吧。

在我爱文学群里头经常看到有些人在问关于如何设置可以发光的字体和有阴影的字体等等,那天挖到一些代码,不敢私藏,特此拿来与大家分享一下。如果有任何不明白的地方可以直接MSN我。

这里发布的代码均可选中，前提是，只有“blog代码教程”的内容才能选中，其余的文字你选了也没用。右键没法用怎么办，很简单，使用你的键盘吧，上头不是有: Ctrl+C和Ctrl+V 吗？

发光字体代码：
<table style="FILTER: glow(color=#6CABE7,direction=2)">
<font color=#ffffff size=2>你要改变的文字内容</font>
</table>

阴影字体代码：
<table style="FILTER: dropshadow(color=#cccccc, offx=2, offy=2, positive=2);">
<font color=#6CABE7 size=2>你要改变的字体内容</font>
</table>

浮雕字体代码：
<table style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1);">
<font color=#ffffff>你要改变的字体内容</font>
</table>

***小贴士：color是阴影的颜色，可以配合网页色调改变，positive是设置阴影的强度。offx和offy是设置的阴影和文字的距离;font color是原字体的颜色。

透明字体代码：
<DIV style="FONT-SIZE: 9pt; FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 199px; LINE-HEIGHT: 9pt; HEIGHT: 126px">你要改变的文字内容</DIV>

***小贴士：opacity=100  开始的透明度（alpha）
                  finishOpacity=0~100  结束时的透明度
                  style=1/2/3 不同的效果

另外强调一点，这里的font size和font color你不妨尝试着设定成其它的值，说不定会有意外的收获哦。