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


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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
一起深入理解js中的事件对象
Feb 06 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
JavaScript模拟push
2016/03/06 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python内存管理分析
2015/04/08 Python
python基于socket实现网络广播的方法
2015/04/29 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
python 连续不等式语法糖实例
2020/04/15 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
2014道德模范事迹材料
2014/02/16 职场文书
数学系毕业生求职信
2014/05/29 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
检讨书范文
2019/04/16 职场文书
六年级情感作文之500字
2019/10/23 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android