js 鼠标滑过显示大图代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<title>鼠标滑过显示大图</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

</head>
<body>

<div class="latestweb">
 <ul>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/20095121750198009074_small.jpg" onmouseo教程ver="tooltip('<img src=/effect/images/201010090045/20095121750198009074.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/2009512172933475478_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/2009512172933475478.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/200957188213477090_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/200957188213477090.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/2009511102511591969_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/2009511102511591969.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/2009511956153474660_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/2009511956153474660.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/20095121752382849770_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/20095121752382849770.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/200955181403758690_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/200955181403758690.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/2009551813457815940_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/2009551813457815940.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/200955181308903992_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/200955181308903992.jpg>')" onmouseout="tooltip()"></a></div>
  </li>

  <li class="">
   <div style="width:128px;height:126px;"><a href="#"><img src="/effect/images/201010090045/200955181403758690_small.jpg" onmouseover="tooltip('<img src=/effect/images/201010090045/200955181403758690.jpg>')" onmouseout="tooltip()"></a></div>
  </li>
 </ul>
</div>
<script language="网页特效">
function getviewportheight() {
 if (window.innerheight!=window.undefined) return window.innerheight;
 if (document.compatmode=='css教程1compat') return document.documentelement.clientheight;
 if (document.body) return document.body.clientheight;

 return window.undefined;
}
function getviewportwidth() {
 if (window.innerwidth!=window.undefined) return window.innerwidth;
 if (document.compatmode=='css1compat') return document.documentelement.clientwidth;
 if (document.body) return document.body.clientwidth;

 return window.undefined;
}
/**
 * gets the real scroll top
 */
function getscrolltop() {
 if (self.pageyoffset) // all except explorer
 {
  return self.pageyoffset;
 }
 else if (document.documentelement && document.documentelement.scrolltop)
  // explorer 6 strict
 {
  return document.documentelement.scrolltop;
 }
 else if (document.body) // all other explorers
 {
  return document.body.scrolltop;
 }
}
function getscrollleft() {
 if (self.pagexoffset) // all except explorer
 {
  return self.pagexoffset;
 }
 else if (document.documentelement && document.documentelement.scrollleft)
  // explorer 6 strict
 {
  return document.documentelement.scrollleft;
 }
 else if (document.body) // all other explorers
 {
  return document.body.scrollleft;
 }
}
//--初始化变量--
var rt=true;//允许图像过渡
var bt=true;//允许图像淡入淡出
var tw=150;//提示框宽度
var endaction=false;//结束动画
var ns4 = document.layers;
var ns6 = document.getelementbyid && !document.all;
var ie4 = document.all;
offsetx = 10;
offsety = 20;
var tooltips教程tyle="";
function inittooltips()
{
 tempdiv = document.createelement("div");
 tempdiv.id = "tooltiplayer";
 tempdiv.style.position = "absolute";
 tempdiv.style.display = "none";
 document.body.appendchild(tempdiv);
 if(ns4||ns6||ie4)
 {
  if(ns4) tooltipstyle = document.tooltiplayer;
  else if(ns6) tooltipstyle = document.getelementbyid("tooltiplayer").style;
  else if(ie4) tooltipstyle = document.all.tooltiplayer.style;
  if(ns4) document.captureevents(event.mousemove);
  else
  {
    tooltipstyle.visibility = "visible";
    tooltipstyle.display = "none";
  }
  document.onmousemove = movetomouseloc;
 }
}
function tooltip(msg, fg, bg)
{
 try {
   if(tooltip.arguments.length < 1) // hide
   {
  if(ns4)
  {
  tooltipstyle.visibility = "hidden";
  }
  else
  {
    //--图象过渡,淡出处理--
    if (!endaction) {tooltipstyle.display = "none";}
    if (rt) document.all("msg1").filters[1].apply();
    if (bt) document.all("msg1").filters[2].apply();
    document.all("msg1").filters[0].opacity=0;
    if (rt) document.all("msg1").filters[1].play();
    if (bt) document.all("msg1").filters[2].play();
    if (rt){
    if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){ 
    tooltipstyle.display = "none";}
    }
    if (bt){
    if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){ 
    tooltipstyle.display = "none";}
    }
    if (!rt && !bt) tooltipstyle.display = "none";
    //----------------------
  }
   }
   else // show
   {
  if(!fg) fg = "#777777";
  if(!bg) bg = "#eeeeee";
  var content =
  '<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" class="trans_msg"><td>' +
  '<table border="1" cellspacing="2" cellpadding="3" bgcolor="' + bg +
  '"><td><font face="arial" color="' + fg +
  '" size="-2">' + msg +
  '</font></td></table></td></table>';
  if(ns4)
  {
    tooltipstyle.document.write(content);
    tooltipstyle.document.close();
    tooltipstyle.visibility = "visible";
  }
  if(ns6)
  {
    document.getelementbyid("tooltiplayer").innerhtml = content;
    tooltipstyle.display='block'
  }
  if(ie4)
  {
    document.all("tooltiplayer").innerhtml=content;
    tooltipstyle.display='block'
    //--图象过渡,淡入处理--
    var cssopaction=document.all("msg1").filters[0].opacity
    document.all("msg1").filters[0].opacity=0;
    if (rt) document.all("msg1").filters[1].apply();
    if (bt) document.all("msg1").filters[2].apply();
    document.all("msg1").filters[0].opacity=cssopaction;
    if (rt) document.all("msg1").filters[1].play();
    if (bt) document.all("msg1").filters[2].play();
    //----------------------
  }
   }
 } catch(e) {}
}
function movetomouseloc(e)
{
  var scrolltop = getscrolltop();
  var scrollleft = getscrollleft();
  if(ns4||ns6)
  {
    x = e.pagex + scrollleft;
    y = e.pagey - scrolltop;
  }
  else
  {
    x = event.clientx + scrollleft;
    y = event.clienty;
  }
  if (x-scrollleft > getviewportwidth() / 2) {
   x = x - document.getelementbyid("tooltiplayer").offsetwidth - 2 * offsetx;
  }
  if ((y+document.getelementbyid("tooltiplayer").offsetheight+offsety)>getviewportheight()) {
 y = getviewportheight()-document.getelementbyid("tooltiplayer").offsetheight-offsety;
  }
  tooltipstyle.left = (x + offsetx)+'px';
  tooltipstyle.top = (y + offsety + scrolltop)+'px';
  return true;
}
inittooltips();

