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 相关文章推荐
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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正则表达匹配中文问题分析小结
2012/03/25 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
浅谈Python3中print函数的换行
2020/08/05 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
入党自我评价范文
2014/02/02 职场文书
单位消防安全责任书
2014/07/23 职场文书