jquery特效-淘宝聚惠11.11效果
来源：互联网 发布：库克体育淘宝 编辑：程序博客网 时间：2024/04/30 21:08
jquery特效-淘宝聚惠11.11效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!--css , js-->
<style type="text/css">
*{margin:0px;padding:0px;}
#louti{width:120px; position:fixed; left:20px; bottom:0px;}
#louti ul li{height:38px; line-height:38px;font-size:14px; text-align:center; list-style-type:none;
background:url("pic/bg1.png") no-repeat 110px 16px;}
#louti ul li a{color:#fff; font-family:"微软雅黑"; text-decoration:none;}
#louti ul li.gray1{background-color:#1f1a23;}
#louti ul li.gray2{background-color:#2f2f2f;}
#louti ul li.gray3{background-color:#f93470;}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{font-size:40px; color:#fff;height:500px; text-align:center; }
#box1{background:#f93470; }
#box2{ background:#34f942; }
#box3{ background:#f99134; }
#box4{ background:#2e27c6; }
#box5{ background:#601171; }
#box6{ background:#f93470;}
#box7{ background:#34f942; }
#box8{background:#2e27c6;}
</style>
<html>
<head>
<!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--当前页面的三要素-->
<title>标题</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<!--css , js-->
<style type="text/css">
*{margin:0px;padding:0px;}
#louti{width:120px; position:fixed; left:20px; bottom:0px;}
#louti ul li{height:38px; line-height:38px;font-size:14px; text-align:center; list-style-type:none;
background:url("pic/bg1.png") no-repeat 110px 16px;}
#louti ul li a{color:#fff; font-family:"微软雅黑"; text-decoration:none;}
#louti ul li.gray1{background-color:#1f1a23;}
#louti ul li.gray2{background-color:#2f2f2f;}
#louti ul li.gray3{background-color:#f93470;}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{font-size:40px; color:#fff;height:500px; text-align:center; }
#box1{background:#f93470; }
#box2{ background:#34f942; }
#box3{ background:#f99134; }
#box4{ background:#2e27c6; }
#box5{ background:#601171; }
#box6{ background:#f93470;}
#box7{ background:#34f942; }
#box8{background:#2e27c6;}
</style>
</head>
<body>
<body>
<!--楼梯式栏目导航 start-->
<div id="louti">
<img src="pic/xxpic.png" />
<ul>
<li class="gray3"><a href="#">服装服饰专场</a></li>
<li><a href="#">鞋包户外专场</a></li>
<li><a href="#">美妆配饰专场</a></li>
<li><a href="#">数码/食品专场</a></li>
<li><a href="#">优质团购专场</a></li>
<li><a href="#">母婴/家居专场</a></li>
<li><a href="#">淘宝热卖专场</a></li>
<li><a href="#">低价购车专场</a></li>
</ul>
<img class="top" src="pic/top.png" />
</div>
<!--楼梯式栏目导航 end-->
<div id="louti">
<img src="pic/xxpic.png" />
<ul>
<li class="gray3"><a href="#">服装服饰专场</a></li>
<li><a href="#">鞋包户外专场</a></li>
<li><a href="#">美妆配饰专场</a></li>
<li><a href="#">数码/食品专场</a></li>
<li><a href="#">优质团购专场</a></li>
<li><a href="#">母婴/家居专场</a></li>
<li><a href="#">淘宝热卖专场</a></li>
<li><a href="#">低价购车专场</a></li>
</ul>
<img class="top" src="pic/top.png" />
</div>
<!--楼梯式栏目导航 end-->
<div id="box1">服装服饰专场</div>
<div id="box2">鞋包户外专场</div>
<div id="box3">美妆配饰专场</div>
<div id="box4">数码/食品专场</div>
<div id="box5">优质团购专场</div>
<div id="box6">母婴/家居专场</div>
<div id="box7">淘宝热卖专场</div>
<div id="box8">低价购车专场</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#louti ul li:even").addClass("gray1");
$("#louti ul li:odd").addClass("gray2");
$("#louti ul li").click(function(){
$(this).addClass("gray3").siblings().removeClass("gray3");
var index = $(this).index()+1;
var $target = $("#box"+index);
var top = $target.offset().top;
$("body,html").stop(true,true).animate({"scrollTop":top});
});
<script type="text/javascript">
$("#louti ul li:even").addClass("gray1");
$("#louti ul li:odd").addClass("gray2");
$("#louti ul li").click(function(){
$(this).addClass("gray3").siblings().removeClass("gray3");
var index = $(this).index()+1;
var $target = $("#box"+index);
var top = $target.offset().top;
$("body,html").stop(true,true).animate({"scrollTop":top});
});
$(".top").click(function(){
$("body,html").stop(true,true).animate({"scrollTop":0});
});
</script>
</body>
</html>
$("body,html").stop(true,true).animate({"scrollTop":0});
});
</script>
</body>
</html>
0 0
- jquery特效-淘宝聚惠11.11效果
- jquery特效 幻灯片效果
- jquery,淘宝商城放大镜效果
- jQuery 切换特效/动画效果
- jquery特效-基于jQuery仿淘宝红色分类导航
- 淘宝特效
- 淘宝显示全部分类（Jquery效果）
- Jquery特效十二:树形菜单效果
- Jquery 特效各种效果都有收集
- jquery简易收缩展开效果特效
- jquery简易收缩展开效果特效
- jquery实战9：高级特效倒计时效果
- jquery实战7：高级特效放大镜效果
- jquery实战6：高级特效烟花效果
- 效果超棒的 jQuery 特效
- jquery菜单式图片轮播特效仿淘宝
- 利用jquery.fly实现仿淘宝购物车飞入特效
- 利用jquery.fly实现仿淘宝购物车飞入特效
- js中的this、new关键字、作用域和作用域链
- 13讲项目实战内页滚动图效果实现
- cocoStudio: Button设置锚点问题
- JavaScript的模块化：继承（原型）、封装（闭包）、多态
- IOS 初学者 关于Interface Builder
- jquery特效-淘宝聚惠11.11效果
- window nginx 启动无提示错误,却没有listen 80端口
- hibernate学习笔记
- 浏览器对象模型(Browser Object Model)
- 【分享】如何设计WinForm中DataGridView控件的自定义按钮列
- 12讲项目实战SEO之HTML代码优化-水平框架-竖直框架-混合框架-案例
- js--DOM（事件处理）
- android--系统jar包引用
- JavaScript 中的内置对象