<style type="text/css">
*{padding:0;margin:0;}
html{overflow:-moz-scrollbars-vertical;}
body{font:12px/22px "宋体";word-break:break-all;text-align:left;background:#c0c0c0;color:#4e4e4e;}
ul,li{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover{color:#ff722d;text-decoration:none;}
img{border:0;}
a img,a:hover img{border:0;}
.latestweb{width:560px;margin:10px auto 0;}
.latestweb ul{overflow:hidden;_height:1%;}
.latestweb li{float:left;border:1px solid #ebeaea;width:150px;padding:17px 0 14px 22px;margin:14px 18px 0 0;}
.trans_msg{filter:alpha(opacity=100,enabled=1) revealtrans(duration=.2,transition=1) blendtrans(duration=.2);}
div.bodycontent{font-family:arial,helvetica,sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontent ul{margin-left:0px;}
</style>
<script language="javascript">
function tooltip(str) {
}
</script>
</script>
</body>
</html>

源码下载地址
http://down.111cn.net/down/code/js/2010/1010/21129.html

时间: 2024-11-03 17:33:25

js 鼠标滑过显示大图代码的相关文章

JS实现鼠标滑过显示边框的菜单效果_javascript技巧

本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS鼠标滑过显示边框菜单</title> </head> <body> <style> .menulines{ border:1px solid white; } .menulines a{ text-decoration:none; color:red; } </style> <

jquery实现鼠标滑过显示二级下拉菜单效果_jquery

本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

jquery实现鼠标滑过显示提示框的方法_jquery

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

javascript鼠标滑过显示二级菜单特效_javascript技巧

本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById

js鼠标滑过图片震动特效的方法

 这篇文章主要介绍了js鼠标滑过图片震动特效的方法,涉及onMouseOver事件及图片操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <ti

鼠标滑过事件-鼠标滑过显示隐藏层,做出来了可以,其他页面没作用????为什么????

问题描述 鼠标滑过显示隐藏层,做出来了可以,其他页面没作用????为什么???? 在下图手机APP上做了一个鼠标滑过就显示一个层(可操作得框),可是为什么网站的部分页面就是没效果(网站的个人中心,和购物付款时),求解???? 解决方案 手机app哪有鼠标,点击弹出 解决方案二: 把HTML代码贴出来嘛 解决方案三: 在网站的个人中心,和购物付款这两个页面时,与手机app相关的dom元素是不是发生了变化?

急求-鼠标滑过显示可操作隐藏层

问题描述 鼠标滑过显示可操作隐藏层 看图,第一个是我jap里写的代码,第二个是网站前台显示,现在我想做 当鼠标放在前台显示的 手机APP上,旁边可以显示一个方框 方框里面可以放两个超链接,鼠标离开手机APP,这个可操作得方框就没了,请问怎么写,,新手求教 ,,,求大神给详细的代码???? 解决方案 鼠标滑过显示文字提示OnToolHitTest(鼠标滑过,显示标题信息)[code]jQuery实现鼠标滑过标题显示其后内容

js鼠标滑过图片震动特效的方法_javascript技巧

本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage {  POSITION: re

JS实现可直接显示网页代码运行效果的HTML代码预览功能实例_javascript技巧

本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击"运行代码"后的效果,使用时,你只需将需要运行的HTML代码拷贝到文本框内,点击对应的功能按钮即可. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE>直接页面显示器</TITLE> <STYLE type=&q