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/.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:%;

        margin:10px ;

        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=; 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%=;

                        move();

                    },)    ;

                });

                play=setInterval(function()

                {

                    indexc++;

                    indexc%=;

                    move();

            },)    ;

            function move()

            {

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

                $("#banner").animate({'background-position-y':-*indexc+'px'},);

            }

        });

</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方向，扩散半径，以及阴影颜色；

HTML+CSS页面滚动效果处理的更多相关文章

  1. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  2. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  3. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  4. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  5. IOS设备上网页中的页面滚动效果模拟

    可能咋一看不知道我说的是个啥,因为iOS本来就用这功能的啊,还模拟它干啥?先听我说下项目背景哈 我现在开发的是一个webapp,主要是用在ipad上,这个app的大小是固定大小的,为了防止触摸它出现弹 ...

  6. animate.css配合wow.min.js实现各种页面滚动效果

    有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...

  7. css 页面滚动 多背景固定不动

    经常看到一些网站,滚动页面但是背景图不会跟着滚动,好像一直固定在浏览器窗口,感觉挺酷的,哇哦 ~ ~ 原来都是 background-attachment 这位大兄弟的功劳 background-at ...

  8. css 上下滚动效果

    <html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:2 ...

  9. css页面滚动触发动画

    参考页面:http://www.jq22.com/jquery-info1384

随机推荐

  1. OpenCV成长之路(7)：图像滤波

    滤波实际上是信号处理里的一个概念,而图像本身也可以看成是一个二维的信号.其中像素点灰度值的高低代表信号的强弱. 高频:图像中灰度变化剧烈的点. 低频:图像中平坦的,灰度变化不大的点. 根据图像的高频与 ...

  2. 【Java POI】POI基于事件驱动解析大数据量2007版本Excel，空值导致列错位问题

    1.目前测试了20M的文件,可以读取. 2.支持单个工作表1万+的数据行数,耗时如图. 3.以下是关键地方处理的代码 //Accepts objects needed while parsing. / ...

  3. Redis Sentinel机制与用法（一）

    Sentinel spring 集群配置: 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕 ...

  4. gpt格式下通过U盘装win7系统

    首先下好一个64位的win7系统,可以是ghost版的,然后放到你的U盘,在U盘的根目录下添加bootmgr.efi,bootx64.efi.shell.efi这几个文件,其它都不要管,重启,你就在g ...

  5. 转： Oracle表空间查询

    1.查询数据库中的表空间名称 1)查询所有表空间 select tablespace_name from dba_tablespaces; select tablespace_name from us ...

  6. ffmpeg-20160811-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...

  7. Python缩小图像

    LyncLynn用途: 缩小图像 # -*- coding: UTF-8 -*- #Version: V1.0 #Author:lynclynn #CreateDate:20151201 #Updat ...

  8. 4.openstack之mitaka搭建glance镜像服务

    部署镜像服务 一:安装和配置服务 1.建库建用户 mysql -u root -p CREATE DATABASE glance; GRANT ALL PRIVILEGES ON glance.* T ...

  9. jquery.validate ajax提交

    页面引入jquery.validate.min.js <style> //引入错误格式     label.error {        display: block;        ma ...

  10. HTML 样式表

    样式代码 样式代码与属性代码区别   样式代码必须带单位 属性不需要  多个样式代码之间用分号隔开  同一个样式里面 用空格  多个属性之间用空格隔开    举例 1.背景样式 .r { backgr ...