js 图片随机不定向浮动的实现代码

这篇文章介绍了js图片随机不定向浮动的实现代码，有需要的朋友可以参考一下
 
复制代码 代码如下:

//很有趣的浮动哦，不用太多代码，和大家分享下
<html>
<head>随机浮动
<style type="text/css">
#divimg{
/*
对图片进行绝对定位
*/
position:absolute;
}
</style>
</head>
<body>
<div id="divimg">
<img src="../../resource/images/float.jpg" width="205" height="108">
</div>
<script language="javascript" type="text/javascript">
//获取图片的所有div对象
var divimg=document.getElementById("divimg");
//设置起始位置
var x=0,y=0;
//设置图片的前进速度
var xSpeed=8,ySpeed=2;
//设置图片浮动高度和宽度
var w=document.documentElement.clientWidth-205,h=document.body.clientHeight-108;
//alert(w);
function floatimg(){
//比较是否达到边界，如果到达边界以后就改变图片的方向为反向，如果未达到边界则继续向前
if(x<0||x>w) xSpeed=-xSpeed;
if(y<0||y>h) ySpeed=-ySpeed;
x+=xSpeed;
y+=ySpeed;
setTimeout("floatimg()",1000);
var n=divimg.style.top=Math.round(Math.random()*h)+"px";
var m=divimg.style.left=Math.round(Math.random()*w)+"px";
}
floatimg();
</script>
</body>
</html>

时间： 2025-01-20 13:22:33

js 图片随机不定向浮动的实现代码的相关文章

js 图片随机不定向浮动的实现代码_javascript技巧

复制代码 代码如下: //很有趣的浮动哦,不用太多代码,和大家分享下<html><head>随机浮动<style type="text/css">#divimg{/*对图片进行绝对定位*/position:absolute;}</style></head><body><div id="divimg"><img src="../../resource/images/fl

js图片向右一张张滚动效果实例代码_javascript技巧

先来张效果图 样式 复制代码 代码如下:         #div_left{float:left;width:60px;height:86px;}        #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}        #starScroll #contentScr

js 图片缩放（按比例）控制代码_图象特效

缩放代码: 复制代码 代码如下: 缩放代码: <script type="text/javascript"> //图片按比例缩放 var flag = false; function DrawImage(ImgD, iwidth, iheight) { //参数(图片,允许的宽度,允许的高度) var image = new Image(); image.src = ImgD.src; if (image.width > 0 && image.heig

js图片预加载示例_基础知识

js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

jquery输入数字随机抽奖特效的简单实现代码_jquery

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - </title><base target="_blank" />

jquery实现焦点图片随机切换效果的方法

 这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下:   代码如下: <!DOCTYPE html> <html lang="en"> <head&g

js图片延迟加载的实现方法及思路

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.   大概的实现方式是: 在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片. 然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来. 这 里比较麻烦地方是,如何计算i

JS json随机广告 前端优化

注意:[ ]符号在JavaScript中定义一个数组,{ }则定义一个对象 javascript随机数生成方法 1.使用内置的随机数发生方法: Math.random(); //该方法产生一个0到1之间的浮点数.Math.floor(Math.random()*10+1); //1-10 Math.floor(Math.random()*24);//0-23  2.基于时间,亦可以产生随机数: var now=new Date();  var number = now.getSeconds();

使用JS实现图片展示瀑布流效果的实例代码_javascript技巧

不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu