您的位置：首页 > Web前端 > CSS

HTML+CSS页面滚动效果处理

2015-09-20 18:00 806 查看

HTML+CSS代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
body,ul,li{ margin:0px; padding:0px;}
body{ background:url(img/bg.jpg) center; }
#banner{
width:730px;
height:390px;
/*border:solid 1px #ff0;*/
margin:100px auto 0px;
background-image:url(img/1.png);
border-radius:10px;
box-shadow:0px 0px 15px #fff;
}
#btn{
width:55px;
height:280px;
position:fixed;
right:30px;
top:150px;
}
#btn ul li{
list-style:none;
width:55px; height:55px;
border-radius:100%;
margin:10px 0;
background-image:url(img/icon.jpg);
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
$(function(){
var indexc=0; var play=null;
$("#btn ul li").click(function(){
clearInterval(play);
indexc=$(this).index();
/*$(this).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0');

$("#banner").animate({'background-position-y':-390*indexc+'px'},500);*/
move();
play=play=setInterval(function()
{
indexc++;
indexc%=4;
move();
},3000)    ;
});

play=setInterval(function()
{

indexc++;
indexc%=4;
move();

},3000)    ;

function move()
{
$("#btn ul li").eq(indexc).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0');

$("#banner").animate({'background-position-y':-390*indexc+'px'},500);
}
});
</script>
</head>

<body>
<div id="banner">
</div>
<div id="btn">
<ul>
<li></li>
<li style="background-position-y:56px;"></li>
<li  style="background-position-y:126px;"></li>
<li style="background-position-y:-70px;"></li>
</ul>
</div>
</body>
</html>

完整素材和代码下载

总结：

1、页面调整背景图片位置，background-position 这个属性很重要；通过调整这个属性的值可以实现各个布局的不同位置图片；

2、图片的滚动效果，我们可以使用setInterval来定义计时器，同时可以通过clearInterval清理计时器；

3、背景区域的发光效果，我们可以通过box-shadow来设置，该属性传入四个参数：偏移X方向，偏移Y方向，扩散半径，以及阴影颜色；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航