HTML+CSS代码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>index</title>
  6. <style type="text/css">
  7. body,ul,li{ margin:0px; padding:0px;}
  8. body{ background:url(img/bg.jpg) center; }
  9. #banner{
  10. width:730px;
  11. height:390px;
  12. /*border:solid 1px #ff0;*/
  13. margin:100px auto 0px;
  14. background-image:url(img/.png);
  15. border-radius:10px;
  16. box-shadow:0px 0px 15px #fff;
  17. }
  18. #btn{
  19. width:55px;
  20. height:280px;
  21. position:fixed;
  22. right:30px;
  23. top:150px;
  24. }
  25. #btn ul li{
  26. list-style:none;
  27. width:55px; height:55px;
  28. border-radius:%;
  29. margin:10px ;
  30. background-image:url(img/icon.jpg);
  31. cursor:pointer;
  32. }
  33. </style>
  34. <script type="text/javascript" src="js/jquery.js">
  35. </script>
  36. <script type="text/javascript">
  37. $(function(){
  38. var indexc=; var play=null;
  39. $("#btn ul li").click(function(){
  40. clearInterval(play);
  41. indexc=$(this).index();
  42. /*$(this).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0');
  43.  
  44. $("#banner").animate({'background-position-y':-390*indexc+'px'},500);*/
  45. move();
  46. play=play=setInterval(function()
  47. {
  48. indexc++;
  49. indexc%=;
  50. move();
  51. },) ;
  52. });
  53.  
  54. play=setInterval(function()
  55. {
  56.  
  57. indexc++;
  58. indexc%=;
  59. move();
  60.  
  61. },) ;
  62.  
  63. function move()
  64. {
  65. $("#btn ul li").eq(indexc).animate({'background-position-x':'-80px'},).siblings().css('background-position-x','');
  66.  
  67. $("#banner").animate({'background-position-y':-*indexc+'px'},);
  68. }
  69. });
  70. </script>
  71. </head>
  72.  
  73. <body>
  74. <div id="banner">
  75. </div>
  76. <div id="btn">
  77. <ul>
  78. <li></li>
  79. <li style="background-position-y:56px;"></li>
  80. <li style="background-position-y:126px;"></li>
  81. <li style="background-position-y:-70px;"></li>
  82. </ul>
  83. </div>
  84. </body>
  85. </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. PHP中九大缓存技术总结

    PHP缓存包括PHP编译缓存和PHP数据缓存两种.PHP是一种解释型语言,属于边编译边运行的那种.这种运行模式的优点是程序修改很方便,但是运行效率却很低下.PHP编译缓存针对这种情况做改进处理,使得P ...

  2. keepalived和heartbeat区别

    <1>Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP):Heartbeat是基于主机或网 ...

  3. NPOI教程

    NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. NPOI 官方网站:http://npoi.codeplex.com/( ...

  4. centos6.5 nginx开机启动

    /etc/init.d/下添加nginxd文件,内容如下: #!/bin/bash # #chkconfig: - #description: Nginx is a World Wide Web se ...

  5. kali安装vmware tools

    昨天在网上搜了半天如何在kail下安装tools工具,结果都没有成功,今天就来说说我是怎么安装成功的. 1.按照网上的办法只能到这一步,一直提示找不到路径,点了回车也会照常出现这样的情况. Searc ...

  6. Python自动化运维工具fabric的安装

    使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...

  7. Log4perl 的使用

    Perl 使用Log4perl 首先下载log4 module : http://search.cpan.org/CPAN/authors/id/M/MS/MSCHILLI/Log-Log4perl- ...

  8. 2. javacript高级程序设计-在HTML中使用JavaScript

    1.1 <script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). ...

  9. java Thread和Runnable区别

    ①Thread类实现了Runnable接口,主要构造方法为Thread(Runnable target).Thread(Runnable target,String name).Thread(Stri ...

  10. C#获取IP和主机名

    System.Net.IPAddress addr; //获取IP addr = new System.Net.IPAddress ( Dns.GetHostByName ( Dns.GetHostN ...