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. JavaScript深入浅出1-数据类型

    慕课网教程视频地址:Javascript深入浅出 javascript是弱数据类型语言,不需要显式的定义类型,一共有如下六种数据类型 原始类型:number string boolean null u ...

  2. bug-android之INSTALL_FAILED_NO_MATCHING_ABIS无法安装在虚拟机

    bug描述: 经常在网络上下载一些实例,自己研究 ,运行时不时会出现这个bug: Installation error: INSTALL_FAILED_NO_MATCHING_ABIS bug解决方案 ...

  3. DMZ

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,也称“非军事化区”.它是为了解决安装防火墙后外部网络的访问用户不能访问内部网络服务器的问题,而设立的一个非安全系统与安 ...

  4. Python自动化之IO多路复用

    单线程.多线程和异步对比图 灰色的是阻塞 IO多路复用 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方).操作系统的核心 ...

  5. flask路由和视图和cookie

    什么是路由 """ 客户端(例如web浏览器)把请求发送给Web服务器,Web服务器再把请求发送给Flask程序实例. 程序实例需要知道对每个URL请求运行那些代码,所以 ...

  6. ubuntu查看端口占用

    查看端口号 sudo netstat -ltnp | 结束进程 sudo kill pid

  7. [20160707]Java中如何关闭Frame窗口

    用户类继承自WindowAdapter,而窗口对象Frame作为用户类的数据成员. 1 import java.awt.*; import java.awt.event.*; public class ...

  8. 【leetcode】Permutations II

    Permutations II Given a collection of numbers that might contain duplicates, return all possible uni ...

  9. pypi 国内镜像 及修改全局方法

    PyPi的官方网站为https://pypi.python.org,有时访问中会很慢,使用pip命令安装带其他依赖包的安装包,会经常失败.解决办法,使用国内PyPi镜像网站,修改pip的源. 网上搜索 ...

  10. Java for LeetCode 222 Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...