基于网页UI的设计与实现

福 建 师 范 大 学 应 用 科 技 学 院学 生 论 文论文题目：基于网页UI的设计与实现指导教师： 陈顺凡 学 号： 120352010018 姓 名： 赖新焕 年 级： 2010 专 业： 电子信息工程 二0 一四年 五月 十七 日目录【摘要】0【关键词】0【Abstract】0【Key Words】01.设计的概况11.1设计背景11.2设计目的11.3设计要求12.开发工具简介12.1Dreamweaver12.2Photoshop22.3ASP.NET技术简介23.设计与实现23.1数据库的需求分析23.2数据库的E-R图设计23.3数据库的结构创建34.系统结构设计与实现64.1系统结构设计64.1.1系统前台功能模块64.1.2系统后台功能模块74.2系统实现84.2.1系统前台功能实现84.2.2系统后台功能实现115.网页制作与实现135.1制作网页的步骤135.2网页布局145.2.1常规的页面布局145.2.2页面的配色方案145.2.3页头和页尾145.2.4关于广告145.2.5表单的布局设计155.2.6按钮155.2.7反馈155.3特效实现166.总结22【参考文献】22致 谢22网页UI的设计与实现【摘要】 网页UI设计有一套完整的设计方案，包括人机交互、操作逻辑、界面美观等很多内容，认知心理学、设计学、语言学等不同的学科都参与了这个复杂的过程，在此都扮演着重要的角色。一个成功的网页设计它要具备一个好看时尚的外观，还要考虑到它的结构布局是否合理，本论文将网页设计一般步骤将丰富的效果应用与网页设计理论相结合，通过制作网页，阐述了网页设计过程中一些的视觉效果的效果设计和具体操作方法。【关键词】 电子商务 网页 特效【Abstract】 Webpage UI design has a complete set of design scheme, including human-computer interaction, logic operation, beautiful interface, a lot of content, subject in cognitive psychology, design science, linguistics and so different are involved in this complex process, this has played an important role. A successful Webpage design it should have a good fashion appearance, but also take into account the structure it is reasonable, this paper will Webpage design general steps of applying effects and Webpage design theory rich combination, through the production of Webpage, design and operational methods described Webpage design some visual effects in the process of.【Key Words】 E-Commerce Web Effects 1.设计的概况1.1设计背景自从1946年世界上第一台电子计算机在美国宾西法尼亚大学莫尔学院问世以来，时至今日互联网早已成为了一条将全球的人们紧紧联系在一起的纽带，特别是在这几年电子商务这种不受时间与空间限制的经营方式出现后现在越来越多的企业都开始重视并乐衷于在互联网上建设自己的官方网站，拥有一个页面精美的网站就相当于在网上建立一个展示企业的精品橱窗，提供了一个让外界了解自己的平台，能够很好的推广企业的文化与实力，扩大市场。一个网页设计的成不成功取决于用户对于这个页面的认可，用户的感受决定了开发者的采用哪种设计方案。在将实习过程与服装网站建设的设计过程相结合的时候，对网页设计与制作过程中的网页布局的方法，框架结构的架构，特效展示的合理安排等相关事项做以下论述。1.2设计目的UI界面的设计，一直都没能在软件设计当中得到很好的重视。大家对界面设计的理解也只是局限于美工而已。 把UI当做只是做一些简单的美术设计去对待，认为UI的工作只是简简单单的绘图，对用户交互的重要性缺乏足够的理解； 认为UI也只是作为次要性的工种，在一个设计团队当中UI工作人员相对于整个团队的人员配比，薪资福利都可以证明这一问题。一个界面设计的友好美观，会让人更容易对商家，对产品产生好感，为商家创造更有优势的卖点。想要通过设计结构层次分明美轮美奂的网页页面达到树立公司形象，宣传产品，招商加盟的目的，UI设计就显得尤为重要。1.3设计要求网页风格要在保证整个页面协调有序的基础上显得有新意和具有时尚的气息、让用户在较短的时间内看到最想看到的内容又不显得凌乱，怎么样让banner、flash和图片所制作的页面协调放置是特别要注重的一点，它强调的是一个协调性而不是简单的理解为一种效果的堆砌；在安排首页的信息分布时要注重主次的区分，不能造成信息冗余。页面要求精致，通过在页面中搭配图片、广告条、flash等装饰手段，让页面产生一种更加生动的展示效果 。可以通过后台控制网页的设计风格的改变以及图片新闻内容内容的更新实现产品的3D效果、产品图片切换效果、产品销售渠道、产品搜索等方面。2.开发工具简介2.1DreamweaverDreamweaver是现在应用最为广泛的可见网页编辑软件，Dreamweaver可以制作出的网页在不同的操作系统平台，浏览器当中都能够得到很好的运行，大大提高了网页的开发效率，这也是现在制作web的最常用工具。Dreamweaver的主要特点有：（1）形式灵活：Dreamweaver将设计与代码可以自由的切换，不仅方便了源代码的编辑，还能在第一时间查看代码所要展现的最直观效果。（2）可视化编辑环境：Dreamweaver是一种可视化的网页编辑软件，由于软件自带的代码生成能力在很多时候我们只要对页面进行版面的设计，节省了开发人员的时间。（3）强大的CSS功能：在网页中使用CSS样式可以有效的将网页对象的外观，网页界面的美化，进行统一修改和管理。Dreamweaver编辑CSS样式表的功能非常完善和强大，用它来编辑CSS样式是非常简单的。（4）集成性高：Dreamweaver与Fireworks，Flash，Shockwave的功能都大同小异，可以在这些Web创作工具之间自由的进行切换。（5）媒体支持能力强：在Dreamweaver里面进行制作时，可以添加很多比如JAVA，Flash，Shockwave，ActiveX这些媒体元素，。（6）Dreamweaver还具有其他软件所不具有的强大扩展能力。2.2PhotoshopPS俗称网站开发软件当中的“三剑客”之一，对图片的特殊效果处理能力，展示出的效果是得到了众多设计者的认可的。2.3ASP.NET技术简介ASP.NET是微软公司使用.NET框架所提供的编程类库所构建成的WEB应用程序开发平台。它使得ASP.NET管理、部署、创建WEB应用程序变的非常简单。ASP.NET的编译程序采用的是通用语言，所以在很多情况下都可以和其他软件兼容。ASP.NET可同时支持C#、VB、Jscript这些目前主流的开发语言，通用性就更广泛了。ASP.NET具有效率高、可重复利用性、代码量少这三大优势。所有ASP.NET代码都可以进行直接的编译，代码量相对于ASP可以减少很多。开发人员还可以按照自己的需要对ASP.NET进行一些功能的移除。3.设计与实现3.1数据库的需求分析现在的很多网站都要求加入数据库管理系统来实现网站内容的管理和数据的维护。在这个系统我选取的是Access这个系统。服装在线销售系统的设计和模块的具体划分以及具有的主要结构和数据项有以下几个方面：用户信息表：用户的编号、用户的名称、用户的密码、用户的权限、Email、密码的问题和答案。购物车信息表：购物的编号、会员的编号、商品的编号、商品的数量、商品的价格和是否结账选项。留言信息表：留言人的ID号、留言人的名称、留言的内容、留言时间和是否删除留言内容等。订单信息表：订单的编号、商品的编号、用户的编号、收货人的姓名、收货的地址、邮政编码、联系人电话、送货方式、付款方式、订单状态、下单时间和订单总额。商品信息表：商品的编号、名称、商品第一级分类、商品第二级分类、是否推荐、是否特价、商品的原来价格、会员优惠价、点击次数、图片路径、商品库存、销售数量、商品描述。回复信息表:回复人的ID号、回复的内容、回复的时间、留言人的ID号和回复人的ID号。3.2数据库的E-R图设计概念模型是对这个世界用一种抽象的方法，在众多的表达方式里面最常用的就是E-R模型图。在E-R图中，实体是用矩形框表示的；椭圆形代表实体的属性；菱形代表实体间的联系，为了更好的设计数据库，清楚简便的描述出实体与属性的关系，图1所示一张包含实体属性的完整E-R图。管理员会员管理用户名密码用户名密码email地址问题查询订单编号名称价格用户数量用户管理留言标题时间管理购物车编号商品数量价格用户答案管理商品库存价格数量编号名称权限图1 E-R模型图3.3数据库的结构创建本系统一共创建了6个用户表，下面对这些表格和其中字段所代表的含义做个简单的介绍。名称：用户信息表。标示：userinfo。数据来源：前台页面获得。用户信息表如表1所示。表1用户信息图表列名类型是否主键说明useridusernamepasswordpoweremailquestionanswer自动编号文本文本数字文本文本文本是是否否否否否用户编号用户名密码1会员2管理员电子邮件密码问题问题答案名称：购物车信息表。标示：cart。数据来源：前台页面获得。购物车信息表如表2所示。表2购物车信息表列名类型是否主键说明cartid userid productid count checkout自动编号数字数字数字是/否是否否否否购物编号用户编号商品编号商品数量是否结帐名称：订单信息表。标示：orders。数据来源：前台页面获得。订单信息表如表3所示。表3订单信息表列名类型是否主键说明OrderedProductidUseridAcceptnameAddressPostalcodePhoneDeliveryPaymentStateOrdertimeOrderprice文本文本数字文本文本文本文本文本文本数字日期/时间货币是否否否否否否否否否否否订单编号商品编号用户编号收货人收货地址邮政编码联系电话送货方式付款方式订单状态下单时间订单总额名称：留言信息表。标示：message。数据来源：前台页面获得。留言信息表如表4所示。表4留言信息表列名类型是否主键说明Messages_IDMessages_NameMessages_ContentMessages_TimeIsDelete自动编号文本备注日期/时间是/否是否否否否留言ID留言人名称留言内容留言时间是否删除名称：商品信息表。标示：products。数据来源：后台页面获得。商品信息表如表5所示。表5商品信息表列名类型是否主键说明ProductidProductnametypeid_1typeid_2recommendedspecialspriceuserpricespecialspricepointcountimagepathcountsellcountdescription自动编号文本数字数字是/否是/否货币货币货币数字文本数字数字备注是否否否否否否否否否否否否否商品编号商品名称商品第一级分类商品第二级分类是否推荐是否特价商品原价会员价格特价点击数量图片路径商品库存数量销售数量商品描述名称：商品一级类别表。标示：type_1。数据来源：后台页面获得。商品一级类别表如表6所示。表6商品一级类别表列名类型是否主键说明typeid_1typename自动编号文本是否商品一级分类商品一级名称名称：商品二级类别表。标示：type_2。数据来源：后台页面获得。商品二级类别表如表7所示。表7商品二级类别表列名类型是否主键说明typeid_2typeid_1typename自动编号数字文本是否否商品二级分类编号商品一级分类编号商品二级名称名称：回复信息表。标示：userinfo。数据来源：前台页面获得。表8回复信息表列名类型是否主键说明Relay_IDRelay_ContentRelay_TimeMessages_IDMUser_ID自动编号备注日期/时间数字数字是否否否否回复ID回复内容回复时间留言ID回复人ID4.系统结构设计与实现4.1系统结构设计这个在线服装销售系统主要分为前台和后台两个功能模块。前台部分是提供给普通用户和那些未注册用户使用的，主要包括用户注册、用户登录、用户中心、常见问题、商品搜索、商品分类、销售排行、新品上架、特价商品、热销商品、购物车和用户留言这些功能模块。后台只有管理员才有权限登录，主要在后台管理留言板、订单信息、会员、商品类别等。4.1.1系统前台功能模块（1）用户功能模块用户功能模块包括用户注册、用户登录、用户中心、常见问题四大模块。用户点击注册的时候，页面会自动跳转到注册页面，用户需要填写用户名、密码、确认密码、电子邮箱、密码问题和密码答案。还可以使用用户名检测功能，找出没有被注册使用的名字。最后点击“注册新用户”按钮进行注册，完成注册之后页面会自动跳转到购物网的首页。用户中心里面对个人资料可以进行修改，也可以在我的订单中查看已经购买的商品，还可以进行密码的修改。常见问题页面显示的是用户在服装销售网站常见的一些问题，新手应先查看常见问题页面。（2） 商品搜索分类模块该模块主要包括商品的搜索、商品的分类、商品销量的排行、新品上架、特价商品、热销商品这几个方面的内容。用户想要购买何种商品可以按照分类去查询。在高级搜索页可以限定搜索的服装类别和服装的价格区间，使得搜索的商品更加符合用户的需求。商品分类可以使用户快捷的查看该服装分类下面的所有服装。销售排行是根据商品销售的数量进行的智能排行，热门商品则是根据所有用户对该服装点击数目进行的排行，点击越多排名越高。特价商品与热销商品是管理员在后台的商品管理中进行手动管理，可以手动添加商品到这两个页面。（3） 购物车模块购物车模块是用户在服装页面点击“购买”按钮之后，将订单信息放在购物车里面，在购物车中可以删除不想买的商品，修改商品的购买数量和最终金额，当购买完成之后点击去收银台，填写自己联系方式和地址并选择付款和快递方式，点击提交后订单就会在后台自动生成订单号。（4） 留言板模块留言板提供了一个用户和网站之间互动交流交流平台，用户通过在留言板上给网站进行留言，包括留言的姓名，标题，内容和一些联系方式。系统前台是为前台会员设计的包括用户功能、商品搜索分类、购物车和留言板，如图2系统前台功能模块系统前台功能模块用户功能商品搜索分类购物车留言板商品搜索商品分类热销商品新品上架特价商品销售排行用户注册用户登录用户中心常见问题图2 系统前台功能模块图4.1.2系统后台功能模块（1）用户管理模块用户管理分为管理员管理与会员管理两大模块。管理员登录后台可以修改用户的账号密码和其他的一些基本信息。当会员很多时，可以利用会员管理的查找会员进行会员查找添加新会员等。（2） 留言管理模块当用户发布留言后管理员可以在后台查看回复留言信息。（3）订单管理模块顾客在前台将中意的商品拍下之后，管理员可以登录后台对订单进行管理，每一笔订单都有一个唯一的编号，通过用户名可以找出相应的订单，在后台可以看见订单的状态，商家将货品发送出去之后顾客收到货物就可以在前台的会员中心确认收货。（4）商品管理模块商品管理包括商品类别管理和商品管理两大模块。管理员可以在后台完成对商品类别的划分。设置完类别之后，管理员可以添加商品，先给商品选定类目，然后给商品添加适当的标题、商品价格、商品库存，添加商品图片，对商品进行详细的描述、还可以选择是否推荐和是否特价，提交保存，进行发布商品修改已发布商品。本系统的后台分为用户管理、留言板管理、订单管理和商品管理四个部分。如图3系统后台功能模块。系统后台功能模块用户管理模块订单管理模块留言板管理模块商品管理模块图3 系统后台功能模块图4.2系统实现4.2.1系统前台功能实现（1）用户功能模块的实现用户注册页面输入：用户名称，用户密码，确认密码，电子邮箱，密码问题，问题答案，点击“注册新用户”按钮。处理：系统会判断用户名有没有被注册过，两次输入的密码是否相同，电子邮箱的格式是否正确。点击 “返回首页”按钮则会返回网站首页。输出：注册成功之后页面会跳转到网站首页，如果注册失败则会提示注册信息在哪里出错，用户修改即可用户注册页面如图4所示图4 用户注册页面用户登录页面输入：用户名称，用户密码，验证码，点击“登录”按钮。处理：系统会在验证码正确无误之后把会员在登录页面所输入的用户名和密码与数据库中会员表的用户名和密码进行比对。输出：当验证码输入不正确，网站会提示输入的验证码有误。当验证码正确，用户名或者密码错误，则网站会提示会员用户名或者密码输入有误。当两者都准确无误则登陆成功跳转到网站首页。用户登录页面如图5所示图5 用户登录页面用户功能模块中的用户中心页面如图6所示；常见问题页面如图7所示。图6 用户中心图7 常见问题（2）商品搜索分类模块的实现商品搜索分类模块可以用，如下图8商品搜索分类模块图，来概括。左边是搜索栏，右边是搜索结果图8 商品搜索分类模块图（3）购物车模块的实现购物车页面输入：商品数量，点击“修改数量”按钮可以对商品的数量进行修改。处理：删除是把单款商品进行删除，清空购物车会将所有的消息清空。输出：网站会自动计算出商品价格。购物车页面如下图9所示。收银台页面输入：收货人的姓名、收货人的地址、邮编、联系方式，选择送货方式和付款方式，点击“确认订单信息并提交订单”按钮。处理：系统会检查用户输入的收货人姓名及地址是否填写，邮编格式是否正确，联系电话是否为空。输出：当收货人、地址和联系电话为空时，网站会提示会员输入正确的信息，当邮编格式错误时，网站会提示输入正确邮编。全部正确则生成订单。收银台页面如下图10所示。图10 收银台页面（4）留言板模块的实现顾客在留言板模块中可以对商家进行留言，如下图11所示图11 留言板页面4.2.2系统后台功能实现（1）用户管理模块的实现管理员可以登录后台完成用户基本信息的管理，查找，添加新用户等。如图12所示。图12 后台用户管理模块图（2） 留言板管理模块的实现管理员登录后台对用户留言进行管理，如图13所示。图13 后台留言板管理模块图（3）订单管理模块的实现管理员登录后台可以对生成的订单信息进行管理，如图14所示。如控制发货和完成交易等，管理员也可以通过这个模块搜索指定用户的所有订单信息。图14 后台订单管理模块图（4） 商品管理模块的实现管理员登录后台修改商品数量，如图15所示。图15 后台商品管理模块图已经添加的商品页可以在列表中对商品进行修改。如图16所示图16 后台商品列表图5.网页制作与实现5.1制作网页的步骤（1）确定网站主题 ：网站主题就是要知道这个网站的用户群体是哪些，它要向它的目标群体传达什么理念，达到什么样的效果。在建设网站时这个主题就应该明确下来，这个课题选取的是以完成一个具有很多特效的服装企业的官网来介绍网页UI设计的完整流程所包含的内容。（2）搜集材料 ：在网站的主题大概已经确定下来之后就要开始着手于素材的寻找了。在网络上有很多的精美的图片以及许多特效代码可以提供我们下载和学习。（3）规划网站 ：一个网站能不能设计的成功在很大程度上是由设计者来决定的，比如网站结构、栏目设置、网站的颜色搭配、版面布局、文字图片运用这些内容都要提前打好草稿，这样在设计过程中就能够有条不紊了。（4）选择制作工具 ：现在的设计软件设计出的网页并不会有很大的差别，但是从众多的软件工具中挑选出一款功能强大、使用简单的软件可以在很大程度上缩短网站的开发时间。（5）制作网页 ：当素材和制作工具都准备就绪之后，就需要按照先大后小，先简后难的原则把自己的想法实现了。所谓先大后小，就是说在制作网页时，先做整体再做具体。所谓先简单后复杂，就是先设计出简单的内容，完成了一个雏形的大概设计之后，再将比较复杂的内容逐一添加进去，出现错误的话也方便修改。5.2网页布局5.2.1常规的页面布局网页设计结构有以下几种：两栏式结构，顶部是网站标志或广告条，下面分为左右两栏，左栏为导航，右栏为主要内容，这种布局方法掌握比较容易，对于内容的分配要看导航和内容哪个占的比重较大。三栏式结构，大型网站中很常见，一般为上面用广告条当横幅，下面分为三竖栏，中间较大的部分是主要的信息，左右放置一些小的广告条之类的内容。三栏式是外网站或者视频类网站应用比较多的一种布局方式，它最大的特点就是可以容纳大量的信息。第三种是左右框架型，这种布局方式在企业网站和论坛上很常见，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结构便于信息的查询，本网站主要使用的就是这种三字型的网页布局方法，网页采用ASP.NET技术，页面布局采用DIV+CSS，数据库使用微软Access来建立，运用ODBC技术把数据库与动态网页联系起来。由于本网站采用传统的静态信息管理系统，由专门的文字录入员将资料信息输入数据库中，所以数据量不是非常大，使用Access足以胜任数据的存储。5.2.2页面的配色方案网站在设计之前就应该把整体页面的颜色搭配考虑好。在进行选择的时候一般是按照下面几个方面进行选择的。1 目标客户：每个客户群的爱好往往是不同的，但是相同年龄或者职业的客户会存在一些共通的地方。2 当地文化风俗：在不同的地域对于颜色的喜好是不一样的。3 网站的类型：比如服装企业这种网站基本都是用暖色调做为网页的主题色调的。4 品牌形象：色调在很大程度上还要从企业要展示的形象着手，如果是电器类的网站的话，那页面的风格整体就会以冷色调为主。在本系统中所面对的客户年龄段是18-30左右的女性，那么在色调的选择，和页面的风格上就着重于传达一种青春与活力的感觉，所以在用色上面用的基本上是粉色这种暖色调。5.2.3页头和页尾大型网站一般采用的是比较简单的头部，因为他本身的知名度已经很高了，所以不需要通过特意设计头部来达到标新立异的效果。比如新浪，腾讯等大型网站都是这样的。对于一些小网站来说，因为它的权重不高，所以如果有一个吸引人的头部的话会更容易得到大家的青睐，但是一味的追求头部忽略其他内容的话会适得其反。Logo在页头的设计过程中是最为重要的一部分，Logo的作用有两个，一个是作为网站的独特标记，一个是作为用户返回到首页的导航。页尾一般来说是属于次要性的内容，用户也很少会去注意页尾，简单的设计就可以了。5.2.4关于广告互联网是用广告收入来盈利的。但是按照我们用户的使用习惯，我们并不喜欢浏览时会掺杂太多广告。所以要在一个网站中添加广告要尊重用户的习惯将用户的体验放在首位。首先，用户最能接受滚动式广告和横幅式广告，而弹出广告和邮件广告常被误以为是病毒插件用户也对这个特别反感。其次，很多用户看到广告认为该页面的内容已经中止，那这样的话客户的滞留性就降低了，所以在设计的时候要考虑好广告的放置会不会影响到页面内容的展示。然后，我们要避免过多的广告同时出现。网站的广告大小也要安排好。5.2.5表单的布局设计这里就从注册来看，这个是最典型的表单。现在的布局方式大体上分为垂直对齐，左对齐和右对齐三种方式。垂直对齐的设计方式可以大大缩减填写的时间，但是如果项目太多的话会比较占空间。左对齐便于用户浏览标签，对空间的需求会更少。但有的时候标签太长会出现文字与文本框距离过远的问题。所以这种方式常用于标签文字较短的设计场合。右对齐方式是最为少见的一种方式一般不建议采用。对于很多选项来说，都会设置默认选项，可以大量减少用户的操作。5.2.6按钮首先要用较大的，颜色较为醒目的按钮让按钮与网页更好的区分开来，让用户在最短的时间完成想要的操作。其次，我们需要根据按钮的重要性来突出主要的按钮，还有要按照用户的浏览方式来放置按钮的位置。5.2.7反馈反馈系统在网站设计过程中也是很重要的，其中包括成功提示和失败提示两个。成功提示只需要完成提示的功能所以也是最简单的。只需要让用户知道就可以了。失败提示会比较繁琐，它需要用文字或者弹窗来提示用户。但是弹窗经常会有声音，不建议大家使用。还有错误页面，一个好的404页面设计能够改善用户的不良体验减少用户的挫败感，还可以将用户引导到正确内容那边，提高用户在网站的滞留率。首页布局:三型结构logowelcome导航条商品分类菜单FLASHT图片展示区新闻新商品展示区热销商品展示区特价促销商品展示区 客服中心子页布局:左右结构LogoWelcome导航条菜单 内容客服中心5.3特效实现FLASH效果:代码：/ 产品图片的放大效果:代码：(function($)$(document).ready(function()$(.cloud-zoom, .cloud-zoom-gallery).CloudZoom();function format(a)for(var i=1;iarguments.length;i+)a=a.replace(%+(i-1),argumentsi)return afunction CloudZoom(g,i)var j=$(img,g);var k;var l;var m=null;var n=null;var o=null;var p=null;var q=null;var r=null;var s;var t=0;var u,ch;var v=0;var z=0;var A=0;var B=0;var C=0;var D,my;var E=this,zw;setTimeout(function()if(n=null)var w=g.width();g.parent().append(format(Loading.,w/3,(w/2)-(w/6).find(:last).css(opacity,0.5),200);var F=function()if(r!=null)r.remove();r=null;this.removeBits=function()if(o)o.remove();o=nullif(p)p.remove();p=nullif(q)q.remove();q=nullF();$(.cloud-zoom-loading,g.parent().remove();this.destroy=function()g.data(zoom,null);if(n)n.unbind();n.remove();n=nullif(m)m.remove();m=nullthis.removeBits();this.fadedOut=function()if(m)m.remove();m=nullthis.removeBits();this.controlLoop=function()if(o)Var x=(D-j.offset().left-(u*0.5)0;var y=(my-j.offset().top-(ch*0.5)0;if(x(j.outerWidth()-u)x=(j.outerWidth()-u)if(y(j.outerHeight()-ch)y=(j.outerHeight()-ch)o.css(left:x,top:y);o.css(background-position,(-x)+px +(-y)+px);v=(x)/j.outerWidth()*s.width)0;z=(y)/j.outerHeight()*s.height)0;B+=(v-B)/i.smoothMove;A+=(z-A)/i.smoothMove;m.css(background-position,(-(B0)+px )+(-(A0)+px)t=setTimeout(function()E.controlLoop(),30);this.init2=function(a,b)C+;if(b=1)s=aif(C=2)this.init();this.init=function()$(.cloud-zoom-loading,g.parent().remove();n=g.parent().append(format(,j.outerWidth(),j.outerHeight(),0,0).find(:last);n.bind(mousemove,this,function(a)D=a.pageX;my=a.pageY);n.bind(mouseleave,this,function(a)clearTimeout(t);if(o)o.fadeOut(299)if(p)p.fadeOut(299)if(q)q.fadeOut(299)m.fadeOut(300,function()E.fadedOut();return false);n.bind(mouseenter,this,function(a)D=a.pageX;my=a.pageY;zw=a.data;if(m)m.stop(true,false);m.remove()var b=i.adjustX,yPos=i.adjustY;var c=j.outerWidth();var d=j.outerHeight();var w=i.zoomWidth;var h=i.zoomHeight;if(i.zoomWidth=auto)w=cif(i.zoomHeight=auto)h=dvar e=g.parent();switch(i.position)casetop:yPos-=h;break;caseright:b+=c;break;casebottom:yPos+=d;break;caseleft:b-=w;break;caseinside:w=c;h=d;break;default:e=$(#+i.position);if(!e.length)e=g;b+=c;yPos+=delsew=e.innerWidth();h=e.innerHeight()m=e.append(format