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. IC/RFID/NFC 关系与区别

    IC卡 (Integrated Circuit Card,集成电路卡) 有些国家和地区也称智能卡(smart card).智慧卡(intelligent card).微电路卡(microcircuit ...

  2. [翻译]opengl扩展教程1

    [翻译]opengl扩展教程1 原文地址https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/extensions.php [翻译]ope ...

  3. CH Round #55 - Streaming #6 (NOIP模拟赛day2)解题报告

    T1九九归一 描述 萌蛋在练习模n意义下的乘法时发现,总有一些数,在自乘若干次以后,会变成1.例如n=7,那么5×5 mod 7=4,4×5 mod 7=6,6×5 mod 7=2,2×5 mod 7 ...

  4. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  5. [转]Java连接各种数据库的方法

    //MySQL:       String Driver="com.mysql.jdbc.Driver";   //驱动程序     String URL="jdbc:m ...

  6. （转）高性能网站架构之缓存篇—Redis集群增删节点

    标签: 高性能架构集群缓存redis 上一篇文章,我们搭建了Redis-cluster集群,这篇博客跟大家讲一下如何在一个运行的集群上增加节点或者删除节点. Redis集群添加节点 首先我们要新建立一 ...

  7. 新建samba配置步骤

    Linux系统默认已经安装了Samba,但是没有安装Samba服务: 1,先查看安装情况:rpm -qa|grep samba 根据系统的安装情况选择下载或者通过光驱安装所缺的rpm包. 我的安装情况 ...

  8. Pywinauto在Windows Twain Driver自动化测试中的应用研究

    摘  要: 以Python为基础,结合对Twain Driver测试工具的具体需求,将Pywinauto引入到Twain Driver的自动化测试中.介绍了Pywinauto的基本概念,通过测试用例说 ...

  9. ios 在中国地区，24小时时间格式 系统设定下 获得12小时制时间的方法

    如题,在中国地区,24小时时间格式 系统设定下,如果单单使用 NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; 之后,无论用hh ...

  10. Mathematics:Find a multiple(POJ 2356)

    找组合 题目大意:给你N个自然数,请你求出若干个数的组合的和为N的整数倍的数 经典鸽巢原理题目,鸽巢原理的意思是,有N个物品,放在N-1个集合中,则一定存在一个集合有2个元素或以上. 这一题是说有找出 ...