滚动链接导航

最新推荐文章于 2024-08-26 10:39:51 发布
最新推荐文章于 2024-08-26 10:39:51 发布
阅读量290 收藏
点赞数
分类专栏： 脚本页面导航 文章标签： function div .net 网络 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hailang123_love/article/details/5778159
版权


脚本说明:

把如下代码加入<body>区域中

  <script>

var scrollerwidth=115

var scrollerheight=131

var scrollerbgcolor='#FFFFFF'

//3000 miliseconds=9 seconds

var pausebetweenimages=4000

 

var slideimages=new Array()

slideimages[0]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://fsnet.yes8.com/" target="_blank">网络特区</a><br><br><a href="http://go.163.com/~xiaofengyun/" target="_blank">风 云 居</a>'

slideimages[1]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

slideimages[2]='<a href="http://www.yahoo.com.cn" target="_blank">中文雅虎</a><br><br><a href="http://www.263.net" target="_blank">首都在线</a><br><br><a href="http://fsnet.yes8.com/" target="_blank">网络特区</a><br><br><a href="" target="_blank">你的链接</a>'

slideimages[3]='<a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a><br><br><a href="" target="_blank">你的链接</a>'

 

 

if (slideimages.length>1)

i=2

else

i=0

 

function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=4){

tlayer.top=0

setTimeout("move1(tlayer)",pausebetweenimages)

setTimeout("move2(document.main.document.second)",pausebetweenimages)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=4

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(slideimages[i])

tlayer.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}

 

function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=4){

tlayer2.top=0

setTimeout("move2(tlayer2)",pausebetweenimages)

setTimeout("move1(document.main.document.first)",pausebetweenimages)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=4

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(slideimages[i])

tlayer2.document.close()

if (i==slideimages.length-1)

i=0

else

i++

}

}

 

function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",pausebetweenimages)

setTimeout("move4(second2)",pausebetweenimages)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=4

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}

 

function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",pausebetweenimages)

setTimeout("move3(first2)",pausebetweenimages)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=4

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=slideimages[i]

if (i==slideimages.length-1)

i=0

else

i++

}

}

 

function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

}

else if (document.layers){

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

}

 

window.οnlοad=startscroll

 

if (document.layers)

document.write(slideimages[0])

 

if (document.layers)

document.write(slideimages[1])

 

if (document.layers)

document.write(slideimages[0])

 

