加入收藏 | 设为首页 | 会员中心 |
语文芳草地

实验网络教学  分享语文资源  关注教育改革  陶冶人文情怀

本网站由西安工业大学附中 吴爱红老师 创办,欢迎加入,欢迎赐稿。

政府规定个人不得开办论坛,芳草地论坛关闭。

/*点击进入论坛    */本站中文域名“语文教学.中国”因政策原因暂停使用。

 
您当前的位置:首页 > 教学研究 > 教育技术

跟随鼠标转动的眼睛(蜡笔小新版)

时间:2008-10-11 01:37:03  来源:语文芳草地  作者:鱼无言

    看到 iGoogle 上有这么个小玩艺儿,觉得有趣,在网上搜了下源码,经过改造,就是现在这个效果喽。

    没什么大用处,可以拿去装饰自己的博客或网站,增添些趣味,喜欢的朋友可以看看下面的改造方法。

    当然也可以直接把这个拿去用。直接取用请记得下载小新的图片(脸是一张、眼睛是一张),上传到你自己的博客空间,并记得修改源码中图片的引用地址。

    如果你连这个也懒得弄,直接将下面的代码贴到你博客好啦!贴博客请在“HTML编辑方式”下贴哦,贴网站请将代码放在 <body> 和 </body> 两个标签之间。

代码:

 <script>

// Defaults
var jseyesimg="http://www.ywfcd.com/skin/default/images/eye1.png";
var jseyeimg="http://www.ywfcd.com/skin/default/images/eye0.png";
var jseyeslink="http://www.ywfcd.com";

// Internal
var jseyeso=null, jseye1=null, jseye2=null;

// Browser detection

// Global variables
var browserversion=0.0;
var browsertype=0; // 0: unknown; 1:MSIE; 2:NN

// Return true if MSIE or NN detected
function browserdetect() {
  var agt= navigator.userAgent.toLowerCase();
  var appVer= navigator.appVersion.toLowerCase();
  browserversion= parseFloat(appVer);
  var iePos= appVer.indexOf('msie');
  if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
  var nav6Pos = agt.indexOf('netscape6');
  if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
  browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
  return(browsertype>0);
}

browserdetect();

// General utils

// Find object by name or id
function jseyesobj(id) {
  var i, x;
  x= document[id];
  if (!x && document.all) x= document.all[id];
  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
  if (!x && document.getElementById) x= document.getElementById(id);
  return(x);
}

// Move eyes
function jseyesmove(x, y) {
  var ex, ey, dx, dy;
  if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
    ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
    dx=x-ex; dy=y-ey;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye1.style.left= r*dx+60; jseye1.style.top= r*dy+44; //36.5  44
    ex+=56; dx-=56;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye2.style.left= r*dx+100; jseye2.style.top= r*dy+44; //92.5  44
  }
}

// Main
function jseyes() {
  var img;
  var x, y, a=false;

  if (arguments.length==2) {
    x= arguments[0];
    y= arguments[1];
    a= true;
  }

  if (browsertype>0 && browserversion>=5) {
    img= "<div id='jseyeslayer' style='position:"+
           (a ? "absolute; left:"+x+"; top:"+y : "relative")+
           "; z-index:5; width:150; height:150 overflow:hidden'>"+
      "<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+
        "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
      "</div>"+
      "<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+
        "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
      "</div>"+
      "<img src='"+jseyesimg+"' width=310 height=140 onClick=\"location.href='"+jseyeslink+"'\">"+
  "</div>";
    document.write(img);
    jseyeso=jseyesobj('jseyeslayer');
    jseye1=jseyesobj('jseye1');
    jseye2=jseyesobj('jseye2');

    switch (browsertype) {
      case 1:
        document.onmousemove=jseyesmousemoveIE;
 break;
      case 2:
        document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove=jseyesmousemoveNS;
 break;
    }
  }
}

// Mouse move events
function jseyesmousemoveNS(e) {
  jseyesmove(e.pageX, e.pageY);
  //return(false);
}
function jseyesmousemoveIE() {
  jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);
  //return(false);
}

    jseyes();

</script>

修改方法:

    如果有兴趣,你也可以弄个自己的效果,步骤如下:

    1、准备图片,如我现在的这个就需要这两张图片:

小新的脸:    小新的眼睛:

    2、修改代码中这两行,引用你的图片:

 var jseyesimg="脸的图片的引用地址";
var jseyeimg="眼睛的图片的引用地址";

        注意别搞错了,程序找不到图片出来三红叉就不好玩了。

    3、给眼睛定位,修改代码中这两行中的数字:

     jseye1.style.left= r*dx+60; jseye1.style.top= r*dy+44; 
    jseye2.style.left= r*dx+100; jseye2.style.top= r*dy+44;

        其中:第一行是左眼的水平、垂直位置;第二行是右眼的水平、垂直位置;只需要修改 dx+、dy+ 后面的数字。

    好了,是不是很简单?其实技术本身不难,难的是创意,快动手试试吧!

来顶一下
近回首页
返回首页

评论人 评论内容 发表时间
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
    无相关信息
栏目更新
栏目热门