JS动态效果，参考如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>浮动图片</title>
<script type="text/javascript">
var step = 1 // 移动的像素
var y = -1 // 垂直移动的方向，-1表示向上，1表示向下
var x = 1 // 水平移动的方向，-1表示向左，1表示向右
function myFloat()
{
var img = document.getElementById("myImg")
// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位
var top = img.style.top.replace("px", "")
// top = top - 100
// img.style.top = top + "px"
// 获取图片和当前浏览器窗口左边距
var left = img.style.left.replace("px", "")
// left = left - 100
// img.style.left = left + "px"
// 上下移动
if(top <= 0)
{
y = 1
}
if(top >= document.body.clientHeight)
{
y = -1
}
top = (top*1) + (step * y)
img.style.top = top + "px"
// 左右移动
if(left <= 0)
{
x = 1
}
// alert(img.clientWidth)
if(left >= (document.body.clientWidth - img.clientWidth))
{
x = -1
}
left = (left*1) + (step * x)
img.style.left = left + "px"
setTimeout("myFloat()", 20)
}
</script>
</head>
<body onload="myFloat()" style="height: 400px">
<img id="myImg" src="IP.gif"
style="position: absolute left: 500px top: 400px border: solid 1px black" />
</body>
</html>
方法一：获取图片的宽高。可以用offsetWidth和offsetHeight
方法二：
你先获取img标签标签元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。
获取之后，如果你的img图片有width和height 属性，可以直接用img元素对象点属性
document.getElementsByTagName("img")[0].width
document.getElementsByTagName("img")[0].height
3.如果img元素本身没有width和height属性。你可以获取img元素的style样式
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
｝；
obj是你的img标签对象，attr是你的想要获取的属性；
currentStyle支持IE低版本浏览器，
getComputedStyle支持主流浏览器
