利用js实现图片在浏览器中飘动(浮动窗口自由移动)效果

author Owner  •  Filed under templates, internet

首先,设置一个将要飘动的窗口,html代码如下:

<span id='img' style='position:absolute;' onmouseover='mystop()' onmouseout= 'start()'>
<a href='#' target='_blank'><img src="{$global.images}skin/images/float.png" width='381' height='90' border='0'></a>
</span>

利用js控制span标签在浏览器内移动

<script type="text/javascript">
var xPos = 0;var yPos = 0; var step = 1;var delay = 10;var height = 0; 
var Hoffset = 0;var Woffset = 0; var yon = 0;var xon = 0; var xon = 0; var interval;
var img = document.getElementById('img');
img.style.top = 0;
function changePos(){
    width =  document.documentElement.clientWidth||document.body.clientWidth;
    height = document.documentElement.clientHeight||document.body.clientHeight;
    Hoffset = img.offsetHeight;
    Woffset = img.offsetWidth;
    if (yon) {
        yPos = yPos + step;
    }else {
        yPos = yPos - step;
    }
    if (yPos < 0) {
        yon = 1;
        yPos = 0;
    }
    if (yPos >= (height - Hoffset)) {
        yon = 0;
        yPos = (height - Hoffset);
    }
    if (xon) {
        xPos = xPos + step;
    }else {
        xPos = xPos - step;
    }
    if (xPos < 0) {
        xon = 1;
        xPos = 0;
    }
    if (xPos >= (width - Woffset)) {
        xon = 0;
        xPos = (width - Woffset);
    }
    img.style.left = xPos + document.body.scrollLeft+"px";
    img.style.top = yPos + document.body.scrollTop +"px";
}
function start() {
    img.visibility = 'visible';
    interval = setInterval('changePos()', delay);
}
function mystop(){
    clearInterval(interval)
}
start()
</script>


Tagged: orci, lectus, varius, turpis

Comments (0)  • 2016-04-25 16:29:56 •  Edit

0 Responses

最新文章