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
>
查看全文
相关阅读:
教你一招用 IDE 编程提升效率的骚操作!
动态拼接sql语句工具类
mysql数据建模规范
分割字符串为数字列表
linux 配置mysql odbc
nodejs npm常用命令
(四)jquery easyui panel window使用
(三)jquery easyui常用form控件的使用
(二)jquery easyUI提示框的使用
(一)jQuery easyUI 环境的搭建
原文地址:https://www.cnblogs.com/0754ydj/p/1241318.html
最新文章
reset还原、poweroff强制断电、start开机
复习串讲 Day 01 SELinux安全机制、聚合链路、ipv6地址配置、命令别名、搭建基础web服务、防火墙
[Python]使用python的工具箱做数字滤波器设计和频域分析
[力扣]144_二叉树的前序遍历
[力扣]1018_可被5整除的二进制前缀
[Python]小甲鱼Python视频第052课(像极客一样去思考)课后题及参考解答
[Python]小甲鱼Python视频第051课(__name__属性、搜索路径和包)课后题及参考解答
[Python]小甲鱼Python视频第050课(模块:模块就是程序)课后题及参考解答
[Python]小甲鱼Python视频第049课(乱入:生成器)课后题及参考解答
[Python]小甲鱼Python视频第048课(魔法方法:迭代器) )课后题及参考解答
热门文章
[Python]小甲鱼Python视频第047课(魔法方法:定制序列) )课后题及参考解答
[Python]小甲鱼Python视频第046课(魔法方法:描述符(Property的原理) )课后题及参考解答
Gitlab + Jenkins + k8s 实现企业 CI/CD 落地
spring-cloud-sleuth-zipkin实现微服务的链路跟踪
MongoDB
二叉树学习
spring-boot-shiro-jwt-redis实现登陆授权功能
Redis和Ehcached的区别
docker开启2376端口CA认证及IDEA中一键部署docker项目
docker search/pull 报错
Copyright © 2011-2022 走看看