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


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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP内核探索:变量概述
2014/01/30 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
基于php编程规范(详解)
2017/08/17 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
python optparse模块使用实例
2015/04/09 Python
python中异常报错处理方法汇总
2016/11/20 Python
git进行版本控制心得详谈
2017/12/10 Python
python感知机实现代码
2019/01/18 Python
详解Python传入参数的几种方法
2019/05/16 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
详解Django中异步任务之django-celery
2020/11/05 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
教师节学生演讲稿
2014/09/03 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
解决redis批量删除key值的问题
2022/03/23 Redis
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers