`
realic
  • 浏览: 17882 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Jquery和CSS3实现图片鱼眼显示效果

阅读更多

Jquery和CSS3实现图片鱼眼显示效果
 

记得在Flex中实现鱼眼效果的图片展示功能非常容易,对于JS而言,则略显复杂。但如今jquery和CSS3的组合,使得这种功能变得异常容易。今天我们就学习如何利用jquery和CSS3来实现各种不同的鱼眼效果。

鱼眼图片显示效果

 基本效果:鼠标移动到图片上时,放大图片同时将该图片周围的图片适当放大,形成一个鱼眼效果,图片依次高亮显示。我们可以参看http://porscheeveryday.com/ 这个swf的显示效果。为了用jquery实现该效果,我们将使用一个插件 jQuery Proximity plugin 作者 James Padolsey.

现在让我们一步步学习如何实现类似的鱼眼效果。首先我们构建主容器展示图片。采用ul无序列表方式来组织图片,代码如下
<ul id="pe-thumbs" class="pe-thumbs">
     <li><a href="#"><img src="images/thumbs/1.jpg" />
             <div class="pe-description"><h3>鱼眼效果</h3><p>美瑞网www.mxria.com</p></div></a></li>
     <li><!-- ... --></li>
</ul>
主容器构建好后,我们接下来定义样式。CSS3代码如下,背景采用透明处理,同时给容器加上了阴影效果。

	.pe-thumbs:before {     content: "";

	     display: block;

	     position: absolute;

	     top: 0px;

	     left: 0px;

	     width: 100%;

	     height: 100%;

	     background: rgba(255,102,0,0.2);

	 } 

为了增加更好的效果,我们使用:before伪元素增添了对比效应。这里出现了一个很特别的伪元素:rgba,这里对其简要说明。background在CSS3中得到了大力增强,背景透明效果如上面的代码中有用到,而rgba它的效果类似opacity,可以取得很风骚的半透明的效果,如果应用到合适的配色,效果很赞。最主要的区别是,它不会将该区块里头含有的文字也变成半透明,只是改变容器区块。

   .pe-thumbs:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,102,0,0.2);
}

为每个图片项设置相应的样式,定义其位置、透明度。

 

.pe-thumbs li{
    float: left;
    position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
    display: block;
    position: relative;
}

其他部分略过,大家可以看源代码中的内容。下面来看看Javascript部分。

JS部分主要的思路就是当鼠标接近图片后,对利用hover效果来触发,对光标悬停的图片进行位置计算,并将其相连的图片进行对应的样式转换,其中核心的内容就是识别出主容器边缘的图片,并进行相应处理。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
    // list of thumbs
var $list       = $('#pe-thumbs'),
    // list's width and offset left.
    // this will be used to know the position of the description container
    listW       = $list.width(),
    listL       = $list.offset().left,
    // the images
    $elems      = $list.find('img'),
    // the description containers
    $descrp     = $list.find('div.pe-description'),
    // maxScale : maximum scale value the image will have
    // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
    settings    = {
        maxScale    : 1.3,
        maxOpacity  : 0.9,
        minOpacity  : Number( $elems.css('opacity') )
    },
    init        = function() {
   
        // minScale will be set in the CSS
        settings.minScale = _getScaleVal() || 1;
        // preload the images (thumbs)
        _loadImages( function() {
   
            _calcDescrp();
            _initEvents();
   
        });
   
    },
    // Get Value of CSS Scale through JavaScript:
    _getScaleVal= function() {
   
        var st = window.getComputedStyle($elems.get(0), null),
            tr = st.getPropertyValue("-webkit-transform") ||
                 st.getPropertyValue("-moz-transform") ||
                 st.getPropertyValue("-ms-transform") ||
                 st.getPropertyValue("-o-transform") ||
                 st.getPropertyValue("transform") ||
                 "fail...";
   
        if( tr !== 'none' ) {    
   
            var values = tr.split('(')[1].split(')')[0].split(','),
                a = values[0],
                b = values[1],
                c = values[2],
                d = values[3];
   
            return Math.sqrt( a * a + b * b );
   
        }
   
    },
    // calculates the style values for the description containers,
    // based on the settings variable
    _calcDescrp = function() {
   
        $descrp.each( function(i) {
   
            var $el     = $(this),
                $img    = $el.prev(),
                img_w   = $img.width(),
                img_h   = $img.height(),
                img_n_w = settings.maxScale * img_w,
                img_n_h = settings.maxScale * img_h,
                space_t = ( img_n_h - img_h ) / 2,
                space_l = ( img_n_w - img_w ) / 2;
   
            $el.data( 'space_l', space_l ).css({
                height  : settings.maxScale * $el.height(),
                top     : -space_t,
                left    : img_n_w - space_l
            });
   
        });
   
    },
    _initEvents = function() {
   
        $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
   
            var $el         = $(this),
                $li         = $el.closest('li'),
                $desc       = $el.next(),
                scaleVal    = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
                scaleExp    = 'scale(' + scaleVal + ')';
   
            // change the z-index of the element once
            // it reaches the maximum scale value
            // also, show the description container
            if( scaleVal === settings.maxScale ) {
   
                $li.css( 'z-index', 1000 );
   
                if( $desc.offset().left + $desc.width() > listL + listW ) {
   
                    $desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
   
                }
   
                $desc.fadeIn( 800 );
   
            }
            else {
   
                $li.css( 'z-index', 1 );
   
                $desc.stop(true,true).hide();
   
            }   
   
            $el.css({
                '-webkit-transform' : scaleExp,
                '-moz-transform'    : scaleExp,
                '-o-transform'      : scaleExp,
                '-ms-transform'     : scaleExp,
                'transform'         : scaleExp,
                'opacity'           : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
            });
   
        });
   
    },
    _loadImages = function( callback ) {
   
        var loaded  = 0,
            total   = $elems.length;
   
        $elems.each( function(i) {
   
            var $el = $(this);
   
            $('<IMG>').load( function() {
   
                ++loaded;
                if( loaded === total )
                    callback.call();
   
            }).attr( 'src', $el.attr('src') );
   
        });
   
    };
   
return {
    init    : init
};

参考英文原文http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/ 翻译时非直译,加入了自己的理解。 DEMO  源代码下载 


作者:夜飞羽 来源:www.mxria.com  时间:2012-02-27
分享到:
评论

相关推荐

    鱼眼菜单导航效果 jquery

    鱼眼菜单(Fisheye Menu)是一种独特的网页导航设计,它通过使用jQuery库来实现动态、可扩展的视觉效果,使用户能够直观地浏览和选择菜单项。这种菜单样式通常表现为一个放大或挤压的视图,当鼠标悬停在菜单项目上时...

    基于jquery的鱼眼效果展示(fish eye)

    接着,为了实现鱼眼效果,我们需要引入jQuery库(通常从CDN获取)和自定义的JavaScript代码(位于js文件夹中的文件)。jQuery的`$(document).ready()`函数用于确保在页面加载完成后执行代码。 ```javascript $...

    jquery仿mac效果插件

    在jQuery插件中,这些效果通常通过CSS3属性和JavaScript动画来实现。例如,光晕效果可以通过调整元素的阴影和透明度来模拟;反射效果则利用CSS3的渐变和翻转;放大镜效果则是通过动态改变元素大小和模糊度来达到视觉...

    使用javascript实现鱼眼菜单

    在JavaScript中实现鱼眼菜单,我们可以利用jQuery库来简化操作,因为jQuery提供了一套丰富的API,使得DOM操作、事件处理和动画效果变得更加便捷。在这个例子中,`jquery.fisheye.js`是实现鱼眼菜单功能的核心脚本,...

    JQuery Fisheye实例

    这种特效的实现依赖于CSS(层叠样式表)和JavaScript的结合,通过调整元素的大小、位置和透明度来模拟鱼眼镜头的效果。 实现鱼眼菜单的基本步骤如下: 1. **HTML结构**:首先,我们需要创建一个包含菜单项的容器,...

    Web鱼眼菜单

    3. **性能优化**:动态效果可能会增加页面的计算负担,因此在实现鱼眼菜单时,需要关注JavaScript性能,避免因过度动画导致页面卡顿。 4. **一致性**:鱼眼菜单应与网站的整体风格和品牌保持一致,避免因为独特的...

    fisheye-menu Jquery实现的导航菜单

    Fisheye Menu这个名字来源于其设计灵感,即模拟鱼眼镜头的放大效果,当鼠标靠近菜单项时,相应的菜单项会像鱼眼镜头一样扩大显示,提供更直观的视觉反馈。 Jquery是一个广泛使用的JavaScript库,它的目标是使...

    基于jQuery实现放大镜效果

    使用CSS对容器和图片进行样式设置,确保它们的布局符合设计要求。通过JavaScript和jQuery对页面元素进行操作,响应用户的鼠标移动事件,并通过计算和DOM操作来显示放大后的图片区域。 在实际编写jQuery插件时,需要...

    30_个_jQuery_导航菜单插件和教程.doc

    **概述**:使用CSS3和jQuery实现下拉式导航菜单。 **特点**: - 下拉菜单效果流畅。 - 支持自定义动画。 - 易于维护和更新。 **应用场景**:适合于需要多层次导航的网站。 #### 26. jQuery One Page Navigation ...

    jqueryFisheye

    jQuery Fisheye是一种流行的网页交互效果,它通过模拟鱼眼镜头的透视效果,使网页元素在鼠标悬停时产生动态放大效果,增加了用户体验的趣味性和互动性。该特效尤其适用于展示产品图标或者导航菜单,让用户能够更加...

    JQueryFisheye实例

    - **动画过渡**:利用 CSS3 动画或 jQuery 的 `animate()` 方法,为鱼眼效果添加平滑的过渡效果。 总结,`jQuery FishEye` 是一个强大的工具,可以帮助开发者轻松创建出富有动态感和趣味性的鱼眼菜单。通过理解其...

    鱼眼菜单(像苹果电脑的dock的菜单)

    例如,在JavaScript中,可以利用CSS3的transform属性和transition属性来实现动画效果,结合jQuery或其它JavaScript库处理用户交互。而在Python中,可以使用Tkinter或PyQt等GUI库,通过自定义画布组件和事件监听来...

    js特效 效果 集合

    这种效果可以使用JavaScript和CSS实现,例如jQuery Slider插件就是一种实现方式。它通常包含自动播放、无限循环和触发动画等功能。 4. **碰撞弹球**:这个特效模拟了物理世界中的弹球碰撞。通过JavaScript的事件...

    yuyan.rar_fish eye_flex_yuyan

    这种特效可能通过JavaScript库、CSS3或者特定的图像处理软件实现,让用户在浏览图片时体验到类似真实鱼眼镜头的视觉效果。例如,开发者可能会使用JavaScript库如jQuery或自定义的函数来实现图片的动态鱼眼扭曲,增加...

    360度全景图片预览效果js代码.zip

    "360度全景图片预览效果js代码.zip"是一个包含jQuery插件和相关资源的压缩包,它提供了实现这一功能的完整解决方案。下面我们将详细解析这个压缩包中的关键元素及其工作原理。 1. jQuery基础与应用: jQuery是一款...

    20个优秀JavaScript导航菜单.doc

    - 利用jQuery的动画效果实现菜单的平滑显示和隐藏。 - 提供PSD文件方便用户自定义菜单样式。 ##### 3. 使用jQuery的车库门效果 - **特性**:模拟真实车库门的打开和关闭效果。 - **技术要点**: - 利用jQuery的...

    JS实现Fisheye效果动感放大菜单代码

    3. CSS和XHTML的应用:要实现Fisheye效果,不仅需要JavaScript,还需要CSS来定义元素的样式,以及XHTML来构建页面结构。在上述代码中,CSS用来定义菜单项的样式,比如菜单项和标题的位置、大小、边框样式等。而XHTML...

    HAgnesGenay_6_19112020

    标题“HAgnesGenay_6_19112020”可能是指一个项目或软件的版本标识,其中“HAgnesGenay...通过深入研究和理解项目代码,我们可以学习到如何利用JavaScript和CSS3实现动态的视觉效果,以及如何构建和管理一个开源项目。

Global site tag (gtag.js) - Google Analytics