zoukankan
html css js c++ java
javascript 滚动+停留 代码
HTML部分
<
style
type
="text/css"
>
<!--
ul
{
}
{
height
:
230px
;
overflow
:
hidden
}
-->
</
style
>
<
ul
id
="rolltxt"
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称1
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称2
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称3
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称4
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称5
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称6
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称7
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称8
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称9
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称10
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称11
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称12
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称13
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称14
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称15
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称16
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称17
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称18
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称19
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称20
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称21
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称22
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称23
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称24
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称25
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称26
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称27
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称28
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称29
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称30
</
p
></
li
>
<
li
><
a
href
="#"
><
img
src
="images/pro.gif"
/></
a
><
p
>
产品名称31
</
p
></
li
>
</
ul
>
Javascript代码部份
<
script
language
="javascript"
>
//
JavaScript Document
function
extractNodes(pNode)
{
if
(pNode.nodeType
==
3
)
return
null
;
var
node,nodes
=
new
Array();
for
(
var
i
=
0
;node
=
pNode.childNodes[i];i
++
)
{
if
(node.nodeType
==
1
)nodes.push(node);
}
return
nodes;
}
var
objj
=
document.getElementById(
"
rolltxt
"
);
for
(i
=
0
;i
<
4
;i
++
)
{
objj.appendChild(extractNodes(objj)[i].cloneNode(
true
));
}
settime
=
0
;
var
t
=
setInterval(rolltxt,
10
);
//
行动时间
function
rolltxt()
{
if
(objj.scrollTop
%
(objj.clientHeight
+
0
)
==
0
)
{
//
-0 高度
settime
+=
1
;
if
(settime
==
300
)
{
//
停留时间
objj.scrollTop
+=
1
;
settime
=
0
;
}
}
else
{
objj.scrollTop
+=
1
;
if
(objj.scrollTop
==
(objj.scrollHeight
-
objj.clientHeight))
{
objj.scrollTop
=
0
;
}
}
}
objj.onmouseover
=
function
()
{clearInterval(t)}
objj.onmouseout
=
function
()
{t
=
setInterval(rolltxt,
10
)}
//
鼠标移动后行动时间
</
script
>
查看全文
相关阅读:
从前端回到了我的本专业网络
相对定位与绝对定位的理解
table( 表格)以及列表的使用
使用editplus编写HTML页面为什么设置了UTF-8仍然中文乱码
复习--3--对于第三堂课的总结--将两个页面相互用超链接链接到一起
前端学习笔录--2--HTML篇--有点麻烦的加载图片
前端学习笔录--1--HTML篇
sublime text 有毒--无法使用快捷键利用浏览器打开HTML文件
sublime text 插件
sublime写网页代码,里面的中文字符会出现乱码
原文地址:https://www.cnblogs.com/0754ydj/p/1241318.html
最新文章
linux安装ActiveMQ
linux安装Zookeeper
linux安装nginx
linux安装mysql
linux安装redis
Linux安装jdk
java使用poi生成Excel文件
第九章:前后查找
第八章:回溯引用,前后一致匹配
第七章:使用子表达式
热门文章
springboot报错:Failed to execute goal org.apache.maven-surefire-plugin:2.22.2:test (default-test) on project...
linux关于任务计划
linux关于进程、内存和cpu情况
linux关于软件安装和测试
linux关于权限
linux关于yum
好久没写了,总结一下lnux常用的命令(基础)
关于抽象
关于上传文件 非ajax提交 得到后台数据问题
代码
Copyright © 2011-2022 走看看