开启左侧

[CSS] jQuery动画滑动定位效果的问题

[复制链接]
发表于 2012-4-13 17:33:07 | 显示全部楼层 |阅读模式
作了一个点击滑动的效果,但是突然发现作横向移动时
灰色的DIV区块会破图(我也不知要如何说明)
试效果就知道我在说什么
这有办法解决吗?

<!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></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link href='http://fonts.googleapis.com/css?family=Signika+Negative:300' rel='stylesheet' type='text/css'> <style type="text/css"> <!-- body { font-family: 'Signika Negative', sans-serif; } #head { z-index:10; position:absolute; top:0; left:0; width:100%; height:30px; border-color:#0055ff; border-width:0 0 10px 0; border-style:solid; background:#0088ff; } #head li{ list-style:none; float:left; display:block; height:30px; padding:0 10px; 0 10px; cursor:pointer; font-size:26px; } #head li:hover{ color:#ffffff; background:#0055ff; border-color:#0011ff; border-width:0 0 10px 0; border-style:solid; } #box { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } #bg { position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; background:; } .cell { width:100%; height:100%; overflow:auto; } .list { position:absolute; top:50%; left:50%; width:800px; height:600px; margin:-300px 0 0 -400px; background:#cccccc; } #class_1 { position:absolute; top:0; left:0; background:; } #class_2 { position:absolute; top:0; left:100%; background:; } #class_3 { position:absolute; top:0; left:200%; background:; } #class_4 { position:absolute; top:100%; left:0; background:; } #class_5 { position:absolute; top:100%; left:100%; background:; } #class_6 { position:absolute; top:100%; left:200%; background:; } #class_7 { position:absolute; top:200%; left:0; background:; } #class_8 { position:absolute; top:200%; left:100%; background:; } #class_9 { position:absolute; top:200%; left:200%; background:; } --> </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  <script type="text/javascript"> $(document).ready(function() { $("#l_01").click(function(){  $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow"); }); $("#l_02").click(function(){  $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow"); }); $("#l_03").click(function(){  $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow"); }); $("#l_04").click(function(){  $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow"); }); $("#l_05").click(function(){  $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow"); }); $("#l_06").click(function(){  $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow"); }); $("#l_07").click(function(){  $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow"); }); $("#l_08").click(function(){  $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow"); }); $("#l_09").click(function(){  $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow"); }); }); </script></head><body> <div id="head">  <li id="l_01">1</li>  <li id="l_02">2</li>  <li id="l_03">3</li>  <li id="l_04">4</li>  <li id="l_05">5</li>  <li id="l_06">6</li>  <li id="l_07">7</li>  <li id="l_08">8</li>  <li id="l_09">9</li> </div> <div id="box">  <div id="bg"> <div class="cell" id="class_1"> <div class="list"></div> </div> <div class="cell" id="class_2"> <div class="list"></div> </div> <div class="cell" id="class_3"> <div class="list"></div> </div> <div class="cell" id="class_4"> <div class="list"></div> </div> <div class="cell" id="class_5"> <div class="list"></div> </div> <div class="cell" id="class_6"> <div class="list"></div> </div> <div class="cell" id="class_7"> <div class="list"></div> </div> <div class="cell" id="class_8"> <div class="list"></div> </div> <div class="cell" id="class_9"> <div class="list"></div> </div>  </div> </div></body></html>
运行代码复制代码另存代码 提示:您可以先修改部分代码再运行
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:10 | 显示全部楼层
给个意见吧
或是有其他方法能达到我要的效果
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:33:13 | 显示全部楼层
我这个chrome浏览器看起来很炫
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:16 | 显示全部楼层
关键是
作横向移动时
灰色的DIV区块会破图
非一整个完整的长方形区块
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:33:19 | 显示全部楼层
破图 是什么意思? 我没看懂!
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:23 | 显示全部楼层
<!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></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <link href='http://fonts.googleapis.com/css?family=Signika+Negative:300' rel='stylesheet' type='text/css'> <style type="text/css"> <!-- body { font-family: 'Signika Negative', sans-serif; } #head { z-index:10; position:absolute; top:0; left:0; width:100%; height:30px; border-color:#0055ff; border-width:0 0 10px 0; border-style:solid; background:#0088ff; } #head li{ list-style:none; float:left; display:block; height:30px; padding:0 10px; 0 10px; cursor:pointer; font-size:26px; } #head li:hover{ color:#ffffff; background:#0055ff; border-color:#0011ff; border-width:0 0 10px 0; border-style:solid; } #box { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; } #bg { position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; background:; } .cell { width:100%; height:100%; overflow:auto; } .list { position:absolute; top:50%; left:50%; width:800px; height:600px; margin:-300px 0 0 -400px; background:#0088ff; } #class_1 { position:absolute; top:0; left:0; background:; } #class_2 { position:absolute; top:0; left:100%; background:; } #class_3 { position:absolute; top:0; left:200%; background:; } #class_4 { position:absolute; top:100%; left:0; background:; } #class_5 { position:absolute; top:100%; left:100%; background:; } #class_6 { position:absolute; top:100%; left:200%; background:; } #class_7 { position:absolute; top:200%; left:0; background:; } #class_8 { position:absolute; top:200%; left:100%; background:; } #class_9 { position:absolute; top:200%; left:200%; background:; } --> </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  <script type="text/javascript"> $(document).ready(function() { $("#l_01").click(function(){  $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow"); }); $("#l_02").click(function(){  $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow"); }); $("#l_03").click(function(){  $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow"); }); $("#l_04").click(function(){  $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow"); }); $("#l_05").click(function(){  $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow"); }); $("#l_06").click(function(){  $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow"); }); $("#l_07").click(function(){  $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow"); }); $("#l_08").click(function(){  $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow"); }); $("#l_09").click(function(){  $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow"); }); }); </script></head><body> <div id="head">  <li id="l_01">1</li>  <li id="l_02">2</li>  <li id="l_03">3</li>  <li id="l_04">4</li>  <li id="l_05">5</li>  <li id="l_06">6</li>  <li id="l_07">7</li>  <li id="l_08">8</li>  <li id="l_09">9</li> </div> <div id="box">  <div id="bg"> <div class="cell" id="class_1"> <div class="list"></div> </div> <div class="cell" id="class_2"> <div class="list"></div> </div> <div class="cell" id="class_3"> <div class="list"></div> </div> <div class="cell" id="class_4"> <div class="list"></div> </div> <div class="cell" id="class_5"> <div class="list"></div> </div> <div class="cell" id="class_6"> <div class="list"></div> </div> <div class="cell" id="class_7"> <div class="list"></div> </div> <div class="cell" id="class_8"> <div class="list"></div> </div> <div class="cell" id="class_9"> <div class="list"></div> </div>  </div> </div></body></html>
运行代码复制代码另存代码 提示:您可以先修改部分代码再运行


