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

1.目标

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

2.思路

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

3.代码

 <style>
 
        div#bg1
        {
            width:328px;
            height:244px;
            /*border:1px solid #000;*/
        }
        div#blank1
        {
            width:124px;
            height:84px;
            float:left;
            margin:0 0.5em .5em 0;
        }
        div#leftfloat
        {
            position:absolute;
            width:124px;
            height:84px;
            background-image:url(/images/梅白菜花黄2.png);
            background-size:100%;
            transition:all .7s;
        }
        div#leftfloat:hover
        {
            width:328px;
            height:244px;
            background-size:100%;
        }
        a
        {
            display:block;
        }
        a
        {
            margin:1em 0;
        }
        div#bg1  a:nth-of-type(1)
        {
            color:#3d6294;
            margin-left:130px;
        }
        div#bg1  a:nth-of-type(2)
        {
           margin-top:40px;
           clear:left;
        }

    </style>

<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>

IT文库 » css+js实现 不影响周边内容的浮动图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址