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. caffe_windows安装

    CUDA:链接:http://pan.baidu.com/s/1nvyA3Qp 密码:h0f3 cudnn:链接:http://pan.baidu.com/s/1hr3Ug76 密码:vmdq caf ...

  2. Codeforces 710 D. Two Arithmetic Progressions

    Description \(x=a_1k+b_1=a_2l+b_2,L\leqslant x \leqslant R\) 求满足这样条件的 \(x\) 的个数. Sol 扩展欧几里得+中国剩余定理. ...

  3. windows下的socket网络编程

    windows下的socket网络编程 windows下的socket网络编程 clinet.c 客户端 server.c 服务器端 UDP通信的实现 代码如下 已经很久没有在windows下编程了, ...

  4. 解决maven项目移动

    解决使用maven的工程移动到另一台电脑(电脑无法访问maven中央仓库问题) 移动后出现下述结果: Publishing failedPublishing failed with multiple ...

  5. SQL Server 2008 R2 Developer (x86, x64, ia64) – DVD (Chinese-Simplified)

    http://blog.sina.com.cn/s/blog_4aedf6370101j9tz.html 1. SQL Server 2008 R2 Developer (x86, x64, ia64 ...

  6. 【GoLang】golang 如何像Java 一样通过类名反射对象？

    结论: golang不支持解析string然后执行. golang的反射机制只能存在于已经存在的对象上面. 不知道后续的版本有没有规划,现在只能先加载注册,然后实现类似Java工厂模式的反射. 代码示 ...

  7. JavaScript——callback（回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直 ...

  8. C#的is和as操作符来进行强制类型转换&&值类型的拆箱、装箱

    if(o is Employee) { Employee e=(Employee)o; //在if语句剩余的部分中使用e; } Employee e=o as Employee; if(e!=null ...

  9. 先进的React GUI编辑器 — Structor，所见即所得！

    先进的React GUI编辑器 — Structor https://helmetrex.com/ 手把手教你基于 ES6 架构自己的 React Boilerplate 项目 http://www. ...

  10. POJ 1190(深搜)

    http://poj.org/problem?id=1190 又有好久没做搜索的题了,没想到做一个卡了我那么久,想哭啊. 一个中文题,思路呢也就是搜索呗,一层一层往上面搜,不过这里有两个比较重要的地方 ...