图片浮动 javascript实现

最新推荐文章于 2020-12-13 22:52:08 发布

围栏

最新推荐文章于 2020-12-13 22:52:08 发布

阅读量1k

点赞数 1

分类专栏：浏览器前端 Javascript 文章标签： javascript 位置设置浮动代码

本文链接：https://blog.csdn.net/anbuhay/article/details/45025761

版权

本文介绍了如何利用JavaScript实现图片浮动效果。通过设置图片为图层背景，内部包含关闭按钮和链接，然后调整图层的位置，实现浮动效果。同时，当鼠标移入图层时，会改变图层的透明度并暂停浮动，鼠标离开后继续浮动。

摘要由CSDN通过智能技术生成

思路：将图片设置为图层背景，图层内放置关闭图片（块）和链接具体位置，漂浮整个图层，并实现鼠标移入调整图层透明度并停止，鼠标离开继续移动。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FloatImg</title>
    <link rel="stylesheet" type="text/css" href="floatImg.css">
    <script type="text/javascript" src="floatImg.js"></script>
</head>
<body>
    <div id="floatImg">
        <span id="closeImg">×</span>
        <a target="_blank" href="http://blog.csdn.net/anbuhay/"></a>
    </div>  
</body>