<!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技术实现图片浮动层效果，包括原理、实现步骤及示例代码。 首先，我们需要了解浮动层的基本概念。浮动层，也称为漂浮窗口或弹出层，是在网页上创建的一种可移动、可隐藏的...
在实现图片浮动效果时，我们通常会利用JavaScript的定时器函数（如`setInterval`或`setTimeout`）来定期改变图片的位置，使图片看起来像是在浮动。同时，还可以结合CSS来控制图片的样式，如大小、透明度等，以达到更...
在实现图片浮动层效果时，CSS用于设定图片的初始状态，如位置、透明度等。同时，CSS3引入的过渡（transition）和动画（animation）属性可以与jQuery结合，创建平滑的视觉效果。例如，通过设置`transition: opacity ...
- `position`属性：实现图片浮动的关键是CSS的`position`属性。它可以设置为`relative`、`absolute`或`fixed`，以控制元素相对于其正常位置或父元素的位置。在浮动效果中，`absolute`常被用来让图片相对于容器进行...
下面，我们将详细探讨这些技术以及它们在实现图片浮动效果中的应用。 首先，JavaScript是一种轻量级的编程语言，主要用于网页的客户端脚本。在淘宝网的场景下，JS主要负责动态行为的控制，如图片的加载、位置更新、...
在本文中，我们将深入探讨如何使用Apache POI库在DOCX文档中实现完美的文本替换以及在指定位置插入图片，让图片浮于文字上方。Apache POI是一个流行的Java库，用于处理Microsoft Office格式的文件，包括DOCX。我们将...
下面我们将详细探讨如何在Android中实现图片的浮动拖拽效果。 ### 1. 自定义浮动工具类(MoveImage) 首先，我们需要创建一个自定义的`ImageView`子类，我们称之为`MoveImage`。在这个类中，我们将处理触摸事件，...
现在，我们用jQuery编写JavaScript代码来实现图片放大特效。主要步骤如下： 1. 首先，我们需要在鼠标进入图片（hover）时显示浮动层，并放大图片。这可以通过`.hover()`方法实现，它接受两个函数参数，分别对应鼠标...
同时，为了不使文本因图片浮动而产生混乱，可能使用了清除浮动（`clear`）属性，如`clear:both`，来确保后续元素正确排列。 标签“浮动图片”表明这个压缩包可能包含与实现浮动图片效果相关的代码示例，教程或库。...
在本项目中，jQuery被用来监听鼠标的滑过事件（hover），当用户将鼠标悬停在图片上时，jQuery会触发相应的事件处理函数，实现图片的浮动效果。此外，jQuery还简化了DOM元素的选择和操作，使得代码更加简洁。 CSS3是...
这个项目可能包含了一个或多个CSS样式用于创建边框和阴影效果，以及一个jQuery脚本文件来实现图片的浮动效果。 描述中的“jquery图片边框阴影浮动”进一步确认了这个项目的核心特性，即图片在页面上不仅有边框和...
在实现图片浮动效果的实例中，首先通过document.getElementById()方法获取到目标div元素。该方法是DOM操作中非常常用的方法，它允许我们通过元素的ID来获取页面上的一个DOM节点。有了这个DOM节点，我们就可以进一步...
接下来，我们利用JavaScript来实现图片的浮动效果。在JS中，我们可以访问并修改DOM元素的样式属性，如`left`和`top`，来改变元素在页面上的位置。下面是一个简单的例子： ```javascript var imgElement = document....
在压缩包内的“淘宝网图片浮动广告代码”文件中，应该包含了实现这一功能的完整HTML、CSS和JavaScript代码示例。通过学习和理解这段代码，你可以掌握如何利用JQuery、div+css和网页特效来创建动态、吸引人的浮动广告...
在本文中，我们将深入探讨如何利用HTML和CSS实现图片的浮动广告效果。 首先，HTML部分是构建页面结构的基础。在HTML代码中，你需要创建一个`<div>`元素来作为广告容器，然后在这个容器内嵌入图片。例如： ```html ...
在网页设计中，实现页面图片随机浮动效果是一种常见的动态视觉表现手法，它可以为网站增添趣味性和活力。这种效果通常是通过JavaScript或CSS3来实现的，让图片在页面上以随机的位置和速度移动，给人一种生动的感觉。...
例如，可以使用CSS3的`transform`和`transition`属性来实现图片在滚动到特定位置时的弹性运动。在JavaScript中，可以监听滚动事件，通过计算元素相对于视口的位置，动态改变图片的样式，模拟出反弹的效果。这种方式...
jQuery浮动图片广告代码是一种网页设计技术，用于在网站页面上实现动态漂浮的图像广告。这种广告形式可以吸引用户的注意力，提高广告的可见性和点击率。以下是对这一技术的详细解释： 1. **jQuery库**：jQuery是一...
ASP浮动图片上传是一种在网页应用中实现图片上传功能的技术，主要涉及到服务器端的处理和前端交互。在这个场景中，用户可以上传图片至服务器，并且在后台进行管理，包括添加、删除、修改和查询等基本操作。这个技术...
在IT行业中，图片浮动显示是一种常见的视觉效果，尤其在网页设计、软件开发或者广告展示等领域。这个场景下，我们讨论的是如何在VC++环境中实现图片按照预设路径在当前窗口上进行漂浮显示。让我们深入了解一下相关的...