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>