鼠标移到图片上变大显示而不是放大镜效果
图片 显示 效果 不是 鼠标 放大镜 变大
2023-06-13 09:15:28 时间
ToopTip.js:
复制代码代码如下:
functiongetViewportHeight(){
if(window.innerHeight!=window.undefined)returnwindow.innerHeight;
if(document.compatMode=="CSS1Compat")returndocument.documentElement.clientHeight;
if(document.body)returndocument.body.clientHeight;
returnwindow.undefined;
}
functiongetViewportWidth(){
if(window.innerWidth!=window.undefined)returnwindow.innerWidth;
if(document.compatMode=="CSS1Compat")returndocument.documentElement.clientWidth;
if(document.body)returndocument.body.clientWidth;
returnwindow.undefined;
}
/**
*Getstherealscrolltop
*/
functiongetScrollTop(){
if(self.pageYOffset)//allexceptExplorer
{
returnself.pageYOffset;
}
elseif(document.documentElement&&document.documentElement.scrollTop)
//Explorer6Strict
{
returndocument.documentElement.scrollTop;
}
elseif(document.body)//allotherExplorers
{
returndocument.body.scrollTop;
}
}
functiongetScrollLeft(){
if(self.pageXOffset)//allexceptExplorer
{
returnself.pageXOffset;
}
elseif(document.documentElement&&document.documentElement.scrollLeft)
//Explorer6Strict
{
returndocument.documentElement.scrollLeft;
}
elseif(document.body)//allotherExplorers
{
returndocument.body.scrollLeft;
}
}
/*
[html]
渐变的弹出图片
使用方法：
将ToolTip.js包含在网页body的结束标签后
调用方法：
[code]
<ahref="pages.jpg"target="_blank"onMouseOver="toolTip("<imgsrc=http://zhouzh:90/templet/T_yestem_channel/pages_small.jpg>")"onMouseOut="toolTip()"><imgsrc="pages_small.jpg"border=0width=30height=20align="absmiddle"title="点击看大图"></a>
必须CSS样式
.trans_msg
{
filter:alpha(opacity=100,enabled=1)revealTrans(duration=.2,transition=1)blendtrans(duration=.2);
}
*/
//--初始化变量--
varrT=true;//允许图像过渡
varbT=true;//允许图像淡入淡出
vartw=150;//提示框宽度
varendaction=false;//结束动画
varns4=document.layers;
varns6=document.getElementById&&!document.all;
varie4=document.all;
offsetX=10;
offsetY=20;
vartoolTipSTYLE="";
functioninitToolTips()
{
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;
elseif(ns6)toolTipSTYLE=document.getElementById("toolTipLayer").style;
elseif(ie4)toolTipSTYLE=document.all.toolTipLayer.style;
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else
{
toolTipSTYLE.visibility="visible";
toolTipSTYLE.display="none";
}
document.onmousemove=moveToMouseLoc;
}
}
functiontoolTip(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";
varcontent=
"<tableid="msg1"name="msg1"border="0"cellspacing="0"cellpadding="1"bgcolor=""+fg+""class="trans_msg"><td>"+
"<tableborder="1"cellspacing="2"cellpadding="3"bgcolor=""+bg+
""><td><fontface="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"
//--图象过渡，淡入处理--
varcssopaction=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){}
}
functionmoveToMouseLoc(e)
{
varscrollTop=getScrollTop();
varscrollLeft=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";
returntrue;
}
initToolTips();
主页面:
引入index.css
<linkhref="css/index.css"rel="stylesheet"type="text/css"/>
<bodystyle="text-align:center">
<divclass="latestWeb">
<ul>
<liclass="">
<divstyle="width:128px;height:126px"><ahref="http://www.lanrentuku.com/"target="_blank"><imgsrc="images/2009511956153474660_small.jpg"onMouseOver="toolTip("<imgsrc=images/2009511956153474660.jpg>")"onMouseOut="toolTip()"></a></div>
</li>
<liclass="">
<divstyle="width:128px;height:126px"><ahref="http://www.lanrentuku.com/"target="_blank"><imgsrc="images/2009551813457815940_small.jpg"onMouseOver="toolTip("<imgsrc=images/2009551813457815940.jpg>")"onMouseOut="toolTip()"></a></div>
</li>
</ul>
</div>
引入ToopTip.js
<scriptlanguage="javascript"src="js/ToolTip.js"></script>
</body>
</html>
index.css:
/*首页*/
html{overflow:-moz-scrollbars-vertical;}/*AlwaysshowFirefoxscrollbar*/
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;}
aimg,a:hoverimg{border:0;}
.latestWeb{width:980px;margin:10pxauto0;}
.latestWebul{overflow:hidden;_height:1%;}
.latestWebli{float:left;border:1pxsolid#EBEAEA;width:150px;padding:10px;margin:14px14px00;}
.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:010px10px13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}
div.bodycontentul{margin-left:0px}
相关文章
- matplotlib无法显示图片_python运行程序后不显示图像
- Vue中显示img图片，显示不出来怎么办？vue显示图片
- jquery实现轮播图_用jquery实现图片轮播图代码
- 手机chrome禁止加载图片_com组件未加载或被禁止
- 表格图片加载不出来,破图,加载失败怎么办_ie网页表格显示不出来
- 图片url地址转换成file文件[通俗易懂]
- excel图片链接显示为图片_怎样将图片拼接成长图
- 推荐一个小项目：上传图片获取图片的经纬度以及拍摄时间
- WPJAM Basic 内置的图片处理函数
- django admin 给 字段 增加 HTML 样式（显示图片、设置字体颜色、超链接、按钮等）
- 微信小程序实现图片预加载（图片延迟加载）详解手机开发
- python通过PyGame绘制图像并保存为图片文件详解编程语言
- javascript 实现双指放大缩小旋转图片详解编程语言
- 红色Redis加速信息存储与处理（图片 redis）
- js实现图片显示局部，鼠标经过显示全部的效果
- 禁止在图片上使用右键
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
- js变换显示图片的实例
- jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
- Asp.net2.0无刷新图片上传显示缩略图具体实现
- php旋转图片90度的方法
- JS小功能(setInterval实现图片效果显示时间)实例代码
- php随机显示图片的简单示例
- java使用swt显示图片示例分享
- 上传图片前判断文件格式与大小验证文件是不是图片
- java实现gif动画效果(java显示动态图片)
- PHP图片自动裁切应付不同尺寸的显示
- .net生成缩略图及水印图片时出现GDI+中发生一般性错误解决方法
- 图片路径中含有中文在jsp下不能正常显示的原因及解决
- Java基于直方图应用的相似图片识别实例