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

Lixh1986

浏览: 1105468 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

html5

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>

分享到：

Docker: 十分钟万台服务器部署能力，探秘阿 ... | 【养生】：脂肪代谢、甘油护肤、减肥

2017-12-21 10:54
浏览 1307
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Flex之 justify-content 和 flex-direction 的应用

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

HTML5之canvas之粒子效果

CSS之导航栏设计之 ul 之 li 标签排成一行

CSS之提示框实现

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

CSS - table 圆角 border radius

[css - hr ] border color 横线高度和颜色

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）