经验分享程序开发文档资料数据资源其它资源

jQuery+css3水平悬停动画代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+css3水平悬停动画代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery+css3水平悬停动画代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery+css3水平悬停动画</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>

<div class="demo-wrapper">
	<h1></h1>
	<ul class="portfolio-items">
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/1.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?thetwoandthebubbles">The 
			Two and The Bubbles</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2005</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/2.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?christmas_ice_skating">
			Christmas Ice Skating</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2008</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/3.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?love_knows_no_boundaries">
			Love Knows No Boundaries</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2008</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/7.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?sandal">Sandal</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2009</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/13.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?skiing">Skiing</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2004</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/33.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?knight_lady">The 
			Knight and The Lady</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2009</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/11.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?friends_c2">Friends</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2008</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/10.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?coiffure">Coiffure</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2004</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/12.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?pc_mac">Get a Mac</a></span></p>
		<p><span>By Vlad Gerasimov</span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2007</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/15.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?connection">Connection</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2006</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/16.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?alice_dragon_tree">Alice, 
			Her Dragon, and The Christmas Tree</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2011</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/18.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?inseparable">Inseparable</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2009</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/5.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?pregnant">Pregnant</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2006</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/6.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?xmas_tree">Christmas 
			Tree</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2009</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/8.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?thetwoandthemouse">The 
			Two and The Mouse</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2005</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/9.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?punctuation">Punctuation</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2006</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/4.jpg" />
		</div>
        <figcaption>
          <p><span><a href="#/?wallpaper/?internet_cafe">
			Internet Cafe</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2012</div>
		</li>
		<li class="item">
      <figure>
        <div class="view">
			<img src="images/21.jpg" />
		</div>
        <figcaption>
          <p><span>
			<a href="#/?wallpaper/?raring_ringtail_blue">
			Raring Ringtail</a></span></p>
		<p><span>By Vlad Gerasimov </span></p>
        </figcaption>
      </figure>
      	<div class="date">
			2013</div>
		</li>
	</ul>
</div>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/modernizr-1.5.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

JS代码(jquery.mousewheel.js):

/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * Thanks to:http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to:Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. * Thanks to:Seamus Leahy for adding deltaX and deltaY * * Version:3.1.3 * * Requires:1.2.2+ */
(function (factory){
	if ( typeof define === 'function' && define.amd ){
	// AMD. Register as an anonymous module. define(['jquery'],factory);
}
else if (typeof exports === 'object'){
	// Node/CommonJS style for Browserify module.exports = factory;
}
else{
	// Browser globals factory(jQuery);
}
}
(function ($){
	var toFix = ['wheel','mousewheel','DOMMouseScroll','MozMousePixelScroll'];
	var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel']:['mousewheel','DomMouseScroll','MozMousePixelScroll'];
	var lowestDelta,lowestDeltaXY;
	if ( $.event.fixHooks ){
	for ( var i = toFix.length;
	i;
	){
	$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel ={
	setup:function(){
	if ( this.addEventListener ){
	for ( var i = toBind.length;
	i;
	){
	this.addEventListener( toBind[--i],handler,false );
}
}
else{
	this.onmousewheel = handler;
}
}
,teardown:function(){
	if ( this.removeEventListener ){
	for ( var i = toBind.length;
	i;
	){
	this.removeEventListener( toBind[--i],handler,false );
}
}
else{
	this.onmousewheel = null;
}
}
}
;
	$.fn.extend({
	mousewheel:function(fn){
	return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
	return this.unbind("mousewheel",fn);
}
}
);
	function handler(event){
	var orgEvent = event || window.event,args = [].slice.call(arguments,1),delta = 0,deltaX = 0,deltaY = 0,absDelta = 0,absDeltaXY = 0,fn;
	event = $.event.fix(orgEvent);
	event.type = "mousewheel";
	// Old school scrollwheel delta if ( orgEvent.wheelDelta ){
	delta = orgEvent.wheelDelta;
}
if ( orgEvent.detail ){
	delta = orgEvent.detail * -1;
}
// New school wheel delta (wheel event) if ( orgEvent.deltaY ){
	deltaY = orgEvent.deltaY * -1;
	delta = deltaY;
}
if ( orgEvent.deltaX ){
	deltaX = orgEvent.deltaX;
	delta = deltaX * -1;
}
// Webkit if ( orgEvent.wheelDeltaY !== undefined ){
	deltaY = orgEvent.wheelDeltaY;
}
if ( orgEvent.wheelDeltaX !== undefined ){
	deltaX = orgEvent.wheelDeltaX * -1;
}
// Look for lowest delta to normalize the delta values absDelta = Math.abs(delta);
	if ( !lowestDelta || absDelta < lowestDelta ){
	lowestDelta = absDelta;
}
absDeltaXY = Math.max(Math.abs(deltaY),Math.abs(deltaX));
	if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ){
	lowestDeltaXY = absDeltaXY;
}
// Get a whole value for the deltas fn = delta > 0 ? 'floor':'ceil';
	delta = Math[fn](delta / lowestDelta);
	deltaX = Math[fn](deltaX / lowestDeltaXY);
	deltaY = Math[fn](deltaY / lowestDeltaXY);
	// Add event and delta to the front of the arguments args.unshift(event,delta,deltaX,deltaY);
	return ($.event.dispatch || $.event.handle).apply(this,args);
}
}
));

