zoukankan
html css js c++ java
Marquee 连续滚动
在网上搜了一下几乎是同一个版本的连续滚动。并且有一些问题
于是就自己写了一个
<
div id
=
"
Parent
"
style
=
"
cursor: hand; overflow: hidden; 800px; height:50px
"
>
<
div id
=
"
Child_A
"
style
=
"
float:left;white-space:nowrap;
"
><
a href
=
"
http://lookcode.net
"
>
lookcode
</
a
>
<
a href
=
"
http://www.searoute.net
"
>
searoute
</
a
>
</
div
>
</
div
>
<
span id
=
"
spanMsg
"
></
span
>
<
script type
=
"
text/javascript
"
>
var Parent
=
document.getElementById(
"
Parent
"
);
var ChildA
=
document.getElementById(
"
Child_A
"
);
var parentWidth
=
800
;
var count
=
2
;
ChildA.innerHTML
=
ChildA.innerHTML
+
"
"
+
ChildA.innerHTML;
while
(Parent.scrollWidth
<=
parentWidth)
{
count
*=
2
;
ChildA.innerHTML
=
ChildA.innerHTML
+
"
"
+
ChildA.innerHTML;
}
var speed
=
10
;
function Marquee()
{
if
(ChildA.offsetWidth
/
count
-
Parent.scrollLeft
<
0
)
//
NB Cacluate the optimal position
{
Parent.scrollLeft
-=
ChildA.offsetWidth
/
count;
}
else
{
Parent.scrollLeft
++
}
}
var MyMar
=
setInterval(Marquee,speed)
Parent.onmouseover
=
function()
{clearInterval(MyMar)}
Parent.onmouseout
=
function()
{MyMar
=
setInterval(Marquee,speed)}
</
script
>
----write by lovebanyi 风云---
主要的是思想是利用滚条动。所以我们需要两个element 并且我们代码一定得让它产生滚动条。就是对同一个文本进行多次复制 这样子就OK了
第二就是计算出 重新开始的位置
把overflow设成scroll 这样就可以看到滚动条的效果了。 对spanMsg进行赋值可以观察
第四可以跟据代码做成你自己需要的向左向右向上向下。的代码
查看全文
相关阅读:
JDBC 关闭数据库连接与自动提交【转】
va注解应用实例
Java IO流操作汇总: inputStream 和 outputStream【转】
dom4j,json,pattern性能对比【原】
JSP中setattribute与setParameter的区别
setAttribute()和getAttibute(),getParameter()
org.hibernate.MappingException: Unknown entity
SQL保留关键字不能用作表名
缺jstl.jar包导致的代码出现异常
sessionFactory
原文地址:https://www.cnblogs.com/lovebanyi/p/904458.html
最新文章
表单验证神器-validate
mobileSelect.js 运用 input 不让吊起小键盘
bootstrap radio
echart-legend的图例改变
数据库集群之路一
Mysql主从复制
软件工程与编程总结
会话模型与SSO
TFS持续集成
转 Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405
热门文章
关于前端选择器设计原理与实现
angular4中使用jquer插件
记一次dll强命名冲突事件
Token安全
Windows10系统PHP开发环境配置【转】
nodejs和npm的关系【转】
Servlet中转发和重定向的路径问题【转】
微信开放平台和微信公众平台和商户平台 的区别【转】
在鼠标右键上加入使用notepad++编辑【转】
Java WebService接口生成和调用 图文详解>【转】【待调整】
Copyright © 2011-2022 走看看