-
现在有许多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>***小贴士:这个代码我没有试过,看别人用起来觉得挺漂亮的,但是一想到特效越多越拖网速便舍弃不用了。本来嘛,免费的东西你还能指望它给你搽鞋吗?