发新贴  快速回复

平滑描点jq转原生问题

hforlove
2013-06-03 17:24
 本帖最后由 好豪好豪 于 2013-6-3 17:32 编辑 

论坛上有人求平滑描点的思路,我就用jq写了一个,一开始看好像没问题,运行后效果可以出来,但是在转成原生js时却发现问题了,回头看下jq版本的也突然觉得好像有一点点问题,但又说不出问题所在。。。困惑。。。。
在看原生js版本的,问题多多啊!!!!
问题详情请看代码,在代码里注释问题比较容易理顺。。。



jq代码<!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>
<style type="text/css">
*{ padding:0; margin:0;}
textarea{ position:fixed; left:0; top:60px;}
div{ height:500px; background:#ccc; margin:10px 0; font-size:300px; text-align:center; line-height:500px;}
ul{ overflow:hidden; height:50px; position:fixed; top:0px; left:0; background:#993399; width:100%;}
li{ list-style:none; width:100px; height:50px; text-align:center; line-height:50px; font-size:50px; float:left; border-right:1px solid #ccc; cursor:pointer;}
.active{ background:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('textarea').html('');
    var pos=[];
    var btn=true;
    
    $('li').each(function(i) {
        pos[i]=$('div').eq(i).offset().top;
        $(this).click(function(){
            btn=false;
            $('li').removeClass('active');
            $(this).addClass('active');
            $('html,body').stop().animate({scrollTop:pos[i]},'slow',function(){btn=true;})
        })
    });
    
    $(window).scroll(function(){
        var top=$(document).scrollTop();
        $('li').each(function(i) {
            $('textarea').html($('textarea').html()+'<br>'+top+'------'+pos[i])
            
            /*遍历时,是不是一瞬间做了判断??才会在瞬间过后执行else里的代码??
              鼠标滚动时是不是应该这样判断??
            */
            if(top>=pos[i]){
                if(btn){
                    $('li').removeClass('active');
                    $(this).addClass('active');
                }
            }else{
                document.title=top+'------'+pos[i];
            }
        });
    })
    
    
})
</script>
</head>

<body>
<ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<textarea rows="10" cols="20"></textarea>
</body>
</html>
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>
<style type="text/css">
*{ padding:0; margin:0;}
textarea{ position:fixed; left:0; top:60px;}
.t2{ top:230px;}
div{ height:500px; background:#ccc; margin:10px 0; font-size:300px; text-align:center; line-height:500px;}
ul{ overflow:hidden; height:50px; position:fixed; top:0px; left:0; background:#993399; width:100%;}
li{ list-style:none; width:100px; height:50px; text-align:center; line-height:50px; font-size:50px; float:left; border-right:1px solid #ccc; cursor:pointer;}
.active{ background:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;
function startMove(iTarget,fn){      
      clearInterval(timer);
      timer=setInterval(function(){
      var scrollTop=scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var iSpeed=(iTarget-scrollTop)/8;
           iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
           scrollTop+=iSpeed;
           if(scrollTop==iTarget){
               clearInterval(timer);
               if(fn){
                  fn();  
               }
           }else{
               window.scrollTo(0,scrollTop);
           }
      },30);
}

window.err==function(){
    var aDiv=document.getElementsByTagName('div');
    var aLi=document.getElementsByTagName('li');
    var textarea=document.getElementsByTagName('textarea');
    var btn=true;
    var pos=[];
    var i=0;
    
    textarea[0].innerHTML='';
    textarea[1].innerHTML='';
    
    if(document.documentElement.getBoundingClientRect){
        for(i=0; i<aDiv.length; i++){
            pos[i]=aDiv[i].getBoundingClientRect().top;
        }
    }
    
    for(i=0; i<aLi.length; i++){
        aLi[i].index=i;
        aLi[i].err==function(){
            btn=false;
            for(i=0; i<aLi.length; i++){
                aLi[i].className='';
            }
            this.className='active';
            startMove(pos[this.index],function(){btn=true;});
        }
    }
    
    window.onscroll=function(){
        if(btn){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            for(i=0; i<aLi.length; i++){
                aLi[i].index=i;
                
                /*1.if(scrollTop>=pos[i]);如果判断是这样,两个文本框在不同位置输出的内容就会不同不同??
                  2.if(scrollTop>=pos[this.index]);如果判断这样,两个文本框的内容相同,但内容又会与上面注释不同??                  
                */
                textarea[0].innerHTML+=scrollTop+'----'+pos[i]+'<br>\n';
                
                /*3.如果jq版本里的判断是一瞬间执行了,这里也应该想jq那样执行啊,但为什么不行*/
                if(scrollTop>=pos[this.index]){
                    for(i=0; i<aLi.length; i++){
                        aLi[i].className='';
                    }
                    this.className='active';
                }
                
                textarea[1].innerHTML+=scrollTop+'----'+pos[i]+'<br>\n';
            }
        }
    }
}
</script>
</head>

<body>
<ul>
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<textarea class="t1" rows="10" cols="20"></textarea>
<textarea class="t2" rows="10" cols="20"></textarea>
</body>
</html>
hforlove
 本帖最后由 好豪好豪 于 2013-6-3 17:29 编辑 

{:soso_e101:} 运行代码不知道为什么运行不到,就只发代码了
2013-06-03 17:25  回复本帖
无为
好豪好豪 发表于 2013-6-3 17:25 forum.php?mod=redirect&goto=findpost&pid=19805&ptid=6836
运行代码不知道为什么运行不到,就只发代码了

运行代码功能要求把代码中的所有缩进都去掉再粘贴进来
2013-06-04 11:08  回复本帖
hforlove
 本帖最后由 好豪好豪 于 2013-6-4 12:22 编辑 

{:soso_e101:} 
2013-06-04 11:40  回复本帖
hforlove
无为 发表于 2013-6-4 11:08 forum.php?mod=redirect&goto=findpost&pid=19814&ptid=6836
运行代码功能要求把代码中的所有缩进都去掉再粘贴进来

之前是缩进了再发的,还是不行;刚刚再检查过发现好像运行框里只要出现【单引号+<br>】【'<br>'】,它会自动过滤掉了,只剩一个单引号了。。。。
2013-06-04 12:23  回复本帖
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-6-4 13:45 编辑 

      正是我之前想做的,但一直没有思路,看到你用getBoundingClientRect(),我恍然大悟,我怎么不知道有这个方法,

百度了一下才知道是获取元素在页面上的位置。
      
     这个js原生方法不错,很简洁,不过还可以扩展一下,就是鼠标滑到某个div的top时,上面的li背景变色。

可以运行的,js中的换行是'\n',你那里加了html中的换行<br>
[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>
<style type="text/css">
*{ padding:0; margin:0;}
textarea{ position:fixed; left:0; top:60px;}
.t2{ top:230px;}
div{ height:500px; background:#ccc; margin:10px 0; font-size:300px; text-align:center; line-height:500px;}
ul{ overflow:hidden; height:50px; position:fixed; top:0px; left:0; background:#993399; width:100%;}
li{ list-style:none; width:100px; height:50px; text-align:center; line-height:50px; font-size:50px; float:left; border-right:1px solid #ccc; cursor:pointer;}
.active{ background:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;
function startMove(iTarget,fn){
clearInterval(timer);
timer=setInterval(function(){
var scrollTop=scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var iSpeed=(iTarget-scrollTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
scrollTop+=iSpeed;
if(scrollTop==iTarget){
clearInterval(timer);
if(fn){
fn();
}
}else{
window.scrollTo(0,scrollTop);
}
},30);
}

window.err==function(){
var aDiv=document.getElementsByTagName('div');
var aLi=document.getElementsByTagName('li');
var textarea=document.getElementsByTagName('textarea');
var btn=true;
var pos=[];
var i=0;

textarea[0].innerHTML='';
textarea[1].innerHTML='';

if(document.documentElement.getBoundingClientRect){
for(i=0; i<aDiv.length; i++){
pos[i]=aDiv[i].getBoundingClientRect().top;
}
}

for(i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].err==function(){
btn=false;
for(i=0; i<aLi.length; i++){
aLi[i].className='';
}
this.className='active';
startMove(pos[this.index],function(){btn=true;});
}
}

window.onscroll=function(){
if(btn){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
for(i=0; i<aLi.length; i++){
aLi[i].index=i;

/*1.if(scrollTop>=pos[i]);如果判断是这样,两个文本框在不同位置输出的内容就会不同不同??
2.if(scrollTop>=pos[this.index]);如果判断这样,两个文本框的内容相同,但内容又会与上面注释不同??
*/
textarea[0].innerHTML+=scrollTop+'----'+pos[i]+'\n';

/*3.如果jq版本里的判断是一瞬间执行了,这里也应该想jq那样执行啊,但为什么不行*/
if(scrollTop>=pos[this.index]){
for(i=0; i<aLi.length; i++){
aLi[i].className='';
}
this.className='active';
}

textarea[1].innerHTML+=scrollTop+'----'+pos[i]+'\n';
}
}
}
}
</script>
</head>

<body>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<textarea class="t1" rows="10" cols="20"></textarea>
<textarea class="t2" rows="10" cols="20"></textarea>
</body>
</html>[/html]
2013-06-04 13:09  回复本帖
jschuxue
 本帖最后由 jschuxue 于 2013-6-4 16:43 编辑 

创美易-miaov 发表于 2013-6-4 13:09 forum.php?mod=redirect&goto=findpost&pid=19820&ptid=6836
正是我之前想做的,但一直没有思路,看到你用getBoundingClientRect(),我恍然大悟,我怎么不知道有 ...

getBoundingClientRect 这个还真没用过 不过你这不就是选项卡吗?  只不过是将原来的li换成了div 再者就是覆盖了整个页面 还有别的什么吗?不知道为什么 代码发上来如下做运行就有问题

[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>
<style type="text/css">
*{ padding:0; margin:0;}
textarea{ position:fixed; left:0; top:60px;}
.t2{ top:230px;z-index:102;}
#div1{overflow:hidden; width:100%;height:500px;position:relative; top:60px;}
#main{ width:100%; height:500px; position:absolute; top:0px; }
#main div{ width:100%; height:500px; background:#ccc; margin:10px 0; font-size:300px; text-align:center; line-height:500px;}
ul{ overflow:hidden; height:50px; position:fixed; top:0px; left:0; background:#993399; width:100%; z-index:100;}
li{ list-style:none; width:100px; height:50px; text-align:center; line-height:50px; font-size:50px; float:left; border-right:1px solid #ccc; cursor:pointer;}
.active{ background:#fff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.err==function()
{
var aUl=document.getElementById('ul1');
var aMain=document.getElementById('main');
var oDiv=document.getElementById('div1');
var aLi=aUl.getElementsByTagName('li');
var aDiv=aMain.getElementsByTagName('div');
var iNum=0;


for(var i=0; i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].err==function(){

for(var i=0; i<aLi.length;i++)
{
aLi[i].className='';
}
aLi[this.index].className='active';
iNum=-510*this.index;
startMove(aMain, {top:iNum})
};
}


function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}

function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true;        //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;

if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}

if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}

if(bStop)
{
clearInterval(obj.timer);

if(fn)
{
fn();
}
}
}, 30)
}

}
</script>
</head>

<body>
<ul id="ul1">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div  id="div1">
<div id="main">
<div style=" display:block; top:60px;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<textarea class="t1" rows="10" cols="20"></textarea>
<textarea class="t2" rows="10" cols="20"></textarea>
</body>
</html>[/html]
2013-06-04 16:36  回复本帖
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-6-4 17:21 编辑 

jschuxue 发表于 2013-6-4 16:36 forum.php?mod=redirect&goto=findpost&pid=19823&ptid=6836
getBoundingClientRect 这个还真没用过 不过你这不就是选项卡吗?  只不过是将原来的li换成了div 再者就 ...

哈哈,你看清楚问题,没人要说做选项卡,我就不多这个嘴了。
还有,内容是无穷增的,你改成这样iNum=-510*this.index;简直是把它往死杀了。。。。
2013-06-04 17:16  回复本帖
hforlove
jschuxue 发表于 2013-6-4 16:36 forum.php?mod=redirect&goto=findpost&pid=19823&ptid=6836
getBoundingClientRect 这个还真没用过 不过你这不就是选项卡吗?  只不过是将原来的li换成了div 再者就 ...

这可不是选项卡这么简答啊。。。
你这么做的话,点击过后就不能滚动鼠标会到顶部了。。。
你看下复制jq版的代码运行下就知道了,
2013-06-04 17:22  回复本帖
jschuxue
创美易-miaov 发表于 2013-6-4 17:16 forum.php?mod=redirect&goto=findpost&pid=19825&ptid=6836
哈哈,你看清楚问题,没人要说做选项卡,我就不多这个嘴了。
还有,内容是无穷增的,你改成这样iNum=-510 ...

又不是闲的蛋痛 谁有空写那么完整 先用510代替下 怎么了 
2013-06-04 17:54  回复本帖
创美易-miaov
jschuxue 发表于 2013-6-4 17:54 forum.php?mod=redirect&goto=findpost&pid=19828&ptid=6836
又不是闲的蛋痛 谁有空写那么完整 先用510代替下 怎么了

哈~   细节方面任何时候都得注意。
2013-06-04 20:50  回复本帖
登录 后才可以发表回复