if (document.all){

document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')

document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.write(slideimages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

document.write(slideimages[1])

document.writeln('</div>')

document.writeln('</div>')

document.writeln('</span>')

}

</script>

 

hailang123_love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery向上间歇滚动代码
03-20
NULL 博文链接：https://yuanjianhang.iteye.com/blog/794284
javascript经典特效---滚动链接导航.rar
01-07
"滚动链接导航"是JavaScript在网页设计中的一种常见特效，主要用于提升用户在浏览长页面时的导航效率。下面将详细阐述这一特效的实现原理和相关知识点。 首先，滚动链接导航的基本思想是：当用户滚动页面时，导航...
JS——间歇循环滚动
lannieZ的博客
09-25 373
<body> <div id="recordImg"></div> </body> <script> var StandArr = [ { user: '用户152****6983', avatar: 'avatar.jpg', money: '1' }, { user: '用户152****6983', avatar: 'avatar.jpg', money: '2', },
一些有用的javascript代码(5)
linglv的专栏
01-13 704
垂直滚动块var scrollerwidth=115var scrollerheight=131var scrollerbgcolor=#FFFFFF//3000 miliseconds=9 secondsvar pausebetweenimages=4000var slideimages=new Array()slideimages[0]=http://www.yahoo.com.cn";
js实现间歇滚动内容
SimbaDan的专栏
02-26 2630
js实现滚动内容从yahoo上提取的,效果见 http://music.cn.yahoo.com/search?pid=ysearch&p=ustonet&mimetype=all&source=ysmi_hsch_r 即在搜索不到内容（抱歉，无法找到与“ustonet”相符的音乐搜索结果。）时，右边提示的“别人在搜什么”。觉得这个比较适合手头正在做的新闻系统，所以借用代码了。move.js
文字间歇滚动---小程序为例
assassin_0302的博客
04-27 176
如下：wxml中的list里面包含很多列表item，每次显示2个，循环滚动，每次滚动间隔3s transition: transform {{ translate_y == 0 ? 0 : '.5s' }}; 当translate_y 为0的时候，回到第一个列表，为了防止回到第一个列表时，滚动很多条到第一条的的效果，过渡置为0即可 <view class="group-list" style="transition: transform {{ translate_y == 0 ? 0 : '.
js 特效 html 特效 滚动链接导航
06-14
js 特效 html 特效 滚动链接导航 js 特效 html 特效 滚动链接导航
jquery网页浮动导航点击锚点链接屏幕滚动.zip
07-11
`jquery网页浮动导航点击锚点链接屏幕滚动`这个项目主要关注两个方面：浮动导航的实现和锚点链接与屏幕滚动的交互。接下来我们将详细讨论这两个关键知识点。 1. **浮动导航的实现** 浮动导航的实现主要通过CSS和...
jQuery全屏页面滚动导航切换效果
06-05
**jQuery全屏页面滚动导航切换效果详解** 在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的...
Javascript实现页面滚动时导航智能定位
10-19
这种功能允许导航菜单中的链接根据用户滚动的位置自动高亮显示，增强了用户体验。 首先，我们需要了解页面的基本结构。在示例中，页面包含一个`.container`，内含一个`.wrapper`，用来包裹各个`.section`模块。每个...
JavaScript 中滚动的无缝滚动和间歇无缝滚动实现
无根的浮萍
08-27 733
在HTML中滚动可以使用 标签进行实现，然后我们可以使用其参数进行设置滚动的方式和滚动的样式。 1. behavior 滚动的方式：     alternate : 表示在两端之间来回的滚动，     scroll ： 表示 由一端滚动到另外一端，会重复     slide： 表示由一端滚动到另一端，不会重复     2. direction 滚动的方向是down，up，left，r
间歇滚动公告效果
DreamFJ的博客
09-11 683
js: &lt;script&gt; var area = document.getElementById("area"); // 要滚动的区域 var perScrollHeight = 24; // 每次滚动的高度 area.innerHTML += area.innerHTML; // 为了实现循环滚动不出现空白，这里复制一段 ...
纯css3实现文字间歇滚动效果
weixin_30747253的博客
09-17 587
场景： 假设有4条数据或者标题，视口中只显示两条，采用每次向上滚动一条数据来展示所有的数据。效果如图： 用JavaScript也很容易实现，但是需要操作DOM，可以参考这篇博客。考虑到项目中经常使用Vue，已经很少操作DOM了，所以考虑最好通过CSS来实现，可以通过Vue给模板元素动态绑定class来实现相同的功能，如果需要考虑css3兼容性的话，可以去使用JavaScript去完成。 ...
HTML-间歇循环滚动
@point
12-09 1114
实现滚动播放 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt; 间歇循环滚动&lt;/title&gt; &lt;style&gt; #box{ height:240px; width:300px; marg
无缝滚动与间歇性无缝滚动
前行的博客
04-03 679
1.横向无缝滚动html结构：&lt;div class="banner-container"&gt; &lt;div class="banner_wrap"&gt; &lt;div class="img_wrap"&gt; &lt;img src="images/banner1.jpg" alt=""&gt; &lt;
实现无缝滚动与间歇性无缝滚动
王朝虎的博客
02-06 8907
这篇blog是使用html与js实现无缝滚动与间歇性无缝滚动，首先，先看一下效果图：     这种效果，在网站中经常见到，下面，我们实现这个效果。首先，这里有以下知识点：setInterval("表达式",周期时间);    这里给大家贴一张w3c上对setInterval的介绍，用法都很清楚： clearInterval(id_setInterval);setInterval()与clearI
JS实例——间歇循环滚动（纵向）
One1Bean的博客
06-22 1595
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="keywords" content="关键字
通过ClearScript V8在.NET中执行复杂JavaScript逻辑
最新发布
ip16yun的博客
08-26 540
在现代网络开发中，爬虫技术已成为数据采集和分析的核心手段之一。通常，爬虫程序需要处理复杂的JavaScript逻辑，尤其是在面对动态加载的网页时。这时，传统的HTTP请求和HTML解析已经无法满足需求。为了应对这些挑战，我们可以在.NET中集成JavaScript引擎，通过ClearScript V8库执行复杂的JavaScript逻辑，从而更有效地抓取动态内容。
react侧边栏滚动导航
06-02
最后，在React中实现滚动事件，以便在用户滚动页面时，高亮显示当前所在的导航链接。 下面是一个简单的示例代码，可以让你更好地理解如何实现侧边栏滚动导航。 ``` import React, { useState, useEffect } from '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值