<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<body >
<div id="moveLayer" style="position:absolute;
left:24px;
top:256px;
width:81px;
height:54px;
z-index:4;"/><a href="http://www.baidu.com" target="_blank"><img src="D:\\Program Files\\Tencent\\QQ\\85839593\\QQPhoto\\9284595_1.jpg" width="80" height="52" /></a></div>
<script language="javascript">
var xpos=0;//x轴的坐标像素
var ypos=0;//y轴的坐标像素
var xon=0;//控制在x轴上的方向
var yon=0;//控制y轴上的方向
var step=0.3;//移动速度
function aa(){alert('aa');}
function randomMove()
{
var width=document.documentElement.offsetWidth;//浏览器宽度
// alert(width);
var height=document.documentElement.offsetHeight;//浏览器高度
//var width=document.documentElement.offsetWidth;//浏览器宽度 (这里用offsetWidth也行,但在dreamweaver中必须用documentElement,不能用body!因为dreamweaver所做//的是xhtml,而不是html)
//var height=document.documentElement.offsetHeight;//浏览器高度
var layerWidth=document.getElementById("moveLayer").offsetWidth;//层宽度
var layerHeight=document.getElementById("moveLayer").offsetHeight;//层高度
document.getElementById("moveLayer").style.pixelTop=ypos+document.documentElement.scrollTop;
//随滚动条移动(同时也刷新层移动后的位置)(如果div对象中没有style样式的话,将不会移动.因为找不到document.getElementById("moveLayer").style.这种style样式!)
document.getElementById("moveLayer").style.pixelLeft=xpos+document.documentElement.scrollLeft;//随滚动条移动
//if(moveLayer.onmouseover){return false;}
if(xon==0)//在x方向上移动(右移)
{
xpos+=step;
}
else//左移
{
xpos-=step;
}
if(xpos<0)
{
xon=0;
xpos=0;
}
else if(xpos>=(width-layerWidth))//如果碰到浏览器的右端时,要左移
{
xon=1;
xpos=(width-layerWidth);
}
if(yon==0)//y轴上向下移动
{
ypos+=step;
}
else//y轴向上移动
{
ypos-=step;
}
if(ypos<0)//当图片遇到浏览器上边框时要转动方向
{
yon=0;
ypos=0;
}
else if(ypos>=(height-layerHeight))//遇到下边界时要上移
{
yon=1;
ypos=(height-layerHeight);
}
moveLayerStop=setTimeout("randomMove()",30);
}
moveLayer.onload=randomMove();
</script>
</body>
</HTML>
分享到:
相关推荐
jQuery CSS图片浮动层效果
完美市县了DOCX格式的模板文字替换与插入浮于文字上方的图片。
jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示 jquery hover图片放大特效鼠标滑过图片浮动层变大显示
这是一款使用jQuery和css3制作的鼠标滑过图片效果。该鼠标滑过效果中所有图片被放到网格中,鼠标hover其中一张图片时,相邻的图片也会浮动起来,效果十分炫酷。
主要介绍了Android的图片在界面随意拖动的功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
本资源是关于网页图片的浮动实现,主要有两种实现方式:1)z字形实现 2)反弹实现;
jQuery+CSS实现图片放大浮动层带关闭按钮
jquery图片边框阴影浮动
首页图片浮动焦点图代码
jQuery实现的适用于图片、链接的浮动提示信息框
实现后台图片的上传,其中还包括增删改查的操作。
jquery实现右侧固定浮动板块代码.zip
jquery浮动对联图片广告制作一个侧面浮动图片广告特效,类似滚屏效果的图片广告。jQuery下载。
导航条原本正常显示,可能不一定在顶部位置...从而实现固定浮动效果.================ 顶部浮动时,需要jquery的支持,注意引用.============== 共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
主要介绍了js实现的简单图片浮动效果,以完整实例形式分析了javascript实现图片定时漂浮移动功能的方法,涉及javascript定时函数与数值动态运算相关技巧,需要的朋友可以参考下
图片信息的浮动显示的效果,在网页应用中还是比较流行的,下面为大家详细介绍下使用jquery是如何实现的,喜欢的朋友可以参考下
一些JS实现效果,如浮动广告,滚动图片,文字变化等。
介绍了js图片随机不定向浮动的实现代码,有需要的朋友可以参考一下
1)实现缩放图片:加载图片时根据屏幕缩放图片;... 2)实现图片的翻转、旋转; 3)实现图片的放大、缩小、还原初始大小; 4)实现图片的拖拽、滚轮放大缩小图片; 5)浮动控制按钮对图片进行控制(div)