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


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中将字符串转换成json的三种方式
Jan 12 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
vue.js实现简单购物车功能
May 30 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
学校招生宣传广告词
2014/03/19 职场文书
股票投资建议书
2014/05/19 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
综治工作汇报材料
2014/10/27 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技