HTML+CSS页面滚动效果处理
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页面滚动效果处理的更多相关文章
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- 用jquery实现平滑的页面滚动效果
通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- jQuery实现浮动层跟随页面滚动效果
helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery 滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...
- IOS设备上网页中的页面滚动效果模拟
可能咋一看不知道我说的是个啥,因为iOS本来就用这功能的啊,还模拟它干啥?先听我说下项目背景哈 我现在开发的是一个webapp,主要是用在ipad上,这个app的大小是固定大小的,为了防止触摸它出现弹 ...
- animate.css配合wow.min.js实现各种页面滚动效果
有的页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.比如刚刚发布的 iPhone 6 的页面(查看).如果你希望你的页面也更加有趣,那么你可以试试 WOW.js ...
- css 页面滚动 多背景固定不动
经常看到一些网站,滚动页面但是背景图不会跟着滚动,好像一直固定在浏览器窗口,感觉挺酷的,哇哦 ~ ~ 原来都是 background-attachment 这位大兄弟的功劳 background-at ...
- css 上下滚动效果
<html> <head> <style> .scroll{ overflow:hidden; width:100%; } .scrollout{ height:2 ...
- css页面滚动触发动画
参考页面:http://www.jq22.com/jquery-info1384
随机推荐
- PHP中九大缓存技术总结
PHP缓存包括PHP编译缓存和PHP数据缓存两种.PHP是一种解释型语言,属于边编译边运行的那种.这种运行模式的优点是程序修改很方便,但是运行效率却很低下.PHP编译缓存针对这种情况做改进处理,使得P ...
- keepalived和heartbeat区别
<1>Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP):Heartbeat是基于主机或网 ...
- NPOI教程
NPOI 是 POI 项目的 .NET 版本.POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目. NPOI 官方网站:http://npoi.codeplex.com/( ...
- centos6.5 nginx开机启动
/etc/init.d/下添加nginxd文件,内容如下: #!/bin/bash # #chkconfig: - #description: Nginx is a World Wide Web se ...
- kali安装vmware tools
昨天在网上搜了半天如何在kail下安装tools工具,结果都没有成功,今天就来说说我是怎么安装成功的. 1.按照网上的办法只能到这一步,一直提示找不到路径,点了回车也会照常出现这样的情况. Searc ...
- Python自动化运维工具fabric的安装
使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...
- Log4perl 的使用
Perl 使用Log4perl 首先下载log4 module : http://search.cpan.org/CPAN/authors/id/M/MS/MSCHILLI/Log-Log4perl- ...
- 2. javacript高级程序设计-在HTML中使用JavaScript
1.1 <script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). ...
- java Thread和Runnable区别
①Thread类实现了Runnable接口,主要构造方法为Thread(Runnable target).Thread(Runnable target,String name).Thread(Stri ...
- C#获取IP和主机名
System.Net.IPAddress addr; //获取IP addr = new System.Net.IPAddress ( Dns.GetHostByName ( Dns.GetHostN ...