js实现的简单图片浮动效果完整实例


Posted in Javascript onMay 10, 2016

本文实例讲述了js实现的简单图片浮动效果。分享给大家供大家参考,具体如下:

利用window对象,实现一个图片的浮动效果

1、现有一个广告div,就是我们要控制的,它的起始点(0,0)

2、设定横向和纵向的速度

3、控制广告div移动

  1)广告div是否达到边界
  2)如果到达边界后,我们设置速度反向移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
 position:absolute;
}
img{
 position:absolute; 
 filter:alpha(opacity=100);/* IE */
 -moz-opacity:1;/* Moz + FF */
 opacity: 1;/* 支持CSS3的浏览器(FF 1.5也支持)*/
}
</style>
</head>
<body>
<div id="divimg"><img src="123.jpg" width="100" height="150"></div>
<script language="JavaScript" type="text/javascript">
 //获取图片所在的div对象
 var img=document.getElementById("divimg");
 //设置div 左上角坐标 ,起始点的坐标
 var x=10,y=10;
 //设置图片的行进速度
 var xSpeed=2,ySpeed=1;
 //设置图片的最大浮动的高度和宽度
 var w=document.documentElement.clientWidth-110,h=document.documentElement.clientHeight-160;
 function floatimg(){
  //比较图盘是否到达边界 
  //如果到达边界以后,我们控制图片改变方向
  if(x>w||x<0){ xSpeed= -xSpeed; }
  if(y>h||y<0){ ySpeed= -ySpeed; }
  //如果没有达到边界,设置图片的左上角的坐标
  //设置坐标值 起始坐标+速度
  x+=xSpeed;
  y+=ySpeed;
 img.style.top=y+"px";
 img.style.left=x+"px";
 //延迟调用函数floatimg(),每个40毫秒调用一次
 setTimeout("floatimg()",40);
 }
 floatimg();
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery的倒计时插件代码
May 07 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 #Javascript
jQuery选择器基础入门教程
May 10 #Javascript
jquery实现图片上传前本地预览功能
May 10 #Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 #Javascript
基于jquery实现三级下拉菜单
May 10 #Javascript
jQuery Dialog对话框事件用法实例分析
May 10 #Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
You might like
PHP文件下载类
2006/12/06 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
几个数据库方面的面试题
2016/07/01 面试题
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
什么是命名空间(NameSpace)
2015/11/24 面试题
四川成都导游欢迎词
2014/01/18 职场文书
给面试官的感谢信
2014/02/01 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
工作简报范文
2015/07/21 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis