`

鼠标感应大图

阅读更多

没什么特殊的效果,不过位置比较好。不会乱。

在需要的页面加<SCRIPT language=JavaScript
src="Mouse.js"></SCRIPT>

文件如下:

var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 12;
var pltsPopbg="#FFFFEE";
var pltsPopfg="#111111";
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
 pltsTipLayer.style.left=-1000;
 pltsTipLayer.style.display='';
 var Msg=pltsPop.replace(/\n/g,"<br>");
 Msg=Msg.replace(/\0x13/g,"<br>");
 var re=/\{(.[^\{]*)\}/ig;
 if(!re.test(Msg))pltsTitle="┥http://www.KinyBeads.com┝";
 else{
   re=/\{(.[^\{]*)\}(.*)/ig;
     pltsTitle=Msg.replace(re,"$1")+"&nbsp;";
   re=/\{(.[^\{]*)\}/ig;
   Msg=Msg.replace(re,"");
   Msg=Msg.replace("<br>","");}
   var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
        var content =
       '<table id=toolTipTalbe border=0 ><tr><td ><table cellspacing="1" cellpadding="0" style="font-size:12px;" width="428" height="343">'+
        '<tr><td  align="center" valign="top" background="img/prbig11.gif" style="padding-top:15px" >'+Msg+'</td></tr>'+
       '</table></td></tr></table>';
        pltsTipLayer.innerHTML=content;
        toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
        moveToMouseLoc();
        return true;
       }
    else
    {
     pltsTipLayer.innerHTML='';
       pltsTipLayer.style.display='none';
        return true;
    }
}

function moveToMouseLoc()
{
 if(pltsTipLayer.innerHTML=='')return true;
 var MouseX=event.x;
 var MouseY=event.y;
 //window.status=event.y;
 var popHeight=pltsTipLayer.clientHeight;
 var popWidth=pltsTipLayer.clientWidth;
 if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
 {
    popTopAdjust=-popHeight-pltsoffsetY*1.5;
 }
  else
 {
     popTopAdjust=0;
 }
 if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
 {
  popLeftAdjust=-popWidth-pltsoffsetX*2;
 }
 else
 {
  popLeftAdjust=0;
 }
 pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
 pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
   return true;
}
pltsinits();

 

感应地方很简单

<img src="image/skype.jpg" border="0" alt="<img src='image/skype.jpg'>"> 



Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1684991

分享到:
评论

相关推荐

    淘宝中的一个鼠标感应大图

    在IT行业中,网页交互设计是用户体验的关键因素之一,"淘宝中的一个鼠标感应大图"就是一个典型的实例,展示了如何通过简单的JavaScript或CSS3技术提升用户体验。这个功能允许用户在浏览商品时,只需将鼠标悬停在小图...

    AS制作鼠标感应图片转动

    ### AS3制作鼠标感应图片转动教程详解 在Adobe Flash中,使用ActionScript 3(简称AS3)可以实现丰富的交互式动画效果。本教程将详细解析如何利用AS3制作一个鼠标感应图片转动的实例,让图片在一个水平面上绕Y轴...

    鼠标感应demo

    【鼠标感应demo】是一个使用Visual Studio 2012开发的程序示例,它专注于实现鼠标事件处理,以便在用户移动鼠标时动态修改已绘制的图形。在这个demo中,我们主要探讨以下几个关键知识点: 1. **鼠标事件处理**:在...

    鼠标感应图片无缝左右滚动JS代码

    "鼠标感应图片无缝左右滚动JS代码"就是一种实现这种效果的技术,它允许用户通过鼠标移动来控制图片的左右滚动,为网站增添动态视觉效果。 无缝滚动通常应用于图片轮播、产品展示或者新闻滚动等场景,它通过...

    鼠标感应图片浏览器..

    标题中的“鼠标感应图片浏览器”指的是一个网页应用或者功能,它能够根据用户的鼠标移动、悬停或点击等交互行为来展示或操作图片。在网页设计中,这种效果常常用于图片预览、幻灯片展示或者交互式图像元素。实现这种...

    jquery实现鼠标感应左右水平滚动图片导航

    "jQuery实现鼠标感应左右水平滚动图片导航"是一个创新的交互设计,它允许用户通过鼠标位置来控制图片的滚动方向,为浏览带来更为直观和自然的体验。这个技术主要依赖于jQuery库,一个广泛使用的JavaScript库,它简化...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在网页设计中,提升用户体验是至关重要的,而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片,增强视觉效果,同时提供更直观的操作...

    ASP超级网店 v2.0

    鼠标感应大图显示功能,更具人性化 增加商品目录功能,方便浏览全站商品,尽收眼底 全面进行SEO优化处理! 更新Ewebedit版本,人性化的功能 在原有基础上,增加推荐商品栏目。 增加客服QQ浮动菜单功能,方便...

    jQuery-实现仿QQ空间鼠标感应图片滚动.rar

    本项目“jQuery-实现仿QQ空间鼠标感应图片滚动.rar”旨在复刻QQ空间中经典的图片浏览功能,即当鼠标悬停在图片上方时,图片会自动向上或向下滚动,展示更多的图像内容。这个功能既提高了用户体验,又节省了页面空间...

    比较实用的jquery鼠标感应代码

    在给定的“比较实用的jquery鼠标感应代码”压缩包中,包含了三种不同的jQuery特效,主要涉及到鼠标悬停事件和动态效果的实现。以下是这些特效的详细说明: 1. **Flash翻滚导航特效**: 这种特效通常用于网站的导航...

    JS+CSS3与SVG实现的3D跟随鼠标感应悬浮动画特效源码.zip

    该资源是一个基于JavaScript (JS) 和CSS3技术,结合SVG(可缩放矢量图形)实现的3D跟随鼠标感应的悬浮动画特效源码。这个特效通常用于网站设计,为用户提供交互式的视觉体验,增强网站的吸引力和用户体验。以下是...

    纯css设计鼠标感应四级导航菜单

    【纯CSS设计鼠标感应四级导航菜单】是一种网页设计技术,主要利用CSS(层叠样式表)来构建具有响应式交互的多级导航菜单。在网页设计中,导航菜单是至关重要的,它帮助用户轻松地浏览网站内容。这种四级导航菜单在...

    光电鼠标设计的方案和鼠标芯片的介绍

    它内部有一个发光二极管,通过该发光二极管发出的光线,照亮光电鼠标底部表面,然后将光电鼠标底部表面反射回的一部分光线,经过一组光学透镜,传输到一个光感应器件(微成像器)内成像。这样,当光电鼠标移动时,其...

    html5图片重力感应特效

    4. **鼠标拖放**:这个特效还允许用户通过鼠标拖动图片并“扔出去”。这需要用到HTML5的拖放API,它可以监听鼠标的按下、移动和释放事件,然后相应地改变图片的运动状态。 5. **源码分析**:压缩包中的“html5图片...

    jQuery仿QQ空间鼠标感应图片滚动预览代码.zip

    这个功能的主要目的是在用户将鼠标悬停在图片上时,通过鼠标滚动事件来展示图片的上下滚动预览,为个人网站的相册展示提供一种交互性强、用户体验良好的解决方案。以下是关于这个功能的详细知识点: 1. **jQuery库*...

    电子-一种用于平板电脑的动作感应鼠标

    标题中的“电子-一种用于平板电脑的动作感应鼠标”揭示了我们今天要探讨的主题:一种创新的人机交互设备,即在平板电脑上使用的动作感应鼠标。这种技术是电子工程与计算机科学相结合的产物,旨在提升平板电脑用户的...

    电子功用-多功能无线电力感应式鼠标软垫

    这种鼠标软垫不仅具备传统的软垫功能,还集成了无线电力感应技术,使得它能够为无线鼠标提供充电服务,极大地提升了用户的便利性。这种设计旨在解决无线鼠标在长时间使用后需要频繁更换电池的问题,通过无线充电技术...

    光电鼠标原理图解

    ### 光电鼠标原理详析 光电鼠标作为现代计算机输入设备的一种重要形式...此外,高DPI值也是光电鼠标区别于传统机械鼠标的一大优势。随着技术的进步和发展,未来光电鼠标还将带来更多的创新特性,进一步提升用户体验。

Global site tag (gtag.js) - Google Analytics