jquery实现图片跟随鼠标

最新推荐文章于 2022-02-07 17:59:12 发布

焦點

最新推荐文章于 2022-02-07 17:59:12 发布

阅读量1.8k

点赞数

分类专栏： jquery 文章标签：图片跟随鼠标 jquery 图片鼠标

本文链接：https://blog.csdn.net/di315362886/article/details/53909567

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，代码的记下来，浪费了我这么多时间，记你一辈子，这个可以直接在W3School直接运行，可以根据某行显示某个特定的图片，自己定义就行

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery图片跟随鼠标</title>
    <script type="text/javascript">
        function hideImg(num){
            if(num.className == "1_name"){
                $('#1_erweima').hide();
            }else if(num.className == "2_name"){
                $('#2_erweima').hide();
            }
        }

        function showImg(num) {
            var intX = window.event.clientX;
            var intY = window.event.clientY;
            if (num.className == "1_name") {
                $('#1_erweima').css("left", intX + 20 + "px");
                $('#1_erweima').css("top", intY + 10 + "px");
                $('#1_erweima').show();
            } else if (num.className == "2_name") {
                $('#2_erweima').css("left", intX + 20 + "px");
                $('#2_erweima').css("top", intY + 10 + "px");
                $('#2_erweima').show();
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <th>
            <a href="https://www.baidu.com/" class="1_name" target="_blank" οnmοuseοut="hideImg(this)" οnmοusemοve="showImg(this)" οnmοuseοver="showImg(this)" style="color: #1192cc;">我是百度，会跟随</a>
        </th>
    </tr>
    <tr>
        <th>
            <a href="https://www.baidu.com/" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a>
        </th>
    </tr>
    <tr>
        <th>
            <a href="https://www.baidu.com/" class="2_name" target="_blank" οnmοuseοut="hideImg(this)" οnmοusemοve="showImg(this)" οnmοuseοver="showImg(this)" style="color: #1192cc;">我也是百度，也跟随</a>
        </th>
    </tr>
    <div id="1_erweima" style="display:none;right:20;position:absolute;">
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
    </div>
    <div id="2_erweima" style="display:none;right:20;position:absolute;">
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
    </div>
</table>
</body>
</html>

焦點

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片跟随鼠标

开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，代码的记下来，浪费了我这么多时间，记你一辈子，这个可以直接在W3School直接运行，可以根据某行显示某个特定的图片，自己定义就行 jquery图片跟随鼠标 function hideImg(num){
复制链接

扫一扫