JavaScript实现图片漂浮

代码如下：

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">    /*悬浮框  */                       #float{             position: absolute;             z-index: 1;         }           /*图片大小*/                        #floatImg {             width: 150px;                           }
</style>
</head>
<body>        <div id="float"><img id="floatImg" alt="图片未找到" src="m2.jpg"></div>
</body>
<script type="text/javascript">//定义全局变量        var moveX = 0; //X轴方向上移动的距离        var moveY = 0; //Y轴方向上移动的距离        var stepX = 5; //图片X轴移动的速度     var stepY = 6; //图片Y轴移动的速度     var directionX = 0; //设置图片在X轴方向上的移动方向   0:向右  1:向左     var directionY = 0; //设置图片在Y轴方向上的移动方向   0:向下  1:向上         function changePos() {          var img = document.getElementById("float"); //获得图片所在层的ID         var height = document.documentElement.clientHeight; //浏览器的高度           var width = document.documentElement.clientWidth; //浏览器的宽度         var imgHeight = document.getElementById("floatImg").height; //飘浮图片的高度            var imgWidth = document.getElementById("floatImg").width; //瓢浮图片的宽度          //设置飘浮图片距离浏览器左侧位置           img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px"; //设置飘浮图片距离浏览器右侧位置           img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px";           //设置图片在Y轴上的移动规律         if(directionY == 0) {                         moveY += stepY;       //飘浮图片在Y轴方向上向下移动        } else {                                moveY -= stepY;    //飘浮图片在Y轴方向上向上移动        }           if(moveY < 0) {              //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动              directionY = 0;                moveY = 0;         }           if(moveY > (height - imgHeight)) {       //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动   directionY = 1;                moveY = (height - imgHeight);          }           //设置图片在X轴上的移动规律         if(directionX == 0) {             moveX += stepX;           } else {                moveX -= stepX;            }           if(moveX < 0) {              //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动           directionX = 0;                moveX = 0;         }           if(moveX > (width - imgWidth)) { //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移    directionX = 1;                moveX = (width - imgWidth);            }       }       setInterval("changePos()",50);
</script>
</html>

JavaScript实现图片漂浮相关推荐

图片漂浮代码javascript
自己做的一个图片漂浮代码javascript,您可以自己调节速度.  Code: <textarea rows="500" cols=&qu ...
php js漂浮,JavaScript_js实现图片漂浮效果的方法，本文实例讲述了js实现图片漂 - phpStudy...
js实现图片漂浮效果的方法本文实例讲述了js实现图片漂浮效果的方法.分享给大家供大家参考.具体分析如下: 描述:打开网页就看到不停在飘动的图片,点击连接到其他页面:起到着重强调的效果! test # ...
pic32linux,Linux_页面中图片漂浮 Floating picⅢ 的制作，最新的图片漂浮脚本，这次的 - phpStudy...
页面中图片漂浮 Floating picⅢ 的制作最新的图片漂浮脚本,这次的变化在于它不是单纯的在某个页面飘动,而是会垮页面飘动,也就是说你打开别的页面,它依然会存在,优先级是第一的,而且如果最小化 ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
JavaScript导出图片和数据到Excel
JavaScript导出图片和数据到Excel 以下方法可以利用json数据将图片地址生成图片导出到Excel,同样也可以将数据导出到Excel.解决网上许多方法关于导出图片到Excel却无法让图片在 ...
JavaScript实现图片旋转构成3D圆环代码
代码简介: 很炫的图片展示特效,由一组图片构成一个3D的圆环状,并自动旋转,鼠标放到某一图片上会自动停止,JavaScript 的功能真够强大,你是不是后悔没有学好JS呢? 代码内容: View Co ...
javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
怎样在JavaScript添加图片
想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值:然后使用appendChild()方法将img元素 ...
JavaScript改变图片大小
JavaScript改变图片大小 <!DOCTYPE html><html lang="en"><head><meta charset=& ...

JavaScript实现图片漂浮

JavaScript实现图片漂浮相关推荐

最新文章

热门文章