页面动态滑动效果代码

最新推荐文章于 2024-04-03 04:36:18 发布

Green_G

最新推荐文章于 2024-04-03 04:36:18 发布

阅读量439

点赞数

分类专栏： web开发

web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
<script type="text/javascript" src="http://www.w3cschool.cn/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var mw = $(".mbox").width();
		var ml = $(".mbox").length;	
		$(".main").width(mw*ml);
		$(".main").css({background:"#f60"})	
		$(".menu li").click(function(){
			var index = $(this).index();
			if(index==0){
				$(".main").css({background:"#f60",opacity:0.5})	
			}
			if(index==1){
				$(".main").css({background:"#666",opacity:0.5})	
			}
			if(index==2){
				$(".main").css({background:"#369",opacity:0.5})	
			}
			if(index==3){
				$(".main").css({background:"#c30",opacity:0.5})	
			}
			if(index==4){
				$(".main").css({background:"#f00",opacity:0.5})	
			}
			if(!$(".main").is(":animated")){
				$(".main").animate({left:-mw*index,opacity:1},800)
			}
			
		})
	})
</script>
<style>
*{margin:0;padding:0}
html,body {font-size:12px;}
#wrap {width:960px;height:660px;border:1px solid #000;margin:0 auto;position:relative;overflow:hidden}
#wrap .menu {position:absolute;top:10px;left:10px;}
#wrap .menu li {float:left;width:100px;height:30px;line-height:30px;cursor:pointer}
#wrap .main {position:absolute;top:60px}
#wrap .main .mbox {float:left;width:960px;height:600px;text-align:center;line-height:600px;color:#fff}
</style>
</head>

<body>
<div id="wrap">
	<ul class="menu">
    	<li>我是栏目1</li>
        <li>我是栏目2</li>
        <li>我是栏目3</li>
        <li>我是栏目4</li>
        <li>我是栏目5</li>
    </ul>
	<div class="main">
    	<div class="m1 mbox">我是内容是1</div>
        <div class="m2 mbox">我是内容是2</div>
        <div class="m3 mbox">我是内容是3</div>
        <div class="m4 mbox">我是内容是4</div>
        <div class="m5 mbox">我是内容是5</div>
    </div>
</div>
</body>
</html>

Green_G

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面动态滑动效果代码

无标题文档 $(function(){ var mw = $(".mbox").width(); var ml = $(".mbox").length; $(".main").width(mw*ml); $(".main").css({background:"#f60"}) $(".menu li").click(function(){ var index =
复制链接

扫一扫