js实现的简单图片浮动效果完整实例

JS实现简单图片浮动效果的完整攻略

  1. HTML和CSS准备

首先,我们需要准备HTML和CSS代码,以便在页面中添加图片并设置其样式。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>
</body>
</html>

首先创建一个div容器(.container),并将其设置为相对定位(position: relative),并添加一些样式来使容器在页面中居中且具有填充、边框、背景色等属性。然后在容器中添加一个div元素(.image),并将其设置为绝对定位(position: absolute),并将其上下左右的偏移设置为50%和transform属性。

此时页面将显示一个灰色的容器,其中包含一个白色的圆形图片。

  1. JS实现图片浮动效果

接下来,我们将会学习使用JavaScript来实现图片浮动效果。主要思路是在图片上绑定鼠标移动事件,并根据鼠标的位置更新图片的位置。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>

    <script type="text/javascript">
        var image = document.querySelector(".image");

        image.addEventListener("mousemove", function(event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            image.style.top = mouseY - 100 + "px";
            image.style.left = mouseX - 100 + "px";
        });
    </script>
</body>
</html>

我们首先获取图片元素(.image),并在其上绑定了一个鼠标移动事件。事件处理函数将获取当前鼠标的位置,并根据其在页面中的位置动态更新图片的位置,使其随着鼠标的移动而浮动。

现在在页面中将会看到图片随着鼠标的移动而浮动。

  1. 实现图片的复原效果

由于上述代码只实现了简单的浮动动画,我们需要实现一种方法,使得图片可以回到最初的位置。我们需要在图片的mousemove事件内添加一个setTimeout函数,并通过设置一个时间间隔来使图片回到初始位置。

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>JS实现图片浮动效果</title>
    <style type="text/css">
        .container {
            position: relative;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>

    <script type="text/javascript">
        var image = document.querySelector(".image");

        image.addEventListener("mousemove", function(event) {
            var mouseX = event.clientX;
            var mouseY = event.clientY;

            image.style.top = mouseY - 100 + "px";
            image.style.left = mouseX - 100 + "px";

            setTimeout(function() {
                image.style.top = "50%";
                image.style.left = "50%";
            }, 200);
        });
    </script>
</body>
</html>

我们在事件处理函数的最后添加了一个setTimeout函数,使得图片在200毫秒后恢复到初始状态。此时,在页面中将可见图片随着鼠标的移动而浮动,并回到原始位置。

  1. 小结

通过上面的两个示例,我们可以看到,通过使用JavaScript,我们只需要几行代码就可以实现漂亮的图片浮动效果。当然,你可以根据自己的需求来修改代码并实现你想要的效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现的简单图片浮动效果完整实例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Git服务器的Gitosis安装配置及gitignore的使用方法

    Git服务器的Gitosis安装配置 安装Gitosis 在Linux服务器上安装Git: sudo apt-get install git 创建一个git用户: sudo adduser –system –shell /bin/bash –gecos ‘git version control’ –group –disabled-password …

    css 2023年6月10日
    00
  • 苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

    问题描述:在苹果iPhone的Safari浏览器中,如果使用CSS对button或者input标签来设置圆角边框,那么当这些标签设置为type=”submit”时,会出现圆角边框不显示或者显示不正确的问题。这种情况下,我们需要进行样式重置来修复这个问题。 解决方案: 步骤1:为了避免Safari的默认样式,我们需要首先重置样式: button, input[…

    css 2023年6月10日
    00
  • 基于JavaScript实现轮播图代码

    下面是“基于JavaScript实现轮播图代码”的完整攻略。 第一步:HTML布局 首先,在HTML页面中创建轮播图的容器,并在容器内创建轮播图下方的指示器: <div class="carousel-container"> <div class="carousel-slide"> <im…

    css 2023年6月9日
    00
  • 关于CSS中定位的小结

    好的。首先,我们要明确CSS中定位的基础知识。在CSS中,有三种常见的定位方式:静态定位(static)、相对定位(relative)和绝对定位(absolute)。其中,静态定位是默认的定位方式,元素在页面上按照它们在HTML中出现的顺序依次排列,不受其他元素的影响。相对定位和绝对定位则可以让元素脱离文档流,可以更灵活地排列和布局。 下面是具体的攻略: 1…

    css 2023年6月9日
    00
  • 用jquery修复在iframe下的页面锚点失效问题

    修复在iframe中的页面锚点失效问题需要一些JS代码来实现,下面我将为你提供完整攻略。 情况描述 当我们在html页面中使用iframe来嵌入另一个页面时,如果在iframe内部设置了锚点,我们点击链接后会发现无法滚动到对应的位置,这是因为默认情况下页面只会在iframe中滚动,外部页面并不会响应。 解决步骤 为了修复这个问题,我们可以使用以下步骤: 步骤…

    css 2023年6月10日
    00
  • 实用的CSS常见的问题和技巧总结

    实用的CSS常见的问题和技巧总结 一、常见问题的解决方案 1. CSS Reset的作用与实现方式 在不同的浏览器和版本中,元素的样式可能会有所不同。为了解决这个问题,很多开发者会选择使用CSS Reset来重置元素的样式。CSS Reset的主要作用是重置所有元素的样式,使得所有不同的浏览器和版本对元素的解析样式一致,从而保证了页面在不同浏览器和版本中的表…

    css 2023年6月10日
    00
  • 独行DIV自适应宽度布局CSS实例与应用范围

    独行DIV自适应宽度布局,是指通过把HTML文档中 元素的display属性值设置为inline-block,来实现元素宽度自适应的布局方式。下面是具体的实现步骤: HTML结构 首先需要在HTML文档中定义 元素的结构,以便实现自适应宽度布局。一般情况下,我们可以按照以下结构来定义: <div class="container"&…

    css 2023年6月10日
    00
  • javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)

    要实现网页中的简易运动,需要用到JavaScript的基础语法和DOM操作。以下是实现此功能的步骤: 1.获取需要运动的元素 在JavaScript中通过getElementById()函数获取页面上需要产生运动的元素。 例如: var box = document.getElementById(‘box’); // 获取id为box的元素 2.设置元素的C…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部