jq鼠标经过,放大图片

Posted 懒人猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq鼠标经过,放大图片相关的知识,希望对你有一定的参考价值。

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‘)

以上是关于jq鼠标经过,放大图片的主要内容,如果未能解决你的问题,请参考以下文章

鼠标经过,图片放大事件

HTML+css 鼠标滑过二级导航时想保留一级导航的滑过 求大神解答

如何用CSS实现鼠标经过 图片放大的效果

鼠标经过图片时向前突出并放大图片

jq鼠标经过之后图片效果(兼容ie8)

js+css鼠标移动图片放大