求这个鼠标移动到图片上显示浮动层的图片——JS的效果

dwl123 2008-12-10 10:42:15
URL:http://www.aogowo.com/
请注意他的图片放大,并没有失真..
非常重要!
...全文
3426 4 打赏 收藏 转发到动态 举报
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下.........
73个效果的实例 01:___CSS+JS滚动图片功能代码 02:___CSS使用图片完美修饰的全兼容圆角框 03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动变为圆角 07:___CSS强制等比例缩小图片 08:___Javascript仿Flash图片轮翻 09:___JavaScript图片滚动(绝对酷) 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___JavaScript图片放大 14:___JavaScript图片特效 15:___JavaScript图片预加载代码,显示loading 16:___JavaScript改变图片透明度,鼠标放上渐渐显示 17:___JavaScript真正的鼠标放上动画加载大图的 18:___JS+CSS给图片加上鼠标滑过的方框 19:___JS卡通图片切换 20:___JS图片切换,带缩略图版 21:___JS图片滚动代码(无缝、平滑) 22:___Js图片连续左右滚动 23:___Js拖动特效,一串水晶球(很强大) 24:___JS放大镜,JavaScript图片放大代码 25:___JS点击小图预览大图(仿淘宝) 26:___亮丽的JS图片渐变导航 27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO,会盯着你看的眼睛 29:___像弹簧一样抖动的横向图片滚动 30:___前后轮翻的JS图片幻灯切换 31:___动态的Loading文字,逐个变大 32:___可控的纵向图片滚动 33:___右下角随机显示JS图片广告 34:___向上翻动的内容切换示例 35:___图片友情链接滚动,横向,带控制按钮 36:___图片围成环形滚动,有空间感 37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果(仿PHOTOSHOP) 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果,像光照一样 44:___在图片上单击获取图片原始大小 45:___大幅JS焦点图切换 46:___左右切换鼠标可控的无缝图片滚动代码 47:___平滑图片滚动 48:___很有意思的图片分裂复制效果 49:___按比例缩放图片,JavaScript代码 50:___最简的JavaScript鼠标经过切换图片 51:___有点炫的JavaScript立体图片展示 52:___根据鼠标放上切换内容制作的图片导航 53:___浮动图片广告 54:___清爽简洁的图片交替导航效果 55:___用CSS实现图片的双边框效果 56:___禁止在图片上使用右键 57:___竖向图片滚动 58:___纯CSS代码实现的图片列表滚动 59:___纯CSS实现鼠标移上图片添加阴影效果 60:___经典的图片切换 61:___网站首页js幻灯片代码 62:___美化过的匀速图片滚动 63:___腾讯QQ网站的Js图片切换 64:___自写Js+CSS轮显效果 65:___自动播放——Js幻灯片缓冲效果 66:___规定区域的JS拖动展示效果 67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示(纯CSS) 71:___鼠标移上图片,变换出大图片 72:___鼠标经过图片显示半透明文字,边框变色 73:___鼠标经过图片由灰色变彩色

28,409

社区成员

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