使用Jquery制作精美的图片展示效果_制作图片展示效果jquery-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44633692/article/details/117263216

文章目录

效果展示
准备工作
重点知识须知
- - attr()与css()的区别
  - 获取当前元素的索引
案例代码
总结

效果展示

在这里插入图片描述

准备工作

一只VSCode
Jquery源文件
一些JQ基础知识
一些Html+css+js的基础知识
一个清醒的大脑

重点知识须知

attr()与css()的区别

1. attr()主要是针对元素的属性进行操作，如img的src属性和alt属性，a链接的href属性等等
2. css()修改的是样式里面的属性，即是style里面的属性，两者的侧重点不同，可以这样简单的记忆，css样式中的属性在jquery中获得和修改用css()这个方法，其他的获得和修改属性用attr()方法

获取当前元素的索引

$("div").index(this);

案例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/Jquery.js"></script>
    <script>
        $(document).ready(function() {
            var $Box;
            var index;
            $('div').mouseenter(function(e) {
                //图片路径
                var $image;
                //要添加的div
                var $div = $('<div></div>').width(300).height(300)
                    //获取鼠标当前指向div的索引位置
                index = $("div").index(this);
                //添加入盒
                $Box = $('div').eq(index).append($div);
                //设置背景图片
                $image = $Box.css('background-image')
                $Box.mousemove(function(e) {
                    // values: e.clientX, e.clientY, e.pageX, e.pageY
                    $div.css({
                        //注意！！！！ 不加定位属性没有移动效果
                        'position': 'absolute',
                        'border-radius': '150px',
                        'border': 'solid gray',
                        'background-image': $image,
                        left: e.pageX + 50 + 'px',
                        top: e.pageY + 50 + 'px'
                    })
                });
                $Box.mouseleave(function() {
                    $div.css("display", "none");
                });
            });
        })
    </script>
    <style>
        div {
            width: 130px;
            height: 130px;
            background-size: 100%;
            border-radius: 75.5px;
            border: solid gray;
        }
        
        li {
            float: left;
            margin-left: 20px;
            list-style: none;
        }
        
        ul {
            height: 500px;
            width: 1000px;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div style="background-image: url(img/p1.png);"></div>
        </li>
        <li>
            <div style="background-image: url(img/p2.png);"></div>
        </li>
        <li>
            <div style="background-image: url(img/p3.png)"></div>
        </li>
        <li>
            <div style="background-image: url(img/p4.png);"></div>
        </li>
    </ul>
</body>

</html>