JQUERY图片放大镜，图片切换-插件特效-星河码客

在本教程中我们将创建一些不错的效果与jQuery组合或类似的网站。我们将创建一个小滑块并将其集成与神奇云变焦插件和优雅Fancybox插件.对于每个项目,我们将有一个div元素。我们将添加一个元素的缩略图滑块我们会给类“thumb_wrapper”和一个元素描述与各自的类名称:

Hover to zoom, click to view

Portfolio Item

Some description

另外,我们将添加以下属性和类名,每个链接元素:...CSS首先,我们将定义的风格单品:.item{ float:left; width:100%; clear:both; margin:35px 0px;}现在,我们将拇指位置包装器包含导航和缩略图的滑块:.thumb_wrapper{ width:290px; height:107px; position:relative; float:left; margin:20px 40px 0px 0px;}将绝对定位的导航元素。这就是为什么我们需要设置父相对位置。常见的风格的导航元素是:.thumb_wrapper a.prev,.thumb_wrapper a.next{ width:30px; height:30px; position:absolute; top:50%; margin-top:-15px; outline:none; cursor:pointer;}为每个导航元素和个人风格如下:.thumb_wrapper a.prev{ left:0px; background:transparent url(../images/fancy_nav_left.png) no-repeat top left;}.thumb_wrapper a.next{ right:0px; background:transparent url(../images/fancy_nav_right.png) no-repeat top left;}风格的小信息跨下的滑块:.thumb_wrapper span{ display:block; text-align:center; font-size:11px; font-style:italic; margin-top:3px;}拇指的容器元素是无序列表缩略图。我们将设置溢出隐藏,因为我们不想让我们的列表显示:.thumb{ margin-left:40px; width:210px; height:107px; overflow:hidden; -moz-box-shadow:1px 1px 3px #555; -webkit-box-shadow:1px 1px 3px #555; box-shadow:1px 1px 3px #555;}ul的缩略图会动态地计算宽度将覆盖以下之一:.thumb ul{ list-style:none; width:800px; height:107px;}列表项必须流了,我们一行中的所有缩略图。我们的想法是,动画ul到正确的位置,揭示未来/以前的缩略图在我们“行”。.thumb ul li{ float:left;}让我们装饰缩略图:.thumb ul li a img{ border:5px solid #fff;}描述将浮动的滑块:.description{ width:620px; float:right;}JAVASCRIPT主要的想法是创建一个小滑块,用户可以浏览缩略图的组合项目。然后,悬停在缩略图的时候,我们想要一个放大版的徘徊的一部分缩略图出现在右边。点击缩略图时,我们希望Fancybox出现,允许用户查看完整图像和浏览。所以,我们将首先包括必要的样式表和脚本。首先,我们将增加我们的HTML的样式表头部:然后,我们将添加HTML的结束所有的脚本:在我们的jQuery函数将首先初始化Fancybox然后我们将定义滑块的功能。如前所述,云变焦插件参数中设置“rel属性的链接元素包装了缩略图图像。让我们来初始化Fancybox:$("#content .cloud-zoom").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'none', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : true, 'overlayColor' : '#000', 'cyclic' : true, 'easingIn' : 'easeInOutExpo'});我们现在需要处理冲突,这是由于云变焦插件添加一个div元素的链接元素。它与Fancybox插件冲突因为我们不能点击链接元素(它的覆盖)。所以,我们将添加一个小函数,将触发点击链接每当我们点击类的div元素“捕鼠器”,生成的云缩放插件:$("#content .mousetrap").live('click',function(){ $(this).prev().trigger('click');});现在,我们将为我们的滑块定义一些变量:var $content = $('#content'),$thumb_list = $content.find('.thumb > ul');滑块ul需要得到一个分配给它的宽度,里面每个缩略图的宽度的总和。我们还将定义导航按钮的点击事件:$thumb_list.each(function(){ var $this_list = $(this), total_w = 0, loaded = 0, //preload all the images first $images = $this_list.find('img'), total_images= $images.length; $images.each(function(){ var $img = $(this); $('').load(function(){ ++loaded; if (loaded == total_images){ $this_list.data('current',0).children().each(function(){ total_w += $(this).width(); }); $this_list.css('width', total_w + 'px'); //next / prev events $this_list.parent() .siblings('.next') .bind('click',function(e){ var current = $this_list.data('current'); if(current == $this_list.children().length -1) return false; var next = ++current, ml = -next * $this_list.children(':first').width(); $this_list.data('current',next) .stop() .animate({ 'marginLeft' : ml + 'px' },400); e.preventDefault(); }) .end() .siblings('.prev') .bind('click',function(e){ var current = $this_list.data('current'); if(current == 0) return false; var prev = --current, ml = -prev * $this_list.children(':first').width(); $this_list.data('current',prev) .stop() .animate({ 'marginLeft' : ml + 'px' },400); e.preventDefault(); }); } }).attr('src',$img.attr('src')); });});这就是一切!我们适应Fancybox脚本稍微为了显示导航箭头经常当悬停在完整的形象。同时,我们改编的z-indexes Fancybox样式表中的元素(我们添加了10000每个z - index)以处理页面中的其他元素和云放大元素。在云中变焦脚本的位置我们添加了另一个理由,因为我们需要放大元素附加到身体使用缩略图的绝对位置。

JQUERY图片放大镜，图片切换

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»