Home| Blog| Menu| Something| Log in

访问统计:
Copyright ©農家小院·炊煙過際,Designed by whitree.
 

農家小院·炊煙過際

۝ 羊毛出在羊身上· 發家致富奔小康 ۝
 
  • Blog代码教程_鼠标事件

    现在有许多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>

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

    Date: 2006-03-02 Category:blog教程
共7页 1 2 3 4 5 6 7 下一页 最后一页

自说自话

c.robin

喜·来·登

  • 进入后台 写新日志
  • 文章管理 评论管理
  • 更换模板 访问统计

日复一日

日记分类

  • blog教程{7}
  • 花生骚{22}
  • 动漫饭{31}
  • 文字狱{8}
  • 浮世绘{20}
  • 万花筒{74}
  • 食物链{23}

自得其乐

  • 当个苗条的饕客
  • sheraton
  • 日复一日夜上海
  • 情不自禁地新番了Or2|||
  • 贴图了~
  • 流火
  • 看图说话
  • LOVE * The House
  • Reborn
  • 包养记
全部日志>>

天声人语

  • 死:10月两大神作天降之物和空中秋千都被你跳过了...
  • 暴露:对,bababian还有段时间怎么刷都只能显示半张图片[...
  • 暴露:…………(为了跟你的小资食物抗衡,我决定下次拍烩面和胡辣...
  • 暴露:你用的photobucket?photobucket和b...
  • 暴露:我前几天也去吃金汉斯了……我只能说,吃配菜比吃烤肉多OT...
  • 虽然我无意冒犯你家鹦鹉不过:……我靠!
  • Mirai.凛:[cusFace:18][cusFace:18][cus...
  • 引雷中:温柔地打死你
  • Mirai.凛:两杯梅酒下肚后我就控制不住表情神经,一直想笑,天旋地转了...
  • 死:混蛋啊!!我老是没去吃到元味...

……哈啾!

  • ۞ 誤闖桃源鄉
  • ۞ 醉走八卦陣
  • ۞ 坐山觀虎斗
  • ۝ 死得其所
  • ۝ 完全版凛
  • ۝ 流江氓南
  • ۝ 壹玖捌玖
  • ۝ 富甲一方
  • ♥ loser(暗链)
  • ♥ HEVIA(暗链)
  • ♥ 天氣雨(暗链)

存档文件

  • 2005/01/25-2005/02/28
  • 2005/03/01-2005/04/30
  • 2005/05/01-2005/06/30
  • 2005/07/01-2005/08/31
  • 2005/09/01-2005/10/31
  • 2005/11/01-2005/12/31
  • 2006/01/01-2006/02/28
  • 2006/03/01-2006/04/30
  • 2006/05/01-2006/06/30
  • 2006/07/01-2006/08/31
  • 2006/09/01-2006/10/31
  • 2006/11/01-2006/12/31
  • 2007/01/01-2007/02/28
  • 2007/03/01-2007/04/30
  • 2007/05/01-2007/06/30
  • 2007/07/01-2007/08/31
  • 2007/09/01-2007/10/31
  • 2007/11/01-2007/12/31
  • 2008/01/01-2008/02/29
  • 2008/03/01-2008/04/30
  • 2008/05/01-2008/06/30
  • 2008/07/01-2008/08/31
  • 2008/09/01-2008/10/31
  • 2008/11/01-2008/12/31
  • 2009/01/01-2009/03/31
  • 2009/04/01-2009/09/30