2 zengyunhua1992 zengyunhua1992 于 2016.09.14 23:10 提问

鼠标放在小图上面,下面显示相应大图

我的代码如下图:图片说明

4个回答

qq_29594393
qq_29594393   Ds   Rxr 2016.09.15 00:29
已采纳

可以实现了,你看一下效果吧

   $(function(){
        $("td").hover(function(e){
            //自己加一个判断,e.pageY-90<0或者epageX-60<0的话就设置为0
            //自己调整这个值,就能控制位置
            $('div.info').html($(this).html()).toggle().css({
                "top":e.pageY-90,
                "left":e.pageX-60
            })
        })

    })

        <style>
 .info{
    width: 150px;
    height: 60px;
    border: 1px solid gold;
    background-color: wheat;
    border-radius: 10px;
    position: fixed;
    display: none;
 }
</style>

<p>545</p>
    <p>545</p>

    <p>545</p><p>545</p>
    <div class="info">

    </div>
      <table id="tba">
   <tr>
       <td > Homel</td>
       <td > About</td>
       <td >Subscribe RSS</td>
   </tr>
    </table>
qq_29594393
qq_29594393 回复zengyunhua1992: 545 没有任何作用,由于没有边界检测,要把table放屏幕中间,不加这个在屏幕边缘就会在屏幕外显示气泡,加了边界检测后,就不用了
接近 2 年之前 回复
zengyunhua1992
zengyunhua1992 你这个545有什么用呢?用不着的啊,好像是有这么个意思了,我的代码也接近,不过有点不完美
接近 2 年之前 回复
qq_29594393
qq_29594393 回复zengyunhua1992: 加个QQ吧 354656610
接近 2 年之前 回复
zengyunhua1992
zengyunhua1992 我发私信给你看看,我写的,有点小小问题
接近 2 年之前 回复
devmiao
devmiao   Ds   Rxr 2016.09.14 23:55
mscygg
mscygg   2016.09.15 01:00

这个是要定义CSS样式的,要用到绝对定位和相对定位,然后在用JS 的移入和移除功能就能实现

himiky
himiky   2016.09.15 21:03

可能使用JQuery来实现。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
商品详情页中,当鼠标放到小图上时,改变大图的图片为当前小图的图片
在做商品详情页时,我们会遇到这样的问题,当鼠标移动到小图上的时候,所对应的大图也会随之改变,变成当前鼠标所在位置的小图图片,今天我给大家分享一下我的做法,希望对大家有所帮助,也希望得到大家的指点. //首先引入jq文件,我用的是tp框架,jq文件是放在根目录Public文件夹下的 //首先给小图绑定 mouseover 事件 $('#J_SmallImgs img').mou
jquery小图片左右滚动点击小图切换显示上面大图
jquery小图片左右滚动点击小图切换显示大图
鼠标悬停在小图上,自动出现大图的代码
首先原图片就是大图片, 1.小图所在的div,用style=overfow:hidden;width:100px;height:100px;和 来限定图片显示大小,只显示为高宽100px z-index:2; display:none;"> 2.用于显示大图即原本大小图的div,style=display:none;让它先不显示 function show(_this) { document
又一个鼠标滑过小图显示大图的CSS特效
又一个鼠标滑过小图显示大图的CSS特效。。
小图轮播对应显示大图
自动轮播图     .dpcphdp{position: relative;overflow: hidden;width: 100%;margin-top: 10px;float: left;} .dpcphdp .bigImg{width:290px;height: 310px;position: relative;width: 100%;float: left;} .dpcphd
分享一个点击小图切换大图的jquery,并说明一下原理
怎么才能实现点击小图切换大图呢? 首选我说一下思路,当点击小图的时候触发一个事件,当然小图有个big的路径,点击获取小图的big,然后根据大图的id,把获取big赋值给大图的src。思路就是这样,下面直接上代码了。 $(".G_tab img").click(function(){ //$("#GLink").attr("href",$(thi
鼠标滑过显示图片大图效果
描述: 当用户将鼠标放到 图片上时,显示图片的大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件,分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。 对于mouserover事件,做以下几件事: 获取原标题,并将标题置为空,防止title和提示框同时出现。 创建提示框对象,并将图片地址和title放入其中显示。 设置
CSS实现缩略图鼠标移上去显示大图
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 完全css实现缩略图鼠标移上去显示大图 .list{position:relative;} .list span img{ /*CSS for enlarged image*/ border-wi
html 点击小图显示大图
网上找来的,很方便移植,具体链接忘记是多少了,感谢作者的无私奉献
鼠标移至小图,自动显示相应大图
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图.Net精简版本       function GetShowImg(imgfile)    {    document.all("ShowImage").src = "/semir/images/"+ imgfile;       }          //DataList绑定       RepeatColumns="3" Da