这个主要是做的项目中用的效果图,奉献出来
主要的代码其实在上一篇博文中也都有体现。、
<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <title>大金融</title> <link rel="stylesheet" type="text/css" href="css/main.css"/> <script src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var bn_alp;// 定义动画变量 var Time = 3000;// 自动播放间隔时间 毫秒 var num = 1000;// 切换图片间隔的时间 毫秒 var page = 0;// 定义变量 var len = $( ".bn-alp .box li" ).length;// 获取图片的数量 $( ".bn-alp .box li" ).each(function() { $(this).css( "opacity", 0 ); $(this).css( "background-image","url(" + $(this).find('img.bg').attr('src') + ")"); //$( ".bn-alp .i" ).append('<i></i>'); }); // 设置全部的图片透明度为0 $( ".bn-alp .box li:first" ).css( "opacity", 1 ); // 设置默认第一张图片的透明度为1 $( ".i i" ).eq(0).addClass("on"); function fun()// 封装 { $( ".i i" ).eq(page).addClass("on").siblings('i').removeClass( "on" ); // 切换小点 $( ".bn-alp .box li" ).eq(page).addClass("on").animate({"opacity":1},num).siblings('li').removeClass( "on" ).animate({"opacity":0},num);// 切换图片 } function run()// 封装 { if( !$(".bn-alp .box li" ).is( ":animated" ))// 判断li是否在动画 { if( page == len - 1 )// 当图片切换到了最后一张的时候 { page = 0; // 把page设置成0 又重新开始播放动画 fun(); } else {// 继续执行下一张 page++; fun(); } } } $(".i i").mouseover( function()// 点击小点 { clearInterval( bn_alp ); // if( !$( ".bn-alp .box li" ).is( ":animated" ) )// 判断li是否在动画 //{ var index = $( ".i i" ).index( this );// 获取点击小点的位置 page = index;// 同步于page fun(); // } }); $( ".i" ).hover(function()// 鼠标放上去图片的时候清除动画 { clearInterval( bn_alp ); },function()// 鼠标移开图片的时候又开始执行动画 { bn_alp = setInterval( run, Time ); }).trigger( "mouseleave" ); }); </script> </head> <body class="wrap-bg"> <div class="iscroll"> <div class="hd" id="hd"> <div class="hd-in"> <span class="logo-1">大金融</span> <span class="logo-2"><em>M</em>ACRO-<em>F</em>INANCE</span> <span class="logo-3">站在金融之巅,唯我独行</span> <div class="hd-r"> <a href="index.html" target="_blank" class="def on">首页</a> <a href="introduce.html" target="_blank" class="def">产品介绍</a> <a href="###" target="_blank" class="def">软件下载</a> <a href="http://www.ths123.com/payment/?sid=202" target="_blank" class="def">购买</a> </div> </div> </div> <div class="login" id="login"> <div class="login-in"> <div class="login-ini"> <a href="http://www.ths123.com/payment/?sid=202" target="_blank" class="a1">立即购买</a> <a href="###" target="_blank" class="a2">点击下载</a> <p class="timep">大小:108M 更新日期:2014..4.5</p> <div class="login-b"> <p>咨询热线:0571-56768855</p> </div> </div> </div> </div> <div class="bn-alp"> <ul class="box"> <li class="on"> <img src="images/img1.jpg" class="bg" /> <li> <img src="images/img2.jpg" class="bg" /> </li> <li> <img src="images/img3.jpg" class="bg" /> </li> <li> <img src="images/img4.jpg" class="bg" /> </li> </ul> </div><div class="i"> <i class="i1 on"></i> <i class="i2"></i> <i class="i3"></i> <i class="i4"></i> </div> </div> </body> </html>
css文件
@charset "gb2312"; html,body,p,form,input,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} body{ font:12px/1.5em 'simsun',Tahoma, Geneva, sans-serif;} h1,button,input,select,textarea{border:0 none;} ul{ list-style:none; margin:0; padding:0;} table{border-collapse:collapse;border-spacing:0;} .clearfix:before,.clearfix:after {content:"";display:table;} .clearfix:after {clear:both;} .clearfix {zoom:1;clear:both;} /**/ .wrap-bg{background:-webkit-gradient(linear,0 0,0 100%,from(#fff5ed),to(#fff));background:-moz-linear-gradient(top,#fff5ed,#fff); font-family:Microsoft YaHei;} .iscroll{ min-width:1200px; height:888px; position:relative; overflow:hidden; z-index:99;} .intro{ height:90px; min-width:1200px; width:100%; background:url(../images/hd-bg.jpg) no-repeat center center;} .hd{ height:90px; min-width:1200px; width:100%; position:absolute; top:0; left:0; z-index:99; overflow:hidden; background:url(../images/bg.png) repeat;} .hd-in{ width:1000px; margin:0 auto; height:90px; position:relative; z-index:999;} .login{ min-width:1200px; width:100%; position:absolute; top:90px; left:0; z-index:99;} .login-in{ width:1000px; margin:0 auto; height:500px; position:relative; z-index:999;} .login-ini{ width:308px; height:500px; position:absolute; right:0; top:0;background:url(../images/login-bg.png) repeat;z-index:999;} .login-ini a{ position:absolute; left:34px; text-decoration:none; top:270px; border:1px solid #fff; width:238px; height:50px; line-height:50px; text-align:center; color:#fff; font-size:22px;} .login-ini .a2{ top:338px } .login-ini .timep{ position:absolute; left:34px; top:399px; color:#fff; width:238px; height:22px; line-height:22px; text-align:center;} .login-ini .login-b{ position:absolute; left:0; bottom:0; height:32px; line-height:32px; border-top:1px solid #7a6c68; width:308px;} .login-b p{ color:#fff; font-weight:700; text-align:center} .bn-alp .box li img.bg { display:none; } .logo-1{ position:absolute; top:20px; left:2px;font-size:42px; color:#ffd200; height:54px; line-height:46px; border-right:1px solid #fff; padding-right:8px} .logo-2, .logo-3{ position:absolute; top:20px; left:142px; font-size:24px; color:#ffd200; } .logo-2 em{font-style:normal; color:#Fff} .logo-3{ top:46px; color:#fff} .hd-r{ position:absolute; top:40px; right:0; font-size:16px;} .hd-r a{ color:#fff; text-decoration:none; display:inline-block; margin:0 10px;} .hd-r a:hover, .hd-r .on{ color:#ffd200} .bn-alp { width:100%; height:635px; position:relative; z-index:9;} .bn-alp ul,.bn-alp li { margin:0; padding:0; list-style:none; } .bn-alp .box { height:100%; position:relative; } .bn-alp .box li { width:100%; height:635px; background-position:50% 50%; background-color: #666; background-size:cover; position:absolute; top:0; left:0; z-index:10; } .bn-alp .box li.on { z-index:99; } .bn-alp .box li img.bg { display:none; } .bn-alp .box li a.b { display:block; width:100%; height:100%; } .i {width:878px; height:242px; position:relative; display:block; margin:10px auto 0; z-index:100;} .i i {width:210px; height:242px; margin-left:8px; cursor:pointer; float:left; z-index:99; position:relative; z-index:999;} .i .i1{width:210px; height:242px; background:url(../images/small1-def.jpg) no-repeat;} .i .i2{width:210px; height:242px; background:url(../images/small2-def.jpg) no-repeat;} .i .i3{width:210px; height:242px; background:url(../images/small3-def.jpg) no-repeat;} .i .i4{width:210px; height:242px; background:url(../images/small4-def.jpg) no-repeat;} .i .i1.on { background:url(../images/small1.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; } .i .i2.on { background:url(../images/small2.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; } .i .i3.on { background:url(../images/small3.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; } .i .i4.on { background:url(../images/small4.jpg) no-repeat; z-index:1000;width:210px; height:242px; margin-left:8px; }
里面需要的图片有上传在附件中下载放到images文件夹内即可运行出效果。。
有两个png图片保存的是png24位的。是半透明效果,需要在非ie6下运行效果更佳。
相关推荐
下面将详细讨论如何在Android中创建和定制一个仿支付宝账单统计图。 首先,我们需要选择一个合适的图表库来帮助我们实现这一功能。在Android社区中,有许多优秀的第三方图表库可供选择,如MPAndroidChart、...
在iOS应用开发中,"高仿支付宝首页头部"是一个常见的设计需求,主要是为了提供与支付宝应用相似的用户体验。这个项目采用Swift编程语言实现,表明它利用了Swift的强大特性和简洁语法来构建用户界面。Swift是Apple于...
MUI包含诸如下拉刷新、侧滑菜单、轮播图、弹出框等组件,这些都是在仿支付宝APP页面中可能用到的。通过MUI,开发者能够轻松实现响应式布局,确保页面在不同屏幕尺寸的设备上都能正常显示。 JavaScript,作为Web开发...
综上所述,"仿支付宝账单列表"的实现涉及了Android的ListView组件、数据排序、资源优化、数据库操作、事件监听以及Sticky Header效果的实现等多个知识点。开发者需要具备扎实的Android基础知识,以及对用户交互设计...
**jQuery图片轮播插件详解:仿支付宝2013版全屏幻灯片淡出淡进效果** 在网页设计中,图片轮播插件是一种常见的元素,它能够以动态方式展示多张图片,增强用户体验。本教程将深入探讨一个特别的jQuery插件,它模仿了...
在IT行业中,我们经常需要创建各种用户界面特效来提升用户体验,而"闪动、上升的数字(仿支付宝)"这个Demo就是这样的一个实例。它主要展示了两种特效:RiseNumberTextView和RunningTextView,这两种效果都是为了...
本文将深入探讨如何实现“仿支付宝蚂蚁森林能量球效果”,这是一个基于Android平台的项目,主要展示了能量球上下浮动的动态视觉效果。 首先,我们要理解蚂蚁森林这款应用的核心概念。它是一款通过用户的低碳行为...
在这个仿支付宝对账单的项目中,我们聚焦于如何使用饼状图来展示用户的消费构成,以及如何实现交互功能,如时间筛选。下面将详细探讨这个项目中的关键知识点。 首先,我们需要一个合适的库来绘制饼状图。在这个例子...
【仿支付宝二维码扫描】是一种常见的移动应用功能,用于识别和解析二维码,以便进行支付、分享信息等活动。在本文中,我们将深入探讨二维码扫描技术、支付宝的实现方式以及如何将这样的功能集成到自己的应用程序中。...
"Android仿支付宝九宫图效果"就是一个很好的示例,它旨在模仿支付宝应用中的图片展示方式,通常用于展示用户的消费记录、订单状态等信息。这种布局将九张图片或图标以3x3的形式排列,既美观又实用。 实现这个效果...
**jQuery图片轮播插件——仿支付宝2013版全屏图片幻灯片淡出淡进切换效果详解** 在Web开发中,图片轮播插件是常见的元素,用于展示多张图片,常用于产品展示、广告轮播等场景。jQuery作为一款强大的JavaScript库,...
在当今的数字支付时代,用户对支付安全的需求越来越高,因此,模拟像支付宝...对于想要深入了解和实践web前端开发的朋友们,可以将本文介绍的技术点作为参考,动手实现一个属于自己的仿支付宝多方框输入支付密码效果。
本项目“(Pony)高德地图poi实现,仿支付宝到位效果”旨在实现类似支付宝到位的效果,利用高德地图API来动态展示POI(Point of Interest)数据,并在地图上移动时实时更新Marker信息。 首先,我们要理解什么是POI...
本文将深入探讨如何使用Objective-C(简称OC)语言来实现一个与支付宝类似的头部动画效果,帮助开发者提升应用的交互性和视觉吸引力。 首先,我们要了解头部动画的基本构成。通常,这种动画涉及到视图的滑动、透明...
在iOS开发中,"仿支付宝首页图标移动"是一项常见的视觉效果实现,主要涉及到视图动画这一关键知识点。视图动画是iOS应用中增强用户体验的重要工具,它可以为用户界面增添动态感,使应用更加生动和吸引人。在这个项目...
【仿支付宝红包扫描demo】是一种基于增强现实(AR)技术的应用程序开发实例,它旨在模拟支付宝的红包扫描功能。在支付宝的实际应用中,用户可以通过摄像头扫描特定的图像或二维码来领取红包,这是一种互动性强且富有...
这一次给大家带来的依旧是最简单的页面效果图--Android仿支付宝首页GridView的网格效果-不能够换位置 原理也很简单,就是gridview有一个背景颜色,也就是你所看见的分割线的颜色,然后还有一个就是每一个子布局的...
本项目“仿支付宝首页”旨在模仿支付宝应用程序的主界面,为学习者提供一个实践平台,深入了解Android UI组件、布局管理和事件处理等核心技能。 首先,我们来看支付宝首页的主要构成部分。它通常包含以下几个关键...
【描述】"仿支付宝活动页面导航菜单"的描述虽然重复,但强调了项目的重点在于复制支付宝活动页的导航功能和视觉效果。这可能涉及到以下关键点: 1. **布局设计**:导航菜单通常位于页面顶部,固定位置,以便用户...