CSS代码(styles.css):

@import url(http://fonts.googleapis.com/css?family=Lato:300,100,400);*{margin:0;padding:0;border:0;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;list-style-type:none}
a{color:inherit;text-decoration:none}
a.link{color:#C4290D}
html,body{min-height:100%}
body{background-color:#eee;font:300 20px/1.5 "Lato",sans-serif;color:#333}
header{background-color:white;padding:0 30px;box-shadow:0 2px 2px rgba(0,0,0,0.2);z-index:10;line-height:2em}
header a{font-size:20px}
.demo-wrapper{padding:30px}
h1{font-size:42px;margin:0;font-weight:300;margin-bottom:30px;letter-spacing:-1px;text-align:center}
.portfolio-items{height:400px;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;margin-bottom:30px;position:relative}
.portfolio-items > li{display:inline-block;vertical-align:top}
.item{width:300px;height:202px;margin:150px 20px 0;padding:5px;border-radius:2px;background-color:white;font-size:14px;opacity:0;position:relative;top:-300px;box-shadow:0px 10px 10px -5px rgba(0,0,0,0.5);-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);-webkit-transition:all .3s ease,opacity 2s ease,top 1s ease;-o-transition:all .3s ease,opacity 2s ease,top 1s ease;transition:all .3s ease,opacity 2s ease,top 1s ease}
.item:nth-child(even){margin-top:100px}
.item:hover{height:270px;padding:15px;-webkit-transform:translateY(-68px);-ms-transform:translateY(-68px);-o-transform:translateY(-68px);transform:translateY(-68px)}
.item:hover .date{-webkit-transform:translate3d(0,61px,0);-ms-transform:translate3d(0,61px,0);-o-transform:translate3d(0,61px,0);transform:translate3d(0,61px,0)}
.item:hover figcaption{-webkit-animation:show .25s ease-in .120s forwards;-o-animation:show .25s ease-in .120s forwards;animation:show .25s ease-in .120s forwards}
.item:hover p:nth-of-type(1) span{-webkit-animation:slideOut .25s ease-out .15s forwards;-o-animation:slideOut .25s ease-out .15s forwards;animation:slideOut .25s ease-out .15s forwards}
.item:hover p:nth-of-type(2) span{-webkit-animation:slideOut .2s ease-out .3s forwards;-o-animation:slideOut .2s ease-out .3s forwards;animation:slideOut .2s ease-out .3s forwards}
.item:hover .view{height:170px}
.item:hover .view img{top:-20px;left:-20px}
.falldown{top:0;opacity:1;-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}
figure{width:100%;height:100%}
.view{overflow:hidden;width:100%;height:190px;position:relative}
.view img{width:300px;height:190px;-webkit-transition:width .3s ease;-o-transition:width .3s ease;transition:width .3s ease;position:absolute}
figcaption{height:60px;width:100%;padding:0;position:absolute;bottom:0;overflow:hidden;opacity:0}
figcaption p{line-height:25px !important;font:bold 12px/18px "Arial",sans-serif;text-transform:uppercase;padding:0 10px;margin:5px 0;width:100%;background-color:#f0f0f0;color:#333}
figcaption span{left:-100%;opacity:0}
figcaption a{color:#CC320F}
.date{z-index:1;width:50px;height:30px;line-height:30px;color:#fff;font-weight:bold;text-align:center;border-radius:1px;background-color:#CC320F;position:absolute;bottom:30px;left:15px;-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92);-o-transition:-o-transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92);transition:-webkit-transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92);transition:-ms-transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92);transition:-o-transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92);transition:transform 0.5s cubic-bezier(0.12,1.6,0.91,0.92)}
@keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:0.2}
100%{opacity:1;left:0}
}
@keyframes show{to{opacity:1}
}
::-webkit-scrollbar{width:7px;height:7px;cursor:pointer}
::-webkit-scrollbar-track{background-color:#ddd;border-radius:10px}
::-webkit-scrollbar-thumb{border-radius:10px;background-color:#C4290D}
@-webkit-keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:0.2}
100%{opacity:1;left:0}
}
@-o-keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:0.2}
100%{opacity:1;left:0}
}
@-webkit-keyframes show{to{opacity:1}
}
@-o-keyframes show{to{opacity:1}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
3.67 MB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
3.67 MB
立即下载
简佳
了解
打赏作者 鼓励作者
Html 动画效果1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章