<!DOCTYPE html>
<html>
<head>
<title>掌金双11狂欢季</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0px;
padding: 0px;
}
html{
width: 100%;
height: 100%
}
body{
width: 100%;
height: 100%;
}
.neirong{
width: 100%;
height: 100%;
}
.huodongshijian{
height: 1117px;
width: 100%;
background: url(images/huodongshijian.png) no-repeat;
background-size: cover;
background-position: center;
}
.huodongduixiang{
height: 253px;
width: 100%;
background: url(images/huodongduixiang.png) no-repeat;
background-size: cover;
background-position: center;
}
.huodongjiangli{
height: 1037px;
width: 100%;
background: url(images/huodongjiangli.png) no-repeat;
background-size: cover;
background-position: center;
}
.jiangpinshuoming{
height: 462px;
width: 100%;
background: url(images/jiangpingshuoming.png) no-repeat;
background-size: cover;
background-position: center;
}
.gainianjieding{
height: 709px;
width: 100%;
background: url(images/gainianjieding.png) no-repeat;
background-size: cover;
background-position: center;
}
.huodongshuoming{
height: 560px;
width: 100%;
background: url(images/huodongshuoming.png) no-repeat;
background-size: cover;
background-position: center;
}
.lianxiwomen{
height: 550px;
width: 100%;
background: url(images/lianxiwomen.png) no-repeat;
background-size: cover;
background-position: center;
}
.piaofu{
width: 169px;
height: 422px;
background: url(images/piaofu.png) no-repeat;
position: fixed;
right: 30px;
top: 50%;
margin-top: -211px;
}
.piaofu dl{
height: 274px;
width: 169px;
margin: 60% 0 10% 0%;
text-align: center;
}
.piaofu dl dd{
cursor: pointer;
margin: 10% 0 0 0;
font-family: "微软雅黑";
}
.piaofu dl dd:hover a {
color: yellow;
}
a{
color: #fff;
text-decoration: none;
} /* 未访问的链接 */
.intro {
color: yellow;
}
.top {
cursor: pointer;
width: 40px;
position: absolute;
bottom: 10px;
right: 10px;
height: 20px;
}
</style>
</head>
<body>
<div class="piaofu">
<dl>
<dd><a id="fshijian" href="#shijian" data-content="活动时间">活动时间</a></dd>
<dd><a id="fduixiang" href="#duixiang" data-content="活动对象" >活动对象</a></dd>
<dd><a id="fjiangli" href="#jiangli" data-content="活动奖励">活动奖励</a></dd>
<dd><a id="fjiangpin" href="#jpshuoming" data-content="奖品说明">奖品说明</a></dd>
<dd><a id="fjieding" href="#jieding" data-content="概念界定">概念界定</a></dd>
<dd><a id="fshuoming" href="#hdshuoming" data-content="活动说明">活动说明</a></dd>
<dd><a id="fwomen" href="#women" data-content="联系我们">联系我们</a></dd>
</dl>
<div class="top"></div>
</div>
<div id="myneirong" class="neirong">
<div id="shijian" class="huodongshijian"></div>
<div id="duixiang" class="huodongduixiang"></div>
<div id="jiangli" class="huodongjiangli"></div>
<div id="jpshuoming" class="jiangpinshuoming"></div>
<div id="jieding" class="gainianjieding"></div>
<div id="hdshuoming" class="huodongshuoming"></div>
<div id="women" class="lianxiwomen"></div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="myjquery.js"></script>
</body>
</html>
jquery悬浮栏实现滑动点击
3星 · 超过75%的资源 需积分: 13 73 浏览量
2015-11-11
07:28:41
上传
评论 1
收藏 1.9MB ZIP 举报 
MyScrollAndClick.zip （27个子文件） 
MyScrollAndClick images 
huodongshijian.png 1.03MB huodongduixiang.png 101KB lianxiwomen.png 88KB huodongshuoming.png 95KB piaofu.png 12KB huodongjiangli.png 131KB
huodongjiangli.jpg 312KB gainianjieding.png 77KB jiangpingshuoming.png 77KB
jquery-1.11.1.min.js 94KB myjquery.js 6KB .idea uiDesigner.xml 9KB scopes scope_settings.xml 143B misc.xml 6KB vcs.xml 164B .name 16B js jquery-1.11.1.min.js 94KB myjquery.js 6KB modernizr-2.8.3.min.js 8KB copyright profiles_settings.xml 76B modules.xml 272B encodings.xml 164B compiler.xml 709B workspace.xml 26KB MyScrollAndClick.iml 296B
double11.html 5KB modernizr-2.8.3.min.js 8KB
评论2
最新资源