查看效果： http://www.leyikao.com
源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>安博中程乐易考</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="img" style="LEFT:20px; visibility:hidden;POSITION:absolute; TOP:20px;z-index:10000;"><a href="http://www.leyikao.com/t/beida/" target="_blank"><img src="http://www.leyikao.com/templets/default/Images/logobeida.jpg" width="127" height="46" border="0" style="cursor:pointer;"/></a></div>
<script language="javascript">
<!-- Begin
var xPos = 20;
var yPos = document.documentElement.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var img = document.getElementById("img");
img.style.top = yPos; function changePos() {
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
Hoffset=img.offsetHeight;
Woffset=img.offsetWidth;
img.style.left=xPos+document.body.scrollLeft+"px";
img.style.top=yPos+document.body.scrollTop+"px";
yPos = yPos + step*(yon?1:-1)
if(yPos<0) { yon=1; yPos=0; }
if(yPos>=(height-Hoffset)) { yon=0; yPos=(height-Hoffset); }
xPos = xPos + step*(xon?1:-1)
if(xPos<0) { xon=1; xPos=0; }
if(xPos>=(width-Woffset)) { xon=0;xPos=(width-Woffset); } }
function start() {
img.style.visibility="visible";
interval=setInterval('changePos()',delay);
img.onmouseover=function(){clearInterval(interval)}
img.onmouseout=function(){interval=setInterval("changePos()", delay)}
}
start();
// End -->
</script>
</body>
</html>
查看效果： http://www.leyikao.com
分享到：
相关推荐
通过以上分析可以看出，这段代码主要实现了图片在全屏范围内自由浮动的效果，同时通过CSS设置了图片的位置，并利用JavaScript动态调整其位置，使其可以在整个屏幕内移动。尽管没有直接涉及到图片透明度的设置，但...
本文将详细介绍如何使用JavaScript实现多种浮动广告效果，包括在线客服、浮动对联和全屏浮动等。 1. **在线客服浮动广告** 在线客服浮动广告通常设置在页面底部或右侧，当用户滚动页面时，广告会固定在屏幕边缘。...
这些窗口可以设置为始终位于最上方，即使在全屏应用或多个打开窗口之间切换，它们也会保持可见。这样的设计非常适合需要频繁参考或监视特定信息的用户，如开发者查看代码片段、设计师浏览颜色代码或者销售人员查看...
### 一、JavaScript 浮动 Div 的概念与实现 在网页设计中，浮动 Div 是指能够独立于页面其他元素自由移动的 Div 容器。通过 CSS 和 JavaScript 的结合使用，可以使 Div 元素在页面上自由移动，这种效果常用于弹出...
浮动条的设计可以分为多种类型，包括顶部固定、侧边固定、全屏浮动等。顶部固定是最常见的一种，常包含网站的Logo、主要菜单选项和搜索框等。侧边固定则常用于更复杂的布局，如多级导航或侧边工具栏。全屏浮动通常...
在JavaScript（简称JS）编程中，创建一个可移动、可关闭且带有灰化背景的浮动窗口是一项常见的需求，尤其在用户交互和提示信息显示时。这个功能可以使用户聚焦于特定的对话框，同时防止他们在处理关键操作时被其他...
在网页设计中，"左右全屏背景幻灯片(右侧浮动登陆框)"是一个常见的功能，它结合了视觉吸引力和用户体验的元素。这个设计通常应用于网站的首页，为用户提供动态的视觉体验，同时方便他们快速登录或注册。接下来，我们...
浮动广告可以是全屏、半屏或小窗口形式，通过JavaScript控制其运动轨迹和行为。 **4. 源代码使用**： 在“右联广告.htm”和“左联浮动广告.htm”这两个文件中，包含了实现这些广告效果的具体HTML和JavaScript代码。...
- 对于复杂的交互，可以使用JavaScript库或框架，如jQuery、React或Vue.js，它们提供了更高级的功能和优化过的API。 6. **优化与兼容性**：在实现这一效果时，要考虑不同浏览器的兼容性问题，尤其是对于老旧版本的...
- **多种类型**：插件通常支持多种浮动层类型，如下拉层（常用于下拉菜单）、模态窗口（全屏遮罩，用于阻止用户与背景交互）等。 - **动画效果**：提供平滑的动画过渡，如淡入淡出、滑动等，增强用户体验。 - **...
基于标签“JS特效-全屏广告”，我们可以推断这个代码示例主要关注JavaScript编程，特别是与用户交互相关的特效部分。全屏广告是网络广告的一种形式，它利用JavaScript的能力在用户界面上占据整个屏幕，从而吸引用户...
在JavaScript中实现全屏飘动效果，主要是通过CSS和JavaScript的结合来完成的。这个效果通常用于网页的广告展示或者动态背景，可以吸引用户的注意力，提升用户体验。下面将详细讲解如何实现这一效果。 首先，我们...
4. 全屏效果可能会影响其他页面元素，如浮动元素、绝对定位元素等，确保在全屏模式下仍能正常显示。 综上所述，JavaScript全屏效果的实现涉及到浏览器API的使用、兼容性处理以及与页面其他元素的协调。通过合理的...
通过以上分析，我们可以看到这段代码通过简单的HTML和JavaScript实现了基本的全屏漂浮广告功能，同时也提供了一定程度的用户交互。对于想要快速实现类似功能的开发者来说，这段代码具有很好的参考价值。
全屏图片的放大效果通常通过JavaScript实现。可以监听图片的点击事件，当用户点击图片时，将其放大至新的尺寸，同时可能需要设置一个新的背景色或者透明度以增加视觉效果。同时，需要考虑如何恢复原状，比如添加一个...
首先，jQuery Lightbox是基于jQuery的一个弹出图片查看器，它将网页上的图片链接转化为浮动的层叠窗口，用户可以在不离开当前页面的情况下查看大图。这种效果通常用于图片相册或画廊，使得图片展示更为直观和...
浮动层，又称为模态窗口或对话框，是在网页主内容上覆盖的一个半透明或者全屏的元素，用于显示特定的信息或执行特定的操作，如登录、注册、确认等。这种设计方式可以避免用户在多页面间跳转，保持用户操作的连贯性。...
/* 全屏高度 */ background-color: #f1f1f1; /* 自定义背景色 */ } ``` 结合这两点，我们可以创建一个既可拖动又可固定的浮动DIV。当用户拖动该DIV到页面的某个位置时，我们可以通过JavaScript改变其CSS的`...
之前在csdn传了一份，但是后来发现里边有些乱，且账户权限有点低无法删除，只好修改后... js代码，在屏幕中间浮动，可以手动关闭，也会自动关闭。 用途比较广泛，图片，文字，视频都可以。 有什么不合适的可以自己调。
3. **JavaScript增强**：虽然仅使用CSS可以实现简单的浮动效果，但若需要更复杂的交互（如随机移动、碰撞检测），则需要JavaScript的参与。例如，我们可以使用`setInterval`或`requestAnimationFrame`定时更新图片的...