在制作网页中遇到的问题,因为现在用div+css,所以,网页头部就有了<html xmlns="http://www.w3.org/1999/xhtml">代码,可是有它以后所有的滚动代码都不会滚动。
解决办法一:
删除网页首行的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这个确实可以解决, 因为 js代码里有不符合w3c规定的方法和属性. 取消了这个w3c标准限制后 就可以了;可是,你网页中的css布局也就变形了,所以第一种不适合重构的思想
解决办法二:
把 js代码中的 document.body 改为 document.documentElement 就符合w3c标准了, 因此 不需要删除 那一行;
第二种方法还是很完美的
下面是一个例子:
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
//添加事件响应函数的函数,与本效果无关
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',initScrolling);
//保存想要滚动的容器
var scrollingBox;
var scrollingInterval;
//用于记录是否“滚到头”过一次
var reachedBottom=false;
//记录第一次滚到头时候的scrollTop
var bottom;
//初始化滚动效果
function initScrolling(){
scrollingBox = document.getElementById("scrollText");
//样式设置,与滚动基本无关,应该用CSS设置。
scrollingBox.style.height = "120px";
scrollingBox.style.overflow = "hidden";
//滚动
scrollingInterval = setInterval("scrolling()",50);
//鼠标划过停止滚动效果
scrollingBox.onmouseover = over;
//鼠标划出回复滚动效果
scrollingBox.onmouseout = out;
}
//滚动效果
function scrolling(){
//开始滚动,origin是原来scrollTop
var origin = scrollingBox.scrollTop++;
//如果到头了
if(origin == scrollingBox.scrollTop){
//如果是第一次到头
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{
//已经到头过,只需回复头接尾的效果
scrollingBox.scrollTop=bottom;
}
}
}
function over(){
clearInterval(scrollingInterval);
}
function out(){
scrollingInterval = setInterval("scrolling()",50);
}
</script>
<div id="scrollText">
<a href='#'>1</a><br>
<a href='#'>2</a><br>
<a href='#'>3</a><br>
<a href='#'>4</a><br>
<a href='#'>5</a><br>
<a href='#'>6</a><br>
</div>
-----------------------------------------
怎么样,问题解决了吧,呵呵^_^
分享到:
相关推荐
要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效;当然对JS的取值也会有影响。 DOCTYPE声明如下:<!DOCTYPE html PUBLIC “-/...
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript"> function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW...
本文实例讲述了javascript实现列表滚动的方法。分享给大家供大家参考。具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">...
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> [removed] // 计算数据,完全可以从数据看取得 ICollection CreateDataSource( ) ...
本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果。分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码。 运行效果如下图所示: 完整...
本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果。 具体的实例代码如下: <!DOCTYPE html ...
本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下: rolling_new.html页面如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
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> <meta ...
本文实例讲述了JavaScript实现简单精致的图片左右无缝滚动效果。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
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> <...
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> <meta ...
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><meta ...
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 xml:lang=en> <head> <meta ...
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> <meta ...
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。 分享代码如下: <!...
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”en”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-...
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&...
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>