css+js实现不影响周边内容的浮动图片

最新推荐文章于 2024-05-01 12:01:32 发布

俱会一处

最新推荐文章于 2024-05-01 12:01:32 发布

阅读量1.9k

点赞数

分类专栏： javascript css 文章标签： css js 图片放大不影响

本文链接：https://blog.csdn.net/jhycjhyc/article/details/60570197

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1.目标

在网页中，图片以缩小的尺寸显示，图片四周可环绕文字，当鼠标悬停于图片时，图片向右向下放大，覆盖周围的文字或其他内容，这个过程中，周围的文字或其他内容的位置不发生变化，鼠标离开图片，图片恢复为原尺寸，放大和恢复的过程是渐变的，不是瞬间完成的。

2.思路

图片的尺寸发生变化而周围的内容不发生变化，这就不能仅靠float来实现，因为用float实现浮动时，如尺寸发生变化，周围内容的位置也会发生相应变化的，所以图片应以某一浮动元素（可理解为影子元素）为参考进行定位，而此图片的position属性须设为absolute。用js实现影子元素的位置的计算。

3.代码

...

<body>
    <div id="bg1">
        <div id="blank1"></div>
        <a href="#">[全媒头条]奋进中国的世界贡献</a>
        <a href="#">[中国网事]人大代表大凉山履职记</a>
        <a href="#">[走访调查]"超标"电动车是如何上路的?</a>
        <a href="#">[脱贫攻坚]吕梁山区贫困县土豆扶贫记</a>
        <a href="#">[两会视点]走向法治时代,中国电影准备好了吗</a>
    </div>
   <div id="leftfloat"></div>
    <script>
        var obj1 = document.getElementById("bg1");
        var obj2 = document.getElementById("leftfloat");
        obj2.style.top = (getTop(obj1)+1).toString() + "px";
        obj2.style.left= (getLeft(obj1)+1).toString()+"px";
    </script>
</body>

俱会一处

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css+js实现不影响周边内容的浮动图片

1.目标在网页中，图片以缩小的尺寸显示，图片四周可环绕文字，当鼠标悬停于图片时，图片向右向下放大，覆盖周围的文字或其他内容，这个过程中，周围的文字或其他内容的位置不发生变化，鼠标离开图片，图片恢复为原尺寸，放大的恢复的过程是渐变的，不是瞬间完成的。2.思路图片的尺寸发生变化而周围的内容不发生变化，这就不能仅靠float来实现，应该用float实现浮动时，如尺寸发生变化，周围
复制链接

扫一扫