大数跨境
首页
>
网页设计技巧：使用 jQuery 和 jFlow 为你的网站添加特色展示区
>

网页设计技巧：使用 jQuery 和 jFlow 为你的网站添加特色展示区

网页设计技巧：使用 jQuery 和 jFlow 为你的网站添加特色展示区 电商实践
2009-05-06
1
导读：平滑的内容滑块是一种小部件，可以展示可点击的产品图片、Adobe Flash、HTML 或其他内容，从而在有限的空间内有效地创建一个“特色区域”。在研究了几种所谓的“简易”解决方案（大多数都不起作用）

内容平滑滑动的滑块是一种可在有限空间内高效创建“特色区域”的小部件，用于展示可点击的产品图片、Adobe Flash、HTML或其他内容。

在尝试多种所谓的“简单”解决方案（大多无效）后，我选用了已发布近一年的 jFlow 插件。jFlow 是由加州开发者 Kean Loong Tan 创建的轻量级 JavaScript 插件，加载速度快，便于网站所有者集成流式内容滑块。本文将快速演示如何在电子商务网站设计中整合 jFlow。（可查看演示站点了解实际效果）。

基于 jQuery

jFlow 依赖 jQuery——一个简洁的 JavaScript 库，帮助开发者用更少代码实现更多功能。据官方介绍，jQuery “简化了 HTML 文档遍历、事件处理、动画及 AJAX 交互，从而加速 Web 开发。”

需要四个文件

要使 jFlow 正常运行，需准备以下四个文件：

首先，下载精简版 jQuery 库。本演示使用的是当时最新的 jQuery 1.3.2 版本。

其次，获取 jFlow 插件。下方提供 1.2 版本代码，也可从源码处直接下载。

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * jFlow * Version: 1.2 (July 7, 2008) * Requires: jQuery 1.2+ */ (function($) { $.fn.jFlow = function(options) { var opts = $.extend({}, $.fn.jFlow.defaults, options); var randNum = Math.floor(Math.random()*11); var jFC = opts.controller; var jFS = opts.slideWrapper; var jSel = opts.selectedWrapper; var cur = 0; var maxi = $(jFC).length; // sliding function var slide = function (dur, i) { $(opts.slides).children().css({ overflow:"hidden" }); $(opts.slides + " iframe").hide().addClass("temp_hide"); $(opts.slides).animate({ marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")}, opts.duration*(dur), opts.easing, function(){ $(opts.slides).children().css({ overflow:"auto" }); $(".temp_hide").show(); } ); } $(this).find(jFC).each(function(i){ $(this).click(function(){ if ($(opts.slides).is(":not(:animated)")) { $(jFC).removeClass(jSel); $(this).addClass(jSel); var dur = Math.abs(cur-i); slide(dur,i); cur = i; } }); }); $(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS); $(opts.slides).find("div").each(function(){ $(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev()); }); //initialize the controller $(jFC).eq(cur).addClass(jSel); var resize = function (x){ $(jFS).css({ position:"relative", width: opts.width, height: opts.height, overflow: "hidden" }); //opts.slides or #mySlides container $(opts.slides).css({ position:"relative", width: $(jFS).width()*$(jFC).length+"px", height: $(jFS).height()+"px", overflow: "hidden" }); // jFlowSlideContainer $(opts.slides).children().css({ position:"relative", width: $(jFS).width()+"px", height: $(jFS).height()+"px", "float":"left", overflow:"auto" }); $(opts.slides).css({ marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px") }); } // sets initial size resize(); // resets size $(window).resize(function(){ resize(); }); $(opts.prev).click(function(){ if ($(opts.slides).is(":not(:animated)")) { var dur = 1; if (cur > 0) cur--; else { cur = maxi -1; dur = cur; } $(jFC).removeClass(jSel); slide(dur,cur); $(jFC).eq(cur).addClass(jSel); } }); $(opts.next).click(function(){ if ($(opts.slides).is(":not(:animated)")) { var dur = 1; if (cur < maxi - 1) cur++; else { cur = 0; dur = maxi -1; } $(jFC).removeClass(jSel); slide(dur, cur); $(jFC).eq(cur).addClass(jSel); } }); }; $.fn.jFlow.defaults = { controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign easing: "swing", duration: 400, width: "100%", prev: ".jFlowPrev", // must be class, use . sign next: ".jFlowNext" // must be class, use . sign }; })(jQuery);

第三，编写 HTML 代码以向访客展示内容。以下为视频中使用的示例代码：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt; &lt;title&gt;Practical j&lt;/title&gt; &lt;link href="grillstyle.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="jquery.flow.1.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready(function(){ $("#myController").jFlow({ slides: "#mySlides", width: "390px", height: "370px", duration: 100 }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;div id="head"&gt; &lt;h1&gt;Summer Product Specials&lt;/h1&gt; &lt;p&gt;Cool Deals for Hot Days&lt;/p&gt; &lt;/div&gt;&lt;!--end head--&gt; &lt;div id="myController"&gt; &lt;span class="jFlowControl"&gt;Genesis EP-310 Grill&lt;/span&gt; &lt;span class="jFlowControl"&gt;Q 140 Electric Grill&lt;/span&gt; &lt;span class="jFlowControl"&gt;22.5-Inch Cooker/Smoker &lt;/span&gt; &lt;span class="jFlowControl"&gt;Summit E-650 Gas Grill &lt;/span&gt; &lt;/div&gt; &lt;div id="mySlides"&gt; &lt;div&gt;&lt;img src="img/ep-310.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Genesis EP-310 Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;img src="img/q-140.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Q 140 Electric Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;img src="img/smoker.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber 22.5-inch Smokey Mountain Cooker&lt;/p&gt;&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;img src="img/summit.png" alt="Weber Grill" /&gt;&lt;span&gt;&lt;p&gt;Weber Summit E-650 Gas Grill&lt;/p&gt;&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;span class="jFlowPrev"&gt;&lt;img src="img/prev.png" alt="previous" /&gt;&lt;/span&gt; &lt;span class="jFlowNext"&gt;&lt;img src="img/next.png" alt="next" /&gt;&lt;/span&gt; &lt;/div&gt;&lt;!--end wrapper--&gt; &lt;/body&gt; &lt;/html&gt;

最后，使用 CSS（层叠样式表）对内容进行样式设置，示例如下：

body {margin: auto; text-align: center; color: #000000; font-family: Arial; } #wrapper {text-align: center;} #head {} #jFlowSlide {margin: auto;} #myController {background: #3b1f11; line-height: 200%; color: #ffffff; cursor: pointer; } #myController span {padding: 1px 5px 1px 5px;} h1 {font-weight: bold; font-stretch: extra-expanded;} p {font-style: italic;} .jFlowPrev img {position: relative; float: left; margin-top: -200px; padding-left: 25%; cursor: pointer;} .jFlowNext img {position: relative; float: right; margin-top: -200px; padding-right: 25%; cursor: pointer; }

资源

  • jFlow 1.0
  • jFlow 1.1
  • jFlow 1.2
  • jQuery 官网
  • 下载 jQuery 1.2.3
  • 视频中展示的演示页面
【声明】内容源于网络
0
0
电商实践
电商实践
内容 8053
粉丝 0
电商实践 电商实践
总阅读37.4k
粉丝0
内容8.1k