js控制图片位置

JavaScript018

js控制图片位置,第1张

只有绝对定位(position:absolute)或者固定定位(position:fixed)的元素才能通过top和left等属性来改变其位置。所以你应该在css中把图片的定位属性设一下,当然用js设定也行。

另外,给p.style.top或者p.style.left赋值时,务必加上单位,比如 p.style.top="200px",因为不这样做在有些浏览器中会出错的。

这是img标签的特性决定的,如果width和height属性只设置其中一个,另一个会自动等比例缩放,也就是说图片会自动保持其原始的宽高比,只有width和height同时设置,图片才会产生压扁或拉高的变形效果。

这个可以用CSS实现就好了。不必要使用JS

图片放大效果的话,建议用一个额外的 div层放置放大后的图片,这样布局就不会乱了。鼠标放上去就显示这个层。

.img2{

/*这里写你的所有图片都会用到的样式*/

}

.img2:first-child, .img2:last-child{

/*这里写第一个图片和最后一个图片会用到的样式*/

}

.img1:hover .showBigImg{

display:block

}

对于这个大图的div层的显示,可以稍加js控制,这样就可以所有图片共用一个div层来放置大图。

希望能帮助到你