等待-放飞梦想 » 焦点图

分享Flight主题中的焦点图（基于JQ）

Await — Tue, 12 Oct 2010 13:05:24 +0000

关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动，淡入淡出）三种动画模式。可以设置执行时间。可以自定义大小，方便应用。可以选择是否自动切换。还是上代码吧。也没啥说的了。

/*参数：
------------------------------------------------------------------------
obj: 要切换的对像[ID,Class]
animation: 设置切换方式 [left(向左滚动),top(向上滚动),fade(淡入淡出)]
time: 设置每次动画执行间隔时间 [单位毫秒)]
speed: 设置每次动画执行时间 [单位毫秒]
auto: 设置是否显自动切换 [可选值为:true,false]
cssName: 附加Class名称 [自定义焦点图容器样式,可以不填]
-------------------------------------------------------------------------
//示例:
-------------------------------------------------------------------------

-------------------------------------------------------------------------

//example1.jQFocus("#ifocus","left",2000,500,true);

-------------------------------------------------------------------------

//example2.jQFocus("#ifocus","top",2000,500,true,"border_red");

------------------------------------------------------------------------*/

function jQFocus(obj,animation,time,speed,auto,cssName) {

var t = n =0,li=$(obj+" li"),count = $(obj+" li").size();

_width = $(obj).width(),_height = $(obj).height();

$(obj).css({width: (_width)+"px",height:_height+"px"}).attr("class",cssName);

$("

").appendTo(obj);

$("").appendTo(obj).html($(".ifocus_list li:first-child").find("img").attr('alt'));

var num='

;

for(var i=0;i<count;i++){num+='
'+(i+1)+'

}

;

num+='

$(obj).append(num);

$(obj+" .ifocus_control li:first-child").addClass("current");

$(".ifocus_title").click(function(){window.open($(".ifocus_list a:first-child").attr('href'), "_blank")});

$(obj+" .ifocus_control li").click(function() {

var i = $(this).text() - 1;

n = i;

if (i >= count) return;

animation = animation.substring();

switch(animation) {

case "left":

$(obj+" .ifocus_list").css({width:(_width*count)+"px",height:_height+"px"});

$(obj+" .ifocus_list li").css({float:"left",height:_height+"px"});

$(obj+" .ifocus_list").animate({left:-(_width*i)},speed);

break;

case "top":

$(obj+" .ifocus_list").animate({top:-(_height*i)},speed);

break;

case "fade":

$(obj+" .ifocus_list li").filter(":visible").fadeOut(speed).parent().children().eq(i).fadeIn(speed);

}

$(".ifocus_title").html($(".ifocus_list a").eq(i).find("img").attr('alt'));

$(this).addClass("current").siblings().removeClass("current");

});

if(auto==true ) {

showAuto = function (){

n = n >= (count - 1) ? 0 : ++n;

$(obj+" .ifocus_control li").eq(n).trigger('click');

}

t = setInterval("showAuto()", time);

$(obj).hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", time);});

}

对于代码这个也没啥说的了。会点JQ的能看懂。看不懂的我也说不明白。例子就在文章的头上；

2011-09-08 -- jQuery中queue和dequeue的用法 (1)
今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
已更新为2.7...
2010-10-12 -- jquery ajax方法如load,get等在Chrome下失效的问题 (4)
最近碰到一个问题，发现jquery在chrome 中， ajax的load get等方法完全失效。代码如下： function getHtml(url,ctner){ //alert(c...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...

从篱笆网提取的一个焦点图切换

Await — Mon, 30 Mar 2009 14:33:21 +0000

今天群里的一个朋友看到这个焦点图，看了下，还蛮漂亮的，于是提出来分享下。这个焦点图是基于jQuery的。所以很合适放到WordPress里来。而且它的背景图是放在一张图上的。很大，要用的话得把里面焦点图部分单独切出来。看下效果图。

提示：你可以先修改部分代码再运行。

2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2008-11-06 -- 北京奥运官方网站幻灯切换效果JS版 (3)
我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下. 佐佐制造byzuo.cn---焦点图片第三季 ...

北京奥运官方网站幻灯切换效果JS版

Await — Thu, 06 Nov 2008 00:54:38 +0000

我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>佐佐制造byzuo.cn---焦点图片第三季</title> <style type="text/css"> /* Reset style */ * { margin:0; padding:0; word-break:break-all; } body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size:1em; } a { color:#0287CA; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } fieldset, img { border:none; } legend { display:none; } em, strong, cite, th { font-style:normal; font-weight:normal; } input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; } table { border-collapse:collapse; } html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/ /* iFocus style */ #ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; } #ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; } #ifocus_piclist { position:absolute; } #ifocus_piclist li { width:410px; height:225px; overflow:hidden; } #ifocus_piclist img { width:410px; height:225px; } #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; } #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; } #ifocus_btn .current { background: url(http://www.byzuo.cn/demo/iFocus/img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); } #ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); } #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; } #ifocus_tx .normal { display:none; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function(){ oldonload(); func(); } } } function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); } function classNormal(iFocusBtnID,iFocusTxID){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); for(var i=0; i<iFocusBtns.length; i++) { iFocusBtns[i].className='normal'; iFocusTxs[i].className='normal'; } } function classCurrent(iFocusBtnID,iFocusTxID,n){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); iFocusBtns[n].className='current'; iFocusTxs[n].className='current'; } function iFocusChange() { if(!$('ifocus')) return false; $('ifocus').onmouseover = function(){atuokey = true}; $('ifocus').onmouseout = function(){atuokey = false}; var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); var listLength = iFocusBtns.length; iFocusBtns[0].onmouseover = function() { moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (listLength>=2) { iFocusBtns[1].onmouseover = function() { moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } } if (listLength>=3) { iFocusBtns[2].onmouseover = function() { moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } } if (listLength>=4) { iFocusBtns[3].onmouseover = function() { moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } } } setInterval('autoiFocus()',5000); var atuokey = false; function autoiFocus() { if(!$('ifocus')) return false; if(atuokey) return false; var focusBtnList = $('ifocus_btn').getElementsByTagName('li'); var listLength = focusBtnList.length; for(var i=0; i<listLength; i++) { if (focusBtnList[i].className == 'current') var currentNum = i; } if (currentNum==0&&listLength!=1 ){ moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } if (currentNum==1&&listLength!=2 ){ moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } if (currentNum==2&&listLength!=3 ){ moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } if (currentNum==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==1&&listLength==2 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==2&&listLength==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } } addLoadEvent(iFocusChange); </script> </head> <body> <div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" style="left:0; top:0;"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> <li class="current">火箭85-78马刺姚明依旧像新秀a1</li> <li class="normal">阿德尔曼：姚明进攻太犹豫火箭还有很长路要走b2</li> <li class="normal">阿联脚伤未出场卡特意外受伤网队加时险胜热队c3</li> <li class="normal">帕杜惊讶能留住郑智英媒称查尔顿升超要靠d4</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current"></li> <li class="normal"></li> <li class="normal"></li> <li class="normal"></li> </ul> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

主要效果：
1.大图，小图，及对应的标题，自动每5秒活动焦点变化一次
2.当鼠标移到此效果上面时，停止每5秒自动焦点变化
3.当鼠标移动到四个小图上时，焦点变换到相对应的大图及标题
4.当传的内容过少只存在1,2,3个列表，循环时不影响效果自动轮换活动

扩展修改：
1.为适应网页布局时，在修改大小时，大图，小图对应的img需要修改
2.大图是利用top值滚动，相对应的值top值在js里也需要修改
3.然后对滚动时间间隔可在setInterval(’autoiFocus()’,5000)中对5000进行修改,5000=5秒；

2009-06-11 -- jQuery 实现 tab 切换一例 (11)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
2010-08-10 -- firefox与ie 的javascript区别 (19)
浏览器的兼容问题目前还是一个头痛的问题。除了CSS的兼容性，Javascript的兼容有时候更容易让人头痛。下面收集的一些关于Firefox和IE的区别作个记号，需要的时候看看 1. Docum...
2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-08-28 -- jQuery实现背景图渐变切换 (10)
链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...

您可能也喜欢：
Flight主题更新	WordPress主题：perfct 1.0	从篱笆网提取的一个焦点图切换	WordPress主题”Dreamy”发布	WordPress“主题壁纸”
无觅

您可能也喜欢：
分享Flight主题中的焦点图（基于JQ）	用jQuery处理文本框的焦点[focus]状态	最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)	主题Dreamy更新到v2.0 [06-18 00:08]	CSS处理斜角导航条的一个例子
无觅

您可能也喜欢：
利用WP自带的JS库打造超酷的侧边栏	给网站整了一个小小的ICO了	Windows Internet Explorer 8 简体中文正式版	寻找Photoshop笔刷的15个好去处	浅议Web网页Form表单设计技巧
无觅

等待-放飞梦想 » 焦点图

分享Flight主题中的焦点图（基于JQ）

相关文章

从篱笆网提取的一个焦点图切换

相关文章

北京奥运官方网站幻灯切换效果JS版

相关文章