跪求:把鼠标放到图片上会显示大图是怎么实现的

扫一扫,访问微社区
只需一步,快速开始
后使用快捷导航没有帐号?
查看: 8078|回复: 11
求助,如何实现鼠标移过,图片移动并放大
锐币 元推广 分
在线时间 小时
如图,当鼠标移动到图片1上时,图片1移动至中间位置并放大,其余图片按次序移动,请教高手这该如何实现?
锐币 元推广 分
在线时间 小时
一起等高手···
锐币 元推广 分
在线时间 小时
本帖最后由 sun_zhj 于
22:57 编辑
提供一种思路。
比较粗糙的一个
(53.87 KB, 下载次数: 196)
22:57 上传
点击文件名下载附件
<p id="rate_210" onmouseover="showTip(this)" tip="&锐币 + 30 元
" class="mtn mbn">
锐币 元推广 分
在线时间 小时
我说看到这个问题怎么有点熟悉呢?原来是孙版的。孙版让我思路打开了···
锐币 元推广 分
在线时间 小时
这个有这功能吗?
锐币 元推广 分
在线时间 小时
鼠标移到某对象,使其有动作需要用VBA吧。特别如术语所说的展示更需要用VBA,不然工作量太大,还不容易做好。比如同一页面鼠标移到图片4是否也是如此?
锐币 元推广 分
在线时间 小时
使用动画触发,然后用缩放效果
锐币 元推广 分
在线时间 小时
坐等高手出没
锐币 元推广 分
在线时间 小时
即使使用vba,也没想到特别好的办法,因为ppt中只有控件才有事件,图形都没有控件,没办法触发执行程序,一个思路是添加command控件,将其picture属性设为特定想要显示的图片,再设置command控件的mouse-move事件,这样可以曲折实现。
锐币 元推广 分
在线时间 小时
用插入动作来实现
Powered by
&#30005;&#35805;&#21672;&#35810;
<span class="icoTl" title="客服电话&#8802简单问题求助请问怎么样在鼠标放到一个超链接上后,超链接的后面显示一个小图片
详细点给出代码实例
回答1: &HTML&
&script language= &JavaScript &&
var newtop=0
var newleft=0
if (navigator.appName ==
&Netscape &) {
layerStyleRef= &layer. &;
layerRef= &document.layers &;
styleSwitch= & &;
layerStyleRef= &layer.style. &;
layerRef= &document.all &;
styleSwitch= &.style &;
function doOnMouseOver() {
document.getElementById( &OuterDiv &).style.display =
layerName =
&#39;iit &#39;;
eval( &#39;var curElement= &#39;+layerRef+ &#39;[ & &#39;+layerName+ &#39; &] &#39;)
eval(layerRef+ &#39;[ & &#39;+layerName+ &#39; &] &#39;+styleSwitch+ &#39;.visibility= &hidden & &#39;)
eval( &#39;curElement &#39;+styleSwitch+ &#39;.visibility= &visible & &#39;)
eval( &#39;newleft=document.body.clientWidth-curElement &#39;+styleSwitch+ &#39;.pixelWidth &#39;)
eval( &#39;newtop=document.body.clientHeight-curElement &#39;+styleSwitch+ &#39;.pixelHeight &#39;)
eval( &#39;height=curElement &#39;+styleSwitch+ &#39;.height &#39;)
eval( &#39;width=curElement &#39;+styleSwitch+ &#39;.width &#39;)
width=parseInt(width)
height=parseInt(height)
if (event.clientX &
(document.body.clientWidth - 5 - width))
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
newleft=document.body.scrollLeft + event.clientX
eval( &#39;curElement &#39;+styleSwitch+ &#39;.pixelLeft=newleft &#39;)
if (event.clientY &
(document.body.clientHeight - 5 - height))
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
newtop=document.body.scrollTop + event.clientY
eval( &#39;curElement &#39;+styleSwitch+ &#39;.pixelTop=newtop &#39;)
function doOnMouseOut() {
document.getElementById( &OuterDiv &).style.display =
&script language= &javascript &&
if (navigator.appName ==
&Netscape &) {
document.write( &#39; &div ID=OuterDiv&
document.write( &#39; &img ID=iit src= & & STYLE= &position:TOP:0LEFT:0Z-INDEX:2;visibility: &&
document.write( &#39; &/div&
&a href= &aaa & onMouseOver= &doOnMouseOver() & onMouseOut= &doOnMouseOut() && aaa &/a&
&&&&&&&& &a href= &bbb & onMouseOver= &doOnMouseOver() & onMouseOut= &doOnMouseOut() && bbb &/a&
jinasnower后使用快捷导航没有帐号?
只需一步,快速开始
查看: 5974|回复: 9
求助 如何实现那种鼠标移到缩略图上在旁边出现大图的效果js
UID502666在线时间 小时积分65帖子离线17152 天注册时间
初级会员, 积分 65, 距离下一级还需 135 积分
就是那种右边一排缩略图 然后移到其中一个上 左边显示图的原图大小
UID496603在线时间 小时积分1664帖子离线17152 天注册时间
银牌会员, 积分 1664, 距离下一级还需 1336 积分
大姐 网上有这原码的 去找找呸~
UID479151在线时间 小时积分832帖子离线17152 天注册时间
高级会员, 积分 832, 距离下一级还需 168 积分
这个用css的话,在&img/&标签外加个&a/&
a:hover就可以了
js的话,onmouseover事件可以了
就说这么多,楼主自己试试先,光问别个怎么会进步呢
UID502666在线时间 小时积分65帖子离线17152 天注册时间
初级会员, 积分 65, 距离下一级还需 135 积分
我就是要js的代码
UID502645在线时间 小时积分17帖子离线17152 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
&div id='baidu' style=&position:display:none&&
&img id=&img& src=&/img/logo.gif& width=&251& height=&250& /& &/div&
&div id='google' style=&position:display:none&&
&img id=&img& src=&/intl/zh-CN/images/logo_cn.gif& width=&251& height=&250& /& &/div&
&a onmouseover=&replaceImg(1)& onmouseout=&hind(1)&&百度首页图片&/a& &br&
&a onmouseover=&replaceImg(2)& onmouseout=&hind(2)&&Google首页图片&/a&
function replaceImg(n){
var url = &&;
if(n == 1){
lyr = document.getElementById(&baidu&);
}else if(n == 2){
lyr = document.getElementById(&google&);
lyr.style.left = event.x;
lyr.style.top = event.y;
lyr.style.display=&&;
function hind(n){
if(n == 1){
lyr = document.getElementById(&baidu&);
}else if(n == 2){
lyr = document.getElementById(&google&);
lyr.style.display=&none&;
UID352426在线时间 小时积分6850帖子离线17152 天注册时间
通过绝对定位把缩略图图排列好,然后通过css的hover伪类属性来实现图片尺寸放大。具体如下:
鼠标移上去之后实现了图片放大,其中要注意的是IE6的hover属性,
IE6处理CSS伪类:hover存在一个Bug.就是一旦 a与 a:hover 的CSS属性是一样的,也就是说a:hover中没有任何样式的改变,hover状态就不会被触发。但是只要在a:hover增加某些特定的属性变化,本例中是“border:”,就可以触发这个事件了。这里的特定属性有:direction/text-align/text-indent/float/overflow/position,但是font属性无效。
好了,这样我们就可以实现兼容性很好的鼠标触发图片放大效果,而且是纯CSS实现。不过有同事说这样的效率未必好,建议用两组图片,只有用户触发了某一张小图时候再载入大图,这在缩略图很多的时候可以尝试,具体做法不再阐述。
也许有人说这里的缩略图排列一定要用绝对定位么?答案是不一定。一种方法是用传统的ul,li依靠浮动排列,然后去掉a的样式定义,直接在a:hover上加载。这样还可以避免了IE6的hover的Bug,但是在做demo的时候发现之后会出现:只要鼠标移动上去之后动一下,原来的缩略图就出现跳动。
UID352426在线时间 小时积分6850帖子离线17152 天注册时间
给个实例楼主收藏
&meta name=&GENERATOR& content=&Microsoft FrontPage 6.0&&
&meta name=&ProgId& content=&FrontPage.Editor.Document&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&title&新建网页 2&/title&
function TJPzoom(obj,highres) {
TJPzoomratio=TJPzoomheight/TJP
if(TJPzoomoffsetx & 1) {
TJPzoomoffset='dumb';
TJPzoomoffsetx=TJPzoomoffsetx/TJP
TJPzoomoffsety=TJPzoomoffsety/TJP
if(!obj.style.width) {
if(obj.width & 0) {
//educated guess
obj.style.width=obj.width+'px';
obj.style.height=obj.height+'px';
if(typeof(highres) != typeof('')) {highres=obj.src}
var TJPstage=document.createElement(&div&);
TJPstage.style.width=obj.style.
TJPstage.style.height=obj.style.
TJPstage.style.overflow='hidden';
TJPstage.style.position='absolute';
if(typeof(TJPstage.style.filter) != typeof(nosuchthing)) {
if(navigator.appVersion.indexOf('Mac') == -1) { //hi Mac IE
TJPstage.style.filter='alpha(opacity=0)';
TJPstage.style.backgroundColor='#ffffff';
//hi decent gentlemen
TJPstage.style.backgroundImage='transparent';
TJPstage.setAttribute('onmousemove','TJPhandlemouse(event,this);');
TJPstage.setAttribute('onmousedown','TJPhandlemouse(event,this);');
TJPstage.setAttribute('onmouseup','TJPhandlemouse(event,this);');
TJPstage.setAttribute('onmouseout','TJPhandlemouse(event,this);');
if(navigator.userAgent.indexOf('MSIE')&-1) {
TJPstage.onmousemove = function() {TJPhandlemouse(event,this);}
TJPstage.onmousedown = function() {TJPhandlemouse(event,this);}
TJPstage.onmouseup = function() {TJPhandlemouse(event,this);}
TJPstage.onmouseout = function() {TJPhandlemouse(event,this);}
obj.parentNode.insertBefore(TJPstage,obj);
TJPwin=document.createElement(&div&);
TJPwin.style.width='0px';
TJPwin.style.height='0px';
TJPwin.style.overflow='hidden';
TJPwin.style.position='absolute';
TJPwin.style.display='none';
tw1='&div style=&position:overflow:margin:';
TJPwin.innerHTML=
tw1+'0 0 0 0; background-color:'+TJPbordercolor+'; width:'+TJPzoomwidth+'height:'+TJPzoomheight+'px&&&/div&' +
tw1+TJPborderthick+'px 0 0 '+TJPborderthick+' width:'+(TJPzoomwidth-TJPborderthick*2)+'height:'+(TJPzoomheight-TJPborderthick*2)+'&&&img src=&'+obj.src+'& style=&position:margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'height:'+(TJPzoomamount*parseInt(obj.style.height))+'& /&'+((obj.src!=highres)?('&img src=&'+highres+'& style=&position:margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'height:'+(TJPzoomamount*parseInt(obj.style.height))+'& onload=&if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}& /&'):(''))+'&/div&';
if(highres != obj.src) {
TJPwin.innerHTML+='&div style=&position: margin:'+TJPborderthick+'px 0 0 '+TJPborderthick+'&&'+TJPloading+'&/div&';
//marker - zoomer
obj.parentNode.insertBefore(TJPwin,TJPstage);
TJPresize(obj);
function TJPresize(obj) {
sbr=0; sbl=0;
if(TJPzoomwidth-2*TJPborderthick & 22) {sbr=1}
if(TJPzoomheight-2*TJPborderthick & 22) {sbr=1}
if(TJPzoomwidth & parseFloat(obj.style.width)) {sbl=1;}
if(TJPzoomheight & parseFloat(obj.style.height)) {sbl=1}
if(sbr==1 && sbl == 1) {
TJPzoomwidth=parseFloat(obj.style.width)/2;
TJPzoomheight=parseFloat(obj.style.height)/2;
TJPzoomratio=TJPzoomheight/TJP
if(sbr==1) {
if(TJPzoomwidth&TJPzoomheight) {
TJPzoomheight=TJPzoomheight/TJPzoomwidth*(22+2*TJPborderthick); TJPzoomwidth=22+2*TJP
TJPzoomwidth=TJPzoomwidth/TJPzoomheight*(22+2*TJPborderthick); TJPzoomheight=22+2*TJP
if(sbl==1) {
if(parseFloat(obj.style.width)/parseFloat(obj.style.height) & TJPzoomwidth/TJPzoomheight) {
TJPzoomheight=parseFloat(obj.style.height);
TJPzoomwidth=TJPzoomheight/TJP
TJPzoomwidth=parseFloat(obj.style.width);
TJPzoomheight=TJPzoomratio*TJP
TJPzoomwidth=Math.floor(TJPzoomwidth/2)*2;
TJPzoomheight=Math.floor(TJPzoomheight/2)*2;
ww=obj.parentNode.getElementsByTagName('div')[0];
ww.style.width=TJPzoomwidth+'px';
ww.style.height=TJPzoomheight+'px';
w=ww.getElementsByTagName('div')[0];
w.style.width=TJPzoomwidth+'px';
w.style.height=TJPzoomheight+'px';
w=ww.getElementsByTagName('div')[1];
w.style.width=TJPzoomwidth-TJPborderthick*2+'px';
w.style.height=TJPzoomheight-TJPborderthick*2+'px';
function TJPfindposy(obj) {
var curtop = 0;
if(!obj) {return 0;}
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetP
} else if (obj.y) {
curtop += obj.y;
function TJPfindposx(obj) {
var curleft = 0;
if(!obj) {return 0;}
if (obj && obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetP
} else if (obj.x) {
curleft += obj.x;
function TJPhandlemouse(evt,obj) {
var evt = evt?evt:window.event?window.event: if(!evt) { }
if(evt.pageX) {
nowx=evt.pageX-TJPfindposx(obj)-TJP
nowy=evt.pageY-TJPfindposy(obj)-TJP
if(document.documentElement && document.documentElement.scrollTop) {
nowx=evt.clientX+document.documentElement.scrollLeft-TJPfindposx(obj)-TJP
nowy=evt.clientY+document.documentElement.scrollTop-TJPfindposy(obj)-TJP
nowx=evt.x+document.body.scrollLeft-TJPfindposx(obj)-TJP
nowy=evt.y+document.body.scrollTop-TJPfindposy(obj)-TJP
if(evt.type == 'mousemove') {
TJPsetwin(obj,nowx,nowy);
} else if(evt.type == 'mousedown') {
TJPmouse=1; //left: 1, middle: 2, right: 3
TJPmousey=
TJPmousex=
} else if(evt.type =='mouseup') {
TJPmouse=0;
} else if(evt.type =='mouseout') {
TJPmouse=0;
if(navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) { //hi Mac IE
x=obj.parentN
x.removeChild(x.getElementsByTagName('div')[0]);
x.removeChild(x.getElementsByTagName('div')[0]);
function TJPsetwin(obj,nowx,nowy) {
obj.parentNode.getElementsByTagName('div')[0].style.display='block';
if(TJPzoomoffset=='smart') {
TJPzoomoffsetx=.1+.8*nowx/parseFloat(obj.style.width);
TJPzoomoffsety=.1+.8*nowy/parseFloat(obj.style.height);
stage=obj.parentNode.getElementsByTagName('div')[0];
if(TJPmouse == 1) {
if(Math.abs(nowy-TJPmousey) &= 1) {
TJPzoomamount*=((nowy&TJPmousey)?(0.909):(1.1));
TJPmousey=
if(TJPzoomamount & TJPzoomamountmin) {TJPzoomamount=TJP}
if(TJPzoomamount & TJPzoomamountmax) {TJPzoomamount=TJP}
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width=
parseInt(obj.style.width)*TJPzoomamount+'px';
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height=
parseInt(obj.style.height)*TJPzoomamount+'px';
if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.width= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.height= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.
if(Math.abs(nowx-TJPmousex) &= 12 && TJPzoomwindowlock==0) {
TJPzoomwidth*=((nowx&TJPmousex)?(1.1):(0.909));
TJPzoomheight=TJPzoomwidth*TJP
TJPresize(obj);
TJPmousex=
stage.style.marginLeft=nowx-(TJPzoomwidth -2*TJPborderthick)*TJPzoomoffsetx-TJPborderthick+'px';
stage.style.marginTop= nowy-(TJPzoomheight-2*TJPborderthick)*TJPzoomoffsety-TJPborderthick+'px';
clip1=0; clip2=TJP clip3=TJP clip4=0;
nwidth=TJP nheight=TJP
tmp=(1-2*TJPzoomoffsetx)*TJP
if(nowx-TJPzoomwidth*TJPzoomoffsetx & tmp) {
clip4=TJPzoomwidth*TJPzoomoffsetx-nowx +
} else if(parseFloat(nowx-TJPzoomwidth*TJPzoomoffsetx+TJPzoomwidth) & parseFloat(obj.style.width)+tmp) {
clip2= TJPzoomwidth*TJPzoomoffsetx - nowx + parseFloat(obj.style.width)+
nwidth=TJPzoomwidth*TJPzoomoffsetx-nowx+parseInt(obj.style.width)+TJP
tmp=(1-2*TJPzoomoffsety)*TJP
if(nowy-TJPzoomheight*TJPzoomoffsety & tmp) {
clip1=TJPzoomheight*TJPzoomoffsety-nowy+
} else if(parseFloat(nowy-TJPzoomheight*TJPzoomoffsety+TJPzoomheight) & parseFloat(obj.style.height)+tmp) {
clip3= TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+
nheight=TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+TJP
stage.style.width=nwidth+'px';
stage.style.height=nheight+'px';
stage.style.clip='rect('+clip1+'px,'+clip2+'px,'+clip3+'px,'+clip4+'px)';
if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick) & 0) { t=-(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick))}
else if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick) & parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2) { t=-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-((nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick))-(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2)); }
else { t=(-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2)/(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2)*(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick)) }
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop=t+'px';
if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginTop=t+'px';
if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick) & 0) { t=-(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick))}
else if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick) & parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2) { t=-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-((nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick))-(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2)); }
else { t=(-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2)/(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2)*(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick)) }
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft=t+'px';
if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginLeft=t+'px';
function TJPinit() {
TJPadjustx=0; TJPadjusty=0;
if(navigator.userAgent.indexOf('MSIE')&-1) {TJPadjustx=2;TJPadjusty=2;}
if(navigator.userAgent.indexOf('Opera')&-1) {TJPadjustx=0; TJPadjusty=0;}
if(navigator.userAgent.indexOf('Safari')&-1) {TJPadjustx=1; TJPadjusty=2;}
// configuration - do not modify the following, instead read the behaviors.html file in the tutorial!
var TJPon=new Array();
var TJPadjustx,TJP
var TJPmouse=0; var TJP var TJP
var TJPloading='&div style=&background-color: #ffeb77; color: #333333; padding:2 font-family: verdana,arial, font-size: 10&&Loading...&/div&';
var TJPzoomwidth=260;
var TJPzoomheight=220;
var TJPzoomwindowlock=0;
var TJPzoomoffsetx=.5;
var TJPzoomoffsety=.5;
var TJPzoomamount=2;
var TJPzoomamountmax=12;
var TJPzoomamountmin=1;
var TJPborderthick=2;
var TJPbordercolor='#888888';
var TJPshadow='dropshadow/';
TJPinit();
&table width=&100%& border=&1& cellspacing=&1& cellpadding=&0&&
&td width=&200&& &/td&
&img id=&bigimg& onmouseover=&TJPzoom(this);& &
&br&&span id=&sizes&&&/span&
var img_pro=0.25//缩放比例(相对屏幕)
var img=new Image()
img.src=&/files//work_3_542_7684632.jpg&//图片路径
//img.src=&/lanren/wallpaper/wallpaper-0061.jpg&//图片路径
var bigimg=document.getElementById(&bigimg&)
bigimg.src=img.src
sw=screen.
sh=screen.
if (w&sw*img_pro){TJPzoomamount=w/(sw*img_pro); bigimg.width=sw*img_k=(sw*img_pro)/w; bigimg.height=bigimg.width*h/w;h=bigimg.width*h/w;w=sw*img_}
else img_pro=1
document.getElementById(&sizes&).innerHTML=
&  当前大小:& + Math.ceil(w) + & * & + Math.ceil(h) + &  显示比例:& + Math.ceil(k*100) + &%&;
&提示:您可以先修改部分代码再运行
UID472343在线时间 小时积分4639帖子离线17152 天注册时间
金牌会员, 积分 4639, 距离下一级还需 361 积分
回复 7# fuguojian1988
这个东西好玩啊,而且兼容FF,收藏了
UID502645在线时间 小时积分17帖子离线17152 天注册时间
新手上路, 积分 17, 距离下一级还需 33 积分
还有简单的....一个小图~一个大图~显示~~onmouseover事件可以了
UID502666在线时间 小时积分65帖子离线17152 天注册时间
初级会员, 积分 65, 距离下一级还需 135 积分
恩 不错&&呵呵 谢谢各位啊
Powered by}

我要回帖

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信