社区
ASP
帖子详情
求这个鼠标移动到图片上显示浮动层的图片——JS的效果
dwl123
2008-12-10 10:42:15
URL:http://www.aogowo.com/
请注意他的图片放大,并没有失真..
非常重要!
...全文
3426
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经典
效果
示例
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:___
鼠标
经过
图片
由灰色变彩色
jquery插件库-jquery放大镜
效果
.zip
jquery插件库-jquery放大镜
效果
.zip
JS
P 可拖拽
浮动
窗口
一款javascript开发的
浮动
窗口,支持最小化,支持
鼠标
拖拽,可以设定弹出事件,可以进行初始化位置以及大小。完全面向对象编程,简单易用的一款javascript的控件
imageLens为
图片
添加放大镜缩放
效果
jquery插件 为
图片
添加放大镜缩放
效果
放大镜
效果
jQuery特效
非常逼真的放大镜
效果
jQuery特效,简单好用
ASP
28,409
社区成员
356,971
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章