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
>
查看全文
相关阅读:
the most beautiful media player on the linux platform.
python IDE 集合
cassandra java 兼容性问题及其解决方法
记github上搭建独立域名的免费博客的方法过程
淘宝购物数据统计分析
python ipython spyder
python 实验环境
golang显示支持的os和arch列表
命令行设置代理
vscode远程调试备注
原文地址:https://www.cnblogs.com/0754ydj/p/1241318.html
最新文章
docker 和 vagrant 作为程序发布 和 开发的独立而统一的运行环境
mac mini 制作fusion drive 的方法
ios标准开发者账号 ios企业开发者账号的区别总结
/usr 的由来及/usr目录结构 [转]
python制作exe可执行文件的方法---使用pyinstaller
python packages prebuild for windows
简单易用的安装文件制作工具NSIS的使用demo示例
iphone app的非appstore发布方法及其免越狱安装方法
iphone 开发中使用zbar时遇到的几个典型问题解决方法。
git server 搭建指南
热门文章
git 使用经验与技巧总结 (不断更新中)
你永远学不会的设计-->百度地图map api key 的设置
淘宝软件自启动的流氓问题
让windows能像ubuntu一样方便的神器
百度隐藏的招聘信息
常见的网站服务器架构有哪些(转载)
一个酷绚的linux 桌面程序 GLX-DOCK (cario-dock)
samba 服务器搭建
nginx / apache / tomcat /resin等 http server的benchmark性能测试方法
linux 命令中的find locate whereis which type 使用区别
Copyright © 2011-2022 走看看