jq鼠标经过，放大图片

Posted 2020-09-02 懒人猫

1.html

<div class="imgBox">
    <ul>
        <li><a href="images/1.jpg" class="toolTip" title="图片1"><img src="images/1.jpg" /></a></li>
        <li><a href="images/2.jpg" class="toolTip" title="图片2"><img src="images/2.jpg" /></a></li>
        <li><a href="images/3.jpg" class="toolTip" title="图片3"><img src="images/3.jpg" /></a></li>
        <li><a href="images/4.jpg" class="toolTip" title="图片4"><img src="images/4.jpg" /></a></li>
    </ul>
</div>

2.css

    li{
        list-style: none;
        padding: 2px;
        border: 2px solid blue;
        margin: 0 2px;
    }
    ul{
        display: flex;
    }
    li img{
        display: block;
        width: 200px;
        height: 200px;
    }

3.jq

<script>
    $(function(){
        /*******************************************思路****************************/
//        鼠标滑过时候，创建一个div,div里面放图片的路径

        //设置偏移量
        var x=10,
            y=20;

        $(‘.toolTip‘).mouseover(function(e){
            var href=this.href,  //可以用this.href代替$(this).attr(‘href‘)
             tit=this.title,
             bigBox=`<div id=‘tip‘><div class=‘parent‘><img src=${href} alt=${tit}><span>${tit}</span></div></div>`
            $(‘body‘).append(bigBox)
            //鼠标移动的位置
            $(‘.parent‘).css({
                ‘position‘:‘relative‘
            })
            $(‘#tip span‘).css({
                ‘position‘:‘absolute‘,
                ‘top‘:0,
                ‘color‘:‘red‘
            })

        }).mouseout(function(e){//记住是.mouseout而不是逗号
            $(‘#tip‘).remove()

        }).mousemove(function(e){  //如果写法都正确，看看是不是mousemove
            $(‘#tip‘).css({
                ‘top‘:(e.pageY+x)+‘px‘, //记住是用括号，和e
                ‘left‘:(e.pageX+y)+‘px‘
            })
        })
    })
</script>

要注意的地方:是

1.        }).mouseout(function(e){/ /此处是.mouseout,而不是,mouseout

2.此处是要加括号和e  (e.pageY+x)+‘px‘
3.pageX() 属性是鼠标指针的位置，相对于文档的左边缘;如果都正确，页面调试时候,鼠标指针位置不动，看看是否写的是mousemove

4.可以用this.href代替$(this).attr(‘href‘)