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
>
查看全文
相关阅读:
设计模式
设计模式
设计模式
JS | Reduce
JS | 数组的深拷贝与浅拷贝
JS | 数组操作
Lodash | 指定路径对Object操作
Git | 场景总结
ES6 Class
SpringBoot | Jpa @Id @GeneratedValue
原文地址:https://www.cnblogs.com/0754ydj/p/1241318.html
最新文章
pixijs需要注意的问题
python templatematch识别图片
svg路径动画自适应的写法
phpredis统计前1分钟内的访问量
redis互斥锁解决缓存穿透问题
redis实现mysql锁的方法
华为手机开启开发者模式的方法
pixijs序列帧的写法
pixijs照明灯做法
pixijs+alloytouch滚动地图的写法
热门文章
位操作
Centos7安装Redis
动态链接库(DLL)
element日期选择组件设置结束时间大于开始时间value-format设置字符串
css7种漂亮的按钮hover效果
qs处理相同参数名传参
Recorder用于html5录音
js数组去重、对象数组去重(ES6语法推荐)
Codeforces-Div3-E-Rock, Paper, Scissors(贪心)
javascript 排序方法
Copyright © 2011-2022 走看看