如何使用JavaScript制一个飘浮的图片效果

Sublime编纂器

HTML+CSS JavaScript

方式/步调

  1. 1

    编写结果所需的HTML代码,很是简单,插手一个

    标签即可,代码如下图所示:
    2f738bd4b31c87012447073d297f9e2f0608ff7c.jpg
  2. 2

    对HTML进行需要的CSS节制,具体代码如下图所示:

    b90e7bec54e736d1dd3238d395504fc2d46269cc.jpg
  3. 3

    界说HTML元素移动1像素的一个函数,具体代码如下:

    960a304e251f95caf8fb266dc7177f3e660952da.jpg
  4. 4

    插手计时器,每30毫秒挪用一次,这样图片就可以动起来了,代码如下图所示:

    b58f8c5494eef01f3c7fac1eeefe9925bd317d85.jpg
  5. 5

    再添加代码,当鼠标悬停到图片时遏制滚动,当分开时图片时继续滚动,代码如下所示:

    d8f9d72a6059252d1691a9df3a9b033b5ab5b963.jpg
  6. 6

    打开浏览器进行预览,图片飘浮起来了,结果不错吧?从速脱手尝尝吧!

    f11f3a292df5e0fe90f13dda526034a85fdf727b.jpg
  • 发表于 2019-08-16 22:25
  • 阅读 ( 778 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具