jquery横向滑屏滚动

来源：互联网发布：淘宝网婴儿大pp裤编辑：程序博客网时间：2024/06/06 05:29
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>横向滚动</title><style type="text/css">*{ padding:0; margin:0;}ul li{ list-style:none;}html{ overflow:hidden;/*解决在IE6中有横向滚动条*/}body{ overflow:hidden;/*解决横向滚动条问题*/}/*.outMain{ overflow-x:hidden; position:relative;}*/.left{ text-align:center; position:absolute; background:#CCC; width:100%; height:100%; top:0; left:0; right:0; bottom:0; z-index:1;}.right{ text-align:center; position:absolute; background:#FC9; width:100%; height:100%; top:0; left:0; right:0; bottom:0;}a.clickleft{ display:block; text-decoration:none; background:#099; position:absolute; z-index:2; color:#FFF; top:300px; left:0;}a.clickright{ display:block; text-decoration:none; background:#09F; position:absolute; z-index:5; color:#FFF; top:300px; right:0;}</style><script type="text/javascript" src="js/1.3.2.js"></script><script type="text/javascript">$(function(){    //$('.right').hide();    $('.clickright').hide();    var w=screen.width;    var h=screen.height;    var left=$(".left");    var right=$(".right");    $('.left,.right').css("height",h);/*解决在IE6下高度不能铺满全屏*/         $('.clickleft').click(function(){        //alert(width);        left.animate({marginLeft:+w},1000);        left.css("z-index","-5");        right.css({"z-index":"-8","margin-left":"0"});        //left.hide();        //$('.right').show();        //left.appendTo(right);        $(this).hide();        $('.clickright').show();    });         $('.clickright').click(function(){        //alert(width);        left.css({"z-index":"-10","margin-left":"0"});        right.animate({marginLeft:-w},1000);        $('.clickleft').show();        $(this).hide();    });});</script></head> <body><div class="outMain">     <div class="left">left</div>     <div class="right">right</div></div><a href="#" class="clickleft">left</a><a href="#" class="clickright">right</a></body> </html>
0 0