社区
ASP
帖子详情
求这个鼠标移动到图片上显示浮动层的图片——JS的效果
dwl123
2008-12-10 10:42:15
URL:http://www.aogowo.com/
请注意他的图片放大,并没有失真..
非常重要!
...全文
3425
4
打赏
收藏
求这个鼠标移动到图片上显示浮动层的图片——JS的效果
URL:http://www.aogowo.com/ 请注意他的图片放大,并没有失真.. 非常重要!
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
dwl123
2008-12-10
打赏
举报
回复
继续UP...
<SCRIPT language=JavaScript>
var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg="#ffffee";
var pltsPopfg="#111111";
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
document.onmouseover= plts;
document.onmousemove = moveToMouseLoc;
}
function plts()
{ var o=event.srcElement;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
var Msg=pltsPop.replace(/\n/g,"<br>");
Msg=Msg.replace(/\0x13/g,"<br>");
var re=/\{(.[^\{]*)\}/ig;
if(!re.test(Msg))pltsTitle="";
else{
re=/\{(.[^\{]*)\}(.*)/ig;
pltsTitle=Msg.replace(re,"$1")+" ";
re=/\{(.[^\{]*)\}/ig;
Msg=Msg.replace(re,"");
Msg=Msg.replace("<br>","");}
var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
var content =
'<table id=toolTipTalbe border=0><tr><td width="100%"><table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">'+
'<tr id=pltsPoptop><th height=12 valign=bottom class=header><p id=topleft align=left>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'</font></th></tr>'+
'<tr><td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">'+Msg+'</td></tr>'+
'<tr id=pltsPopbot style="display:none"><th height=12 valign=bottom class=header><p id=botleft align=left>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'</font></th></tr>'+
'</table></td></tr></table>';
pltsTipLayer.innerHTML=content;
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
moveToMouseLoc();
return true;
}
else
{
pltsTipLayer.innerHTML='';
pltsTipLayer.style.display='none';
return true;
}
}
function moveToMouseLoc()
{
if(pltsTipLayer.innerHTML=='')return true;
var MouseX=event.x;
var MouseY=event.y;
//window.status=event.y;
var popHeight=pltsTipLayer.clientHeight;
var popWidth=pltsTipLayer.clientWidth;
if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY*1.5;
pltsPoptop.style.display="none";
pltsPopbot.style.display="";
}
else
{
popTopAdjust=0;
pltsPoptop.style.display="";
pltsPopbot.style.display="none";
}
if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2;
topleft.style.display="none";
botleft.style.display="none";
topright.style.display="";
botright.style.display="";
}
else
{
popLeftAdjust=0;
topleft.style.display="";
botleft.style.display="";
topright.style.display="none";
botright.style.display="none";
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
return true;
}
pltsinits();
</SCRIPT>
<a href="bgimg/cps800bg01.jpg" target="_blank"><img src="Image/20081029171792.jpg" alt="<img border='0' width='250' height='300' src='Image/20081029171792.jpg'>" width="140" height="180" border="0"></a>
我使用过这个..但是这个图片会失真,我用的图片和这个网站上的图片是一样的...
路人乙e
2008-12-10
打赏
举报
回复
<img onmouseover="showdiv(this)" onmouseout="hidediv()" />
var div0;
function showdiv(layer)
{
div0 = document.createElement("div");
div0.style.position = "absolute";
div0.style.left = layer.offsetLeft+60+"px";
div0.style.top = layer.offsetTop-20+"px";
div0.style.width = "200px";
div0.style.zIndex = "101";
div0.innerHTML = "<img src='"+layer.src+"' width=200 />";
document.body.appendChild(div0);
}
function hidediv()
{
document.body.removeChild(div0);
}
大客户
2008-12-10
打赏
举报
回复
这功能不错。帮你顶下。我也想学学。
另外告诉你,图片不失真,和你的放大比例及图片质量相关联。
dwl123
2008-12-10
打赏
举报
回复
自己UP下.........
javascript经典
效果
示例
69:___
鼠标
放到
图片
上会滑出提示文字 70:___
鼠标
滑过,缩略图放大
显示
(纯CSS) 71:___
鼠标
移上
图片
,变换出大
图片
72:___
鼠标
经过
图片
时
显示
半透明文字,边框变色 73:___
鼠标
经过
图片
由灰色变彩色
jquery插件库-jquery放大镜
效果
.zip
这个
浮动
层
通常是一个带有边框的`<div>`元素,大小和位置可以随着
鼠标
移动
而改变。 3. **
鼠标
跟踪**:使用jQuery的`mousemove`事件监听用户的
鼠标
移动
,根据
鼠标
的当前位置计算出要放大的
图片
区域。 4. **实时更新...
JS
P 可拖拽
浮动
窗口
**
浮动
物件技术详解——基于JavaScript的
JS
P可拖拽
浮动
窗口** 在Web开发中,为了提供更加丰富和交互式的用户体验,我们常常需要创建能够
浮动
并可自由拖拽的窗口。这种技术通常被称为
浮动
物件(Floating Widget)或...
imageLens为
图片
添加放大镜缩放
效果
今天我们将深入探讨一个jQuery插件——imageLens,这个工具能为网页中的
图片
添加放大镜缩放
效果
,极大地提升了用户查看细节的能力,尤其适用于产品展示或者电商网站。 首先,我们需要理解jQuery的基本概念。jQuery...
放大镜
效果
jQuery特效
例如,可能会创建一个
浮动
的半透明div作为放大镜的容器,当
鼠标
悬停在
图片
上时,这个div会
显示
图片
的放大区域。 HTML(超文本标记语言)文件index.html则构建了页面的基本结构。它包含了
图片
元素、用于放置放大镜...
ASP
28,409
社区成员
356,971
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章