鼠标移到图片上变大显示而不是放大镜效果


Posted in Javascript onJune 15, 2014

ToopTip.js:

function getViewportHeight() { 
if (window.innerHeight!=window.undefined) return window.innerHeight; 
if (document.compatMode=='CSS1Compat') 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; 
} 
} 
/* 
[html] 
渐变的弹出图片 
使用方法: 
将ToolTip.js包含在网页body的结束标签后 
调用方法: 
[code] 
<a href="pages.jpg" target='_blank' onMouseOver="toolTip('<img src=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>')" onMouseOut="toolTip()"><img src='pages_small.jpg' border=0 width=30 height=20 align="absmiddle" title="点击看大图"></a>

必须CSS样式
.trans_msg 
{ 
filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2); 
} 
*/ 
//--初始化变量-- 
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 toolTipSTYLE=""; 
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();

主页面:
引入index.css
<link href="css/index.css" rel="stylesheet" type="text/css" /> 
<body style="text-align:center"> <div class="latestWeb"> 
<ul> 
<li class=""> 
<div style="width:128px; height:126px"><a href="http://www.lanrentuku.com/" target="_blank"><img src='images/2009511956153474660_small.jpg' onMouseOver="toolTip('<img src=images/2009511956153474660.jpg>')" onMouseOut="toolTip()"></a></div> 
</li> 
<li class=""> 
<div style="width:128px; height:126px"><a href="http://www.lanrentuku.com/" target="_blank"><img src='images/2009551813457815940_small.jpg' onMouseOver="toolTip('<img src=images/2009551813457815940.jpg>')" onMouseOut="toolTip()"></a></div> 
</li> 
</ul> 
</div>

引入ToopTip.js
<script language="javascript" src="js/ToolTip.js"></script> 
</body> 
</html>

index.css:
/*首页*/ 
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/ 
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:980px; margin:10px auto 0;} 
.latestWeb ul{ overflow:hidden; _height:1%;} 
.latestWeb li{ float:left; border:1px solid #EBEAEA; width:150px; padding:10px; margin:14px 14px 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}
Javascript 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
JS ES6异步解决方案
Apr 29 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
js中的如何定位固定层的位置
Jun 15 #Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 #Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 #Javascript
jQuery实现的原图对比窗帘效果
Jun 15 #Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 #Javascript
js中通过父级进行查找定位元素
Jun 15 #Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
You might like
php中的观察者模式简单实例
2015/01/20 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
python正则表达式re模块详细介绍
2014/05/29 Python
Python生成随机MAC地址
2015/03/10 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
六一儿童节主持词
2014/03/21 职场文书
《长征》教学反思
2014/04/27 职场文书
无传销社区工作方案
2014/05/13 职场文书
高考励志标语
2014/06/05 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
售房协议书
2014/08/19 职场文书
干部作风建设心得体会
2014/10/22 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
走近毛泽东观后感
2015/06/04 职场文书