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人头跟踪检测

    //-------------------------------------人头检测------------------------------------- int main(){     //V ...

  2. mysql的安装以及基本操作

    一.在Linux 下安装MySQL ubuntu 下可以直接使用apt-get . centos 下yum源有没有就不知道了. 1. sudo apt-get install mysql-server ...

  3. BZOJ 2448: 挖油

    Description [0,x]中全是1,其余全是0,每个点有一个权值,求最坏情况下得到x的最小权值. Sol DP+单调队列. 首先就是一个 \(O(n^3)\) 的DP. \(f[i][j]\) ...

  4. Java 日期加减计算.

    1.用Java.util.Calender来实现 Calendar calendar=Calendar.getInstance();      calendar.setTime(new Date()) ...

  5. apache2错误日志在哪，可以看到php错误

    在以下路径中 /var/log/apache2/error.log

  6. JAVA8 十大新特性详解

    前言: Java8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章, 例如Playing with Java ...

  7. Appium+Robotframework实现Android应用的自动化测试-6：一个简单的例子

    万事具备,只欠编码! 下面看一个简单的示例,这个示例验证Android手机自带的通讯录的添加联系人的操作是否成功.这个例子是Appium官网自带的示例,有兴趣的同学也可以自己下载来研究和学习,下载地址 ...

  8. Unity3d《Shader篇》地球旋转上空悬浮云层

    记得把纹理设置成Repeat Shader "Custom/Earth" { Properties { _MainTex ("Base (RGB)", 2D) ...

  9. 【sqlite】python备份数据库

    备份整个数据库的方法: # coding=utf-8 import sqlite3 def testBakSqlite(): conn = sqlite3.connect("sqlite_d ...

  10. 【linux】sudo su切换到root权限

    在用户有sudo权限但不知道root密码时可用 sudo su切换到root用户