`

HTML5/CSS3鼠标滑过图片滤镜动画效果

    博客分类:
  • css
阅读更多
HTML5/CSS3鼠标滑过图片滤镜动画效果

以前我们用CSS的滤镜属性来对图片做特殊的效果处理,比如阴影、模糊等。今天我们用HTML5和CSS3来实现图片的特效处理,当我们将鼠标滑过图片时,即会出现很不错的图片动画特效,像淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。

http://www.html5tricks.com/demo/adipoli/index.html




<!DOCTYPE HTML>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML5/CSS3鼠标滑过图片滤镜动画效果DEMO演示</title>
        <meta property="og:title" content="Adipoli 1.0"/>
        <meta property="og:type" content="website"/>
        <meta property="og:url" content="http://jobyj.in/adipoli"/>
        <meta property="og:image" content="http://jobyj.in/adipoli/img/adipoli.png"/>
        <meta property="og:site_name" content="jobyj"/>
        <meta property="og:description"
              content="An amazing jQuery image hover plugin. 20+ transition effects."/>
        <META NAME="Description" CONTENT="An amazing free to use jQuery image hover plugin with more than 20 transition effects">
        <meta itemprop="name" content="Adipoli jQuery Image Hover Effects">
        <meta itemprop="description" content="An amazing jQuery image hover plugin. 20+ transition effects.">
        <meta itemprop="image" content="http://jobyj.in/adipoli/img/adipoli.png">
        <meta property="fb:admins" content="100000682718088"/>

        <link href="css/demo.css" rel="stylesheet" type="text/css"/>
        <link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon" href="http://jobyj.in/favicon.ico" />


        <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
        <script src="js/jquery.adipoli.min.js" type="text/javascript"></script>


        <script type="text/javascript">
            $(function(){
                $('.row1').adipoli({
                    'startEffect' : 'normal',
                    'hoverEffect' : 'popout'
                });
                $('.row2').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'sliceDown'
                });
                $('.row3').adipoli({
                    'startEffect' : 'transparent',
                    'hoverEffect' : 'boxRandom'
                });
                $('.row4').adipoli({
                    'startEffect' : 'overlay',
                    'hoverEffect' : 'foldLeft'
                });
            $('.row5').adipoli({
                'startEffect' : 'transparent',
                'hoverEffect' : 'boxRainGrowReverse'
            });
            $('.row6').adipoli({
                'startEffect' : 'grayscale',
                'hoverEffect' : 'normal'
            });
            $('#adipoli-download').fadeTo('slow',1);
        });
            
        </script>
    </head>
    <body>
	
        <div id="fb-root">
            <!-- The JS SDK requires the fb-root element in order to load properly. -->
        </div>
        <div id="container">
            <div id="overview"></div>

            <div class="effect-container">
                <div class="effect-details">startEffect : grayscale, hoverEffect : normal(For HTML5 Browsers)</div>
                <img class="img-style row6" src="img/gallery-images/6_1.png"/>
                <img class="img-style row6" src="img/gallery-images/6_2.png"/>
                <img class="img-style row6" src="img/gallery-images/6_3.png"/>
            </div>


            <div class="effect-container">
                <div class="effect-details">startEffect : normal, hoverEffect : popout</div>
                <img class="img-style row1" src="img/gallery-images/1_1.png"/>
                <img class="img-style row1" src="img/gallery-images/1_2.png"/>
                <img class="img-style row1" src="img/gallery-images/1_3.png"/>
            </div>


            <div class="effect-container">
                <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div>
                <img class="img-style row2" src="img/gallery-images/2_1.png"/>
                <img class="img-style row2" src="img/gallery-images/2_2.png"/>
                <img class="img-style row2" src="img/gallery-images/2_3.png"/>
            </div>
			
            <div class="effect-container">
                <div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div>
                <img class="img-style row3" src="img/gallery-images/3_1.png"/>
                <img class="img-style row3" src="img/gallery-images/3_2.png"/>
                <img class="img-style row3" src="img/gallery-images/3_3.png"/>
            </div>
            <div class="effect-container">
                <div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div>
                <img class="img-style row4" src="img/gallery-images/4_1.png"/>
                <img class="img-style row4" src="img/gallery-images/4_2.png"/>
                <img class="img-style row4" src="img/gallery-images/4_3.png"/>
            </div>
            <div class="effect-container">
                <div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div>
                <img class="img-style row5" src="img/gallery-images/5_1.png"/>
                <img class="img-style row5" src="img/gallery-images/5_2.png"/>
                <img class="img-style row5" src="img/gallery-images/5_3.png"/>
            </div>
            
            
           
            <script type="text/javascript">
            $(document).ready(function(){
                $('#adipoli-download').fadeTo('fast', 0.10);
                $('#adipoli-download').click(function(){
                    if($(this).attr('href')=='#download')
                    {
                        alert('Please click like button to enable download link.');
                    }
                    else
                    {
                        _gaq.push(['_trackPageview', 'adipoli.zip-v2']);
                    }
                });
            });
            </script>
    </body>
</html>





二、

jQuery 3D图片滑块焦点图插件

这是一款很酷的jQuery 3D焦点图插件,和之前分享的jQuery焦点图不同的是,这款焦点图插件的图片切换播放样式是3D的,图片就像立方体一样可以上下翻滚,同时你不仅可以点击焦点图的左右切换按钮,也可以通过图片下方的小按钮进行图片切换。


http://www.html5tricks.com/demo/Adaptors/index.html



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jQuery 3D 图片播放焦点图插件Adaptor在线演示</title>

	<link href="css/screen.css" rel="stylesheet">
  <script src="js/lib/modernizr.min.js"></script>
</head>
	<body>
	  <div id="page">

      <section>

        <div id="viewport-shadow">

          <a href="#" id="prev" title="go to the next slide"></a>
          <a href="#" id="next" title="go to the next slide"></a>

          <div id="viewport">
            <div id="box">
              <figure class="slide">
                <img src="img/the-battle.jpg">
              </figure>
              <figure class="slide">
                <img src="img/hiding-the-map.jpg">
              </figure>
              <figure class="slide">
                <img src="img/theres-the-buoy.jpg">
              </figure>
              <figure class="slide">
                <img src="img/finding-the-key.jpg">
              </figure>
              <figure class="slide">
                <img src="img/lets-get-out-of-here.jpg">
              </figure>
            </div>
          </div>

          <div id="time-indicator"></div>
        </div>

        <footer>
          <nav class="slider-controls">
            <ul id="controls">
              <li><a class="goto-slide current" href="#" data-slideindex="0"></a></li>
              <li><a class="goto-slide" href="#" data-slideindex="1"></a></li>
              <li><a class="goto-slide" href="#" data-slideindex="2"></a></li>
              <li><a class="goto-slide" href="#" data-slideindex="3"></a></li>
              <li><a class="goto-slide" href="#" data-slideindex="4"></a></li>
            </ul>
          </nav>
        </footer>
      </section>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
      <aside id="effect-switcher">
        <h2>Select effect</h2>
        <ul id="effect-list">
          <li><a href="#" class="effect current" data-fx="scrollVert3d">Vertical 3D scroll</a></li>
          <li><a href="#" class="effect" data-fx="scrollHorz3d">Horizontal 3D scroll</a></li>
          <li><a href="#" class="effect" data-fx="scrollVert">Vertical scroll</a></li>
          <li><a href="#" class="effect" data-fx="scrollHorz">Horizontal scroll</a></li>
          <li><a href="#" class="effect" data-fx="blindLeft">Blind left</a></li>
          <li><a href="#" class="effect" data-fx="blindDown">Blind down</a></li>
          <li><a href="#" class="effect" data-fx="fade">Fade</a></li>
        </ul>
      </aside>

	  </div>
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/lib/jquery-1.7.2.min.js"><\/script>')</script>
		<script src="js/box-slider-all.jquery.min.js"></script>
		<script>

		  $(function () {

        var $box = $('#box')
          , $indicators = $('.goto-slide')
          , $effects = $('.effect')
          , $timeIndicator = $('#time-indicator')
          , slideInterval = 5000;

        var switchIndicator = function ($c, $n, currIndex, nextIndex) {
          $timeIndicator.stop().css('width', 0);
          $indicators.removeClass('current').eq(nextIndex).addClass('current');
        };

        var startTimeIndicator = function () {
          $timeIndicator.animate({width: '680px'}, slideInterval);
        };

        // initialize the plugin with the desired settings
        $box.boxSlider({
            speed: 1000
          , autoScroll: true
          , timeout: slideInterval
          , next: '#next'
          , prev: '#prev'
          , pause: '#pause'
          , effect: 'scrollVert3d'
          , blindCount: 15
          , onbefore: switchIndicator
          , onafter: startTimeIndicator
        });

        startTimeIndicator();

        // pagination isn't built in simply because it's easy to
        // roll your own with the plugin API methods
        $('#controls').on('click', '.goto-slide', function (ev) {
          $box.boxSlider('showSlide', $(this).data('slideindex'));
          ev.preventDefault();
        });

        $('#effect-list').on('click', '.effect', function (ev) {
          var $effect = $(this);

          $box.boxSlider('option', 'effect', $effect.data('fx'));
          $effects.removeClass('current');
          $effect.addClass('current');

          switchIndicator(null, null, 0, 0);
          ev.preventDefault();
        });

		  });

		</script>
	</body>
</html>















分享到:
评论

相关推荐

    CSS3鼠标滑过图片滤镜动画效果.rar_CSS3鼠标滑过图片滤镜动画效果

    在本文中,我们将深入探讨如何使用CSS3来创建一个鼠标滑过时的图片滤镜动画效果,这将基于提供的资源“CSS3鼠标滑过图片滤镜动画效果.rar”。这个资源包含了一个实例,展示了如何通过HTML5和CSS3的结合,为图片添加...

    HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码.zip

    本压缩包中的"HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码"是一个典型的示例,展示了如何利用这两种技术来创建动态的图片效果。 HTML5引入了许多新的元素和API,极大地增强了网页的结构化和媒体处理能力。在图片...

    纯CSS3鼠标滑过图片效果动画库

    本篇文章将详细探讨如何使用纯CSS3创建鼠标滑过图片效果的动画库。 首先,让我们了解CSS3中的关键帧动画(@keyframes)。这是创建动画的核心工具,允许开发者定义一个动画从开始到结束的各个阶段。例如,我们可以...

    HTML5+CSS3实现的鼠标滑过图片滤镜动画特效源码

    这是一款用HTML5和CSS3实现的图片特效源码,当鼠标滑过图片时,即会出现很不错的图片动画特效,主要有淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。几类特效画面的过度流畅自然,代码简介实用,也是研究html5的理想...

    HTML5+CSS3的实现鼠标滑过图片滤镜动画特效源码

    这是一款用HTML5和CSS3实现的图片特效源码,当鼠标滑过图片时,即会出现很不错的图片动画特效,主要有淡入淡出、放大缩小、百叶窗遮罩等HTML5特效。几类特效画面的过度流畅自然,代码简介实用,也是研究html5的理想...

    简洁的纯css3鼠标滑过按钮动画过滤样式

    总之,“简洁的纯css3鼠标滑过按钮动画过滤样式”利用了CSS3的动画和滤镜功能,为网页按钮添加了动态效果,提高了用户交互体验。在实际开发中,开发者可以根据需求调整动画参数,创造出各种个性化的按钮效果,使网页...

    纯CSS3鼠标滑过按钮动画过滤特效

    标题 "纯CSS3鼠标滑过按钮动画过滤特效" 涉及的核心知识点是CSS3的动画效果,特别是针对按钮交互的动态设计。CSS3(Cascading Style Sheets Level 3)是CSS规范的最新版本,引入了许多增强网页视觉效果的新特性,...

    10组风格绚丽的CSS3鼠标滑过图片特效

    "10组风格绚丽的CSS3鼠标滑过图片特效"是一个集合,包含了多种创新的、吸引人的交互式图片特效,能够极大地提升用户体验,使用户在浏览网站时感受到独特的视觉享受。这些特效充分利用了CSS3的新特性,如过渡...

    纯CSS3鼠标滑过按钮动画过滤特效.zip

    【标题】中的“纯CSS3鼠标滑过按钮动画过滤特效”指的是使用CSS3技术实现的一种交互效果,当用户将鼠标指针悬停在按钮上时,按钮会呈现出一种动态的过滤特效。这种特效通常用于提升网页的用户体验,吸引用户的注意力...

    纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip

    1. 图片渐变:此效果可能利用了CSS3的`transition`属性,当鼠标滑过图片时,图片的颜色或滤镜效果会逐渐变化,增加视觉冲击力。 2. 缩放效果:通过`transform: scale()`,图片在鼠标悬停时可以放大或缩小,为用户...

    jQuery和css3鼠标滑过背景模糊特效

    在"jQuery和css3鼠标滑过背景模糊特效"中,jQuery主要用于监听鼠标滑过事件,并执行相应的动画效果。 接下来,CSS3是层叠样式表的第三个版本,引入了许多新的特性和功能,如选择器、转换、过渡、动画等。在这个特效...

    CSS实现6种鼠标滑过按钮背景动画特效源码.zip

    5. 背景图片平移:利用background-position属性,可以创建背景图片在鼠标滑过时沿水平或垂直方向移动的动画效果,增加视觉趣味性。 6. 模糊与锐化:CSS3的filter属性允许我们应用图像处理效果,如模糊和锐化。在...

    网页模板——纯CSS3实现鼠标滑过图片出现条纹遮罩层动画特效源码.zip

    总的来说,这个网页模板利用了CSS3的强大功能,实现了鼠标滑过图片时的条纹遮罩层动画效果,这既展示了CSS3在网页设计中的潜力,也为开发者提供了一个学习和借鉴的实例。通过理解并应用这些CSS3技术,开发者可以创建...

    jQuery+CSS3实现响应鼠标滑过文本模糊和清晰突显动画效果源码.zip

    在本项目中,我们主要探讨如何使用jQuery和CSS3技术来创建一个动态的文本效果,当鼠标滑过时,文本会从模糊变为清晰,从而增强用户的交互体验。这个效果是通过巧妙地结合JavaScript库jQuery的功能和CSS3的滤镜属性来...

    jQuery+css3响应鼠标滑过带视差倾斜效果的悬停图片特效源码.zip

    在本资源中,"jQuery+css3响应鼠标滑过带视差倾斜效果的悬停图片特效源码.zip",我们关注的是一个结合了jQuery库和CSS3技术的交互式图片特效。这个特效主要体现在当鼠标指针滑过图片时,图片会呈现出视差倾斜的效果...

    纯CSS3实现的支持鼠标滑过点击切换复古图片效果源码.zip

    这个压缩包文件“纯CSS3实现的支持鼠标滑过点击切换复古图片效果源码.zip”提供了一种利用CSS3特性实现的交互式图片展示效果,特别适合于创建具有复古风格的网站或应用。 在描述中提到的“鼠标滑过点击切换”,指的...

    基于jquery+css来实现鼠标滑过图片黑白显示的特效.zip

    总之,通过结合jQuery的事件处理和CSS的样式控制,可以轻松实现鼠标滑过图片时图片由彩色变为黑白的动态效果。这不仅提高了用户体验,也为网页设计增添了趣味性和互动性。在实际应用中,还可以根据项目需求进行个性...

    jquery实现鼠标滑过图片黑白显示的特效

    要实现鼠标滑过图片时图片变为黑白,我们可以利用CSS3的滤镜(filter)属性,特别是`grayscale()`函数,该函数可以将彩色图像转换为灰度图像。但在JavaScript环境中,我们不能直接改变CSS的滤镜,因此需要用到jQuery...

Global site tag (gtag.js) - Google Analytics