css是否可以做出无缝滚动
突然发现css可以写出下拉菜单请问只用css是否可以做出无缝滚动？因为不会写js。。。css用的还凑合希望有高人指点一下...
突然发现css可以写出下拉菜单
请问只用css是否可以做出无缝滚动？
因为不会写js。。。
css用的还凑合
希望有高人指点一下 展开
请问只用css是否可以做出无缝滚动？
因为不会写js。。。
css用的还凑合
希望有高人指点一下 展开
3个回答
展开全部
可以，不过要和js配合使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript无缝滚动</title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//当前滚动的位置
critical = slide.offsetHeight;//临界点
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript无缝滚动</title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//当前滚动的位置
critical = slide.offsetHeight;//临界点
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
仅靠css是不能的，因为无缝滚动实现的原理实际上是构造2个容器，把第一个容器的内容写入到第二个容器中从而达到无缝的效果。
而css是无法做到这一点的。
不会js也没关系，到网上搜下js无缝滚动，改改代码也不是太难的。
而css是无法做到这一点的。
不会js也没关系，到网上搜下js无缝滚动，改改代码也不是太难的。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
光css 是不行的 要和javascript 一起使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
