图片文字浮动代码.txt
根据提供的文件信息,我们可以分析出该文件主要涉及的是利用JavaScript实现网页上图片和文字的滚动效果。接下来将详细解析文件中的各个部分,并提取出相关的知识点。 ### 一、标题:“图片文字浮动代码” 该标题表明了这段代码的主要功能是实现图片和文字在网页上的浮动效果。这种效果通常用于吸引用户的注意力或者作为网站设计的一种动态元素。 ### 二、描述 描述中重复提到“用于图片、文字滚动”,这进一步确认了文件的主要功能。同时,“和大家多多交流”这部分可能暗示着这段代码是为了社区分享而创建的,作者希望与其他开发者或用户进行交流。 ### 三、标签:图片特效,文字特效,滚动 这些标签清晰地指出了代码的功能方向: 1. **图片特效**:涉及到图片在网页上的动态展示方式。 2. **文字特效**:指的是文字在网页上的动态显示效果。 3. **滚动**:具体到本段代码,是指图片和文字在网页上以滚动的形式展示出来。 ### 四、部分内容 #### JavaScript 代码分析: 1. **变量声明**:`var specialcode`,这里定义了一个变量`specialcode`,用于存储包含HTML代码的字符串。这些HTML代码被用于创建一个包含表格和动态位置属性的div元素。 2. **动态插入HTML**:`document.write(specialcode)`,通过`document.write`函数将`specialcode`变量中的HTML代码写入页面。 3. **动态定位**:代码中使用了`position: absolute`和`top`、`left`等CSS属性来控制元素的位置,使其能够在网页上移动。 4. **滚动效果实现**: - `lastScrollY = 0;`:初始化滚动位置记录变量。 - `function heartBeat0() {...}`:定义了一个名为`heartBeat0`的函数,该函数会根据当前滚动条的位置与上一次记录的位置之间的差值计算元素的移动距离。 - `document.all.searchspe.style.pixelTop += percent;`:根据计算出来的百分比改变元素的`pixelTop`属性,从而实现滚动效果。 - `window.setInterval("heartBeat0()", 1);`:设置定时器每隔一段时间就执行一次`heartBeat0`函数,以实现连续的滚动效果。 ### 总结 通过以上分析可以看出,这段代码主要实现了网页上图片和文字的滚动效果。它通过动态插入HTML代码并结合JavaScript控制元素的位置,实现了一种简单的滚动动画效果。这种方法在早期的网页设计中较为常见,可以用来制作导航栏、广告位或其他需要动态效果的区域。然而,随着Web技术的发展,现在更多的会采用CSS3的动画效果或者更高级的JavaScript库来实现类似的效果,因为它们提供了更好的性能和兼容性支持。
<script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: <script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 180px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='border-left:1px solid #2E6287;border-top:1px solid #2E6287;border-right:1px solid #2E6287;font-size:12px;color:#ffffff; border-bottom-color:#2E6287; border-bottom-width:1px'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE><table border='1' width='150' height='500' bordercolor='#2E6287'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat0()",1);</script>
右栏浮动广告
<script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE><table border='1' width='150' id='table1' bordercolor='#2E6287' height='500'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat0()",1);</script>
左栏固定广告
<DIV id=searchspe style='Z-INDEX: 100; left: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE>广告内容</DIV>
右栏固定广告
<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 50px;'><TABLE cellSpacing=0 cellPadding=0 width=360 style='border-left:1px solid #333333;border-top:1px solid #333333;border-right:1px solid #333333;font-size:12px;color:#ffffff'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE>广告内容</DIV>
漂浮广告代码
<div id="img" style="position:absolute;; width: 200; height: 151">广告内容</div>
<script LANGUAGE="JavaScript">
var xPos = 20;
var yPos = 10;
img.style.left= xPos;
img.style.top = yPos;
var step = 1;
var delay = 30;
var width,height,Hoffset,Woffset;
var y = 1;
var x = 1;
var interval;
img.visibility = "visible";
function changePos()
{
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
if (y)
{
yPos = yPos + step;
}
else
{
yPos = yPos - step;
}
if (yPos < 0)
{
y = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset))
{
y = 0;
yPos = (height - Hoffset);
}
if (x)
{
xPos = xPos + step;
}
else
{
xPos = xPos - step;
}
剩余6页未读,继续阅读
- kakaxisese2013-08-28很好 搜集了不错的浮动代码
- 粉丝: 1
- 资源: 11
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 技术资料分享ps2技术参考很好的技术资料.zip
- 技术资料分享PAM3101DAB28很好的技术资料.zip
- 技术资料分享OV7670很好的技术资料.zip
- xilinx bram ip code
- 技术资料分享OV7670 software application note很好的技术资料.zip
- OmniVision Technologies Seril Camera Control Bus(SCCB)
- 技术资料分享nRF24L01中文说明书很好的技术资料.zip
- 技术资料分享NRF24l01模块说明书很好的技术资料.zip
- 技术资料分享NRF24L01功能使用文档很好的技术资料.zip
- 技术资料分享nRF24L01P(新版无线模块控制IC)很好的技术资料.zip