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


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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
如何分别全角和半角以避免乱码
2006/10/09 PHP
纯php生成随机密码
2015/10/30 PHP
PHP 8新特性简介
2020/08/18 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python实现弹窗祝福效果
2019/04/07 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
J2EE面试题大全
2016/08/06 面试题
入党自我鉴定范文
2013/10/04 职场文书
厂长助理岗位职责
2013/12/27 职场文书
党课主持词大全
2015/06/30 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书