改成蓝色的来看应该可以看出
蓝色的区块在移动时,并非完整的长方形区块
这在技术上可解吗?
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-4-13 17:33:27 | 显示全部楼层
[html]
浏览器在渲染页面的时候都是从上至下的从左至右的, JQ实现的动画效果无非就是通过不断改变box的偏移值来完成, 动画的过程 就是浏览器不断的重新渲染画面的过程 而上一个画面还未渲染结束偏移值又改变的话就会感觉上一帧至渲染到一半 多个渲染不完全的画面动起来,就像中间撕裂了一样

解决方法: 1.减少动画中的帧数. 不过这部分都是JQ内部确定的,更改起来有些压力
2.增加动画时间,

无非就是让每一个画面渲染时间足够些~祝成功
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:31 | 显示全部楼层
讲解的很详细
感谢说明
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:32 | 显示全部楼层
我不会做动画,但是看你的代码好像有问题,程序有点说不出的别扭
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-4-13 17:33:34 | 显示全部楼层
这个和帧数有关,还和显示器的频率有关,不是你的写法问题,不用去管它

另:起了兴趣精简了下js

var vc1 = 0; var vc2 = 0;
$("#head li").each(function(i){
$("#head li").eq(i).click(function(){
vc1 = 0 - Math.floor(i/3)*100;
vc2 = 0 - (i - Math.floor(i/3)*3)*100;
$("#bg").stop().animate({top:vc1+"%",left:vc2+"%"},"slow");
});
});
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表