漂浮效果

<!doctype html>
<html>
<head>
<title>漂浮效果</title>
</head>
<body>
<div style="position:absolute;" onMouseOver="window.clearInterval(timer)" onMouseOut="creatTimer()">
    <img src="images/1.jpg" style="width:160px; height:160px;" />

</div>

<script>
    var obj=document.getElementsByTagName("div").item(0);
    var clientHeight=document.documentElement.clientHeight;
    var clientWidth=document.documentElement.clientWidth;

    function randomNum(size){
        return Math.floor(Math.random()*(size-160+1));
    }

    obj.style.top=randomNum(clientHeight)+"px";
    obj.style.left=randomNum(clientWidth)+"px";

    var y=parseInt(obj.style.top);
    var x=parseInt(obj.style.left);
    var flagX=false;
    var flagY=true;

    function moveY(){
        if(flagY){
            y++;
            if(y>clientHeight-160){
                flagY=false;
            }
        }else{
            y--;
            if(y<0){
                flagY=true;
            }
        }
        obj.style.top=y+"px";
    }

    function moveX(){
        if(flagX){
            x++;
            if(x>clientWidth-160){
                flagX=false;
            }
        }else{
            x--;
            if(x<0){
                flagX=true;
            }
        }
        obj.style.left=x+"px";
    }

    window.onresize=function(){
        clientHeight=document.documentElement.clientHeight;
        clientWidth=document.documentElement.clientWidth;    }

    function creatTimer(){
        timer=window.setInterval("moveY(),moveX()",10);
    }

    creatTimer();
</script>
</body>
</html>

时间： 2024-07-30 03:08:15

漂浮效果的相关文章

全屏漂浮效果

自己写的一个满屏漂浮JS效果很土的一个效果,在互联网上感觉消失了好久了,但是最近在做一个项目的时候,又要用到,临时找还找不到,就写了一个,记录于此以防后用 <script type="text/javascript"> $(function () { //浮动图片 var floatImg = $("#img1"); floatImg.css("position", "absolute"); var imgW =

jquery实现图片漂浮效果

$(window).load(function(){ function moveRocket(){ $("#float").animate({'left':'+=100'},5000).delay(1000) .animate({'left':'-=100'},5000,function(){ setTimeout(moveRocket,1000); }); }; moveRocket(); });

Unity物体上下反复漂浮效果

using UnityEngine; using System.Collections; // 主界面的开始按钮使用该脚本,控制上下来回浮动 public class Floating : MonoBehaviour { float radian = 0; // 弧度 float perRadian = 0.03f; // 每次变化的弧度 float radius = 0.8f; // 半径 Vector3 oldPos; // 开始时候的坐标 // Use this for initializ

jquery实现的让图片在网页的可视区域里四处漂浮的效果

本文分享给大家一个用jquery开发的图片漂浮效果. jquery图片漂浮效果,常见的就是网页里四处漂来漂去的广告了,漂到边缘时还会反弹和拐弯. 下面来看具体的代码,先看要实现漂亮效果的这个jquery插件的源码: (function($){ $.fn.adFloat=function(options){ return new AdFloat(this,options); } var AdFloat=function(element,options){ this.element=$(elemen

JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

基于JavaScript代码实现随机漂浮图片广告,javascript图片广告在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name

利用三角函数实现按钮上下漂浮

实现一个按钮的上下漂浮效果,我们通常会想到animation 和 itween来实现. 这次我们来使用三角函数实现如图: 代码实现: using UnityEngine; using System.Collections; public class Demo : MonoBehaviour { private float radian = 0; //弧度 public float perRadian = 0.02f; //增加的弧度,可以控制上下移动的速度 public float rad

动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成前面的话前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果漂浮的白云 [效果演示] [简要介绍] 漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果.远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果 [主要代码] .box{ position: relative; height: 300px; width: 500px;

用CSS+Jquery实现一个漂浮的窗体

一.项目需求: 实现一个用于网站主页面从窗体左上角开始飘到右下角之后又飘到右上角十秒之后消失的效果. 二.需求分析: 首先应当想要漂浮的内容放在一个容器内,也就是一个DIV,设计它的样式,不管是背景图片还是文字,甚至是一段多媒体视频等. 其次要想实现漂浮这个DIV就不能处于文档流中否则因为它一定会收到其他HTML内元素的影响而不能自由移动.漂浮的本质就是窗体中位置的改变,并且这种改变不能在瞬间完成而是可以预定时间完成转移. 再次在DIV移动位置过程中当鼠标经过时应停止移动