js实现鼠标悬浮扩大缩放 expand、shrink效果

guangqiang

浏览: 399872 次
性别:
来自: 青岛

最近访客更多访客>>

a450065208

qijojo

李虎强

hlbejy

博主相关

博客

微博

相册

留言

关于我

博客专栏

: wordpress步步高
浏览量：76240

: Web前端开发之路
浏览量：92891

: Flex/ActionSc...
浏览量：64085

: Android/IOS 开...
浏览量：35442

: PHP项目实战
浏览量：24543

文章分类

社区版块

存档分类

博客分类：

JavaScript/Jquery

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>

<title>Pricing and sign up | CannyBill</title>

<meta charset=utf-8>

<!--[if !IE 6]><!--><link rel="stylesheet" type="text/css" href="assets/css/main.css" media="screen, projection" /><!--<![endif]-->
<!--[if gte IE 7]><link rel="stylesheet" href="assets/css/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" media="screen, projection" /><![endif]-->

<!-- JS -->

<script src="assets/js/modernizr-1.0.js" type="text/javascript"></script>
<!--[if IE 6]><script src="assets/js/belatedpng.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">
Cufon.replace('h1,h2,h3', {hover: true, hoverables: { h3: true }, textShadow: '2px 2px rgb(0,0,0)'});
</script>

<!-- FAVICON -->
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="assets/img/favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="assets/img/iphonetouch.jpg"/>
</head>

<body id="page">

<div class="content">

<ol class="hlisting offer-sale plans">

<li class="item basic">
<h4 class="fn">Basic <span class="price">&#163;3.99 (&#36;6 US)</span></h4>
<ul class="description">
<li><strong>15</strong> active clients</li>

<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong> staff logins</li>
</ul>
<p>Unlimited telephone &amp; email support</p>

<p><a href="#" class="action">Sign up <span>30 day free trial</span></a> <img src="QQ截图20120301095236.png" width="83" height="76" alt="s"></p>
</li>

<li class="item small">
<h4 class="fn">Small business <span class="price">&#163;6.99 (&#36;12 US)</span></h4>
<ul class="description">
<li><strong>50</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong></li>
</ul>
<p>Unlimited telephone &amp; email support</p>
  <p><a href="#" class="action">Sign up <span>30 day free trial</span></a><img src="QQ截图20120301095243.png" width="67" height="81"></p>
</li>

<li class="item professional">
  <h4 class="fn">Professional <span class="price">&#163;14.99 (&#36;24 US)</span></h4>
  <ul class="description">
  <li><strong>500</strong> active clients</li>
  <li><strong>Unlimited</strong> invoices per month</li>
  <li><strong>Unlimited</strong> staff logins</li>
    
  <li><strong>Free</strong> upgrades</li>
  <li><strong>RapidSSL Certificate</strong></li>
  </ul>
  <p>Unlimited telephone &amp; email support</p>
  <p><a href="#" class="action">Sign up <span>30 day free trial</span></a></p>
</li>

<li class="item enterprise">

<h4 class="fn">Enterprise <span class="price">&#163;29.99 (&#36;48 US)</span></h4>
<ul class="description">
<li><strong>2000</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong> staff logins</li>

<li><strong>Free</strong> upgrades</li>
<li><strong>RapidSSL Certificate</strong></li>
</ul>
<p>Unlimited telephone &amp; email support</p>
<p><a href="#" class="action">Sign up <span>30 day free trial</span></a></p>
</li>
</ol>

</div>

</body>
</html>

/*

Stuff and Nonsense Ltd.
The Cow Shed Studio,
Gwaenysgor,
Flintshire, North Wales
LL18 6EP, UK
+44 1745 851848
http://stuffandnonsense.co.uk
http://forabeautifulweb.com
http://transcendingcss.com
http://twitter.com/malarkey

MAIN.CSS 

*/
.csstransforms .plans .item {
    -moz-transition: all 0.2s ease-in-out 0s;
}
ol.plans .item {
    background-color: #FFFFFF;
    border: 1px solid #DFE7EF;
    color: #202830;
    float: left;
    padding: 19px 19px 0;
    text-align: center;
    text-shadow: 0 1px 1px #FFFFFF;
    width: 180px;
}

.csstransforms .plans .item:hover{
	-moz-transform:scale(1.05);
	border-radius:10px 10px 10px 10px;
	box-shadow:0 0 10px rbga(0,0,0,0.5)
}

window.Modernizr = (function(){
	
	var ret = {},

	

	enableHTML5 = true,
	
	
	enableNoClasses = true,
	
	
	
	fontfaceCheckDelay = 50,
	
	
	doc = document,
	docElement = doc.documentElement,

	
	m = doc.createElement( 'modernizr' ),
	m_style = m.style,

	
	f = doc.createElement( 'input' ),
	
	// Reused strings.
	
	canvas = 'canvas',
	canvastext = 'canvastext',
	rgba = 'rgba',
	hsla = 'hsla',
	multiplebgs = 'multiplebgs',
	borderimage = 'borderimage',
	borderradius = 'borderradius',
	boxshadow = 'boxshadow',
	opacity = 'opacity',
	cssanimations = 'cssanimations',
	csscolumns = 'csscolumns',
	cssgradients = 'cssgradients',
	cssreflections = 'cssreflections',
	csstransforms = 'csstransforms',
	csstransforms3d = 'csstransforms3d',
	csstransitions = 'csstransitions',
	fontface = 'fontface',
	geolocation = 'geolocation',
	video = 'video',
	audio = 'audio',
	inputtypes = 'inputtypes',
	// inputtypes is a test array of its own containing individual tests for
	// various new input types, such as search, range, datetime, etc.
	
	// SVG is not yet supported in Modernizr 1.0
	// svg = 'svg',
	
	background = 'background',
	backgroundColor = background + 'Color',
	canPlayType = 'canPlayType',
	
	tests = {},
	inputs = {},
	
	elems,
	elem,
	i,
	feature,
	classes = [];
  
 
	/**
	 * set_css applies given styles to the Modernizr DOM node.
	 */
	function set_css( str ) {
		m_style.cssText = str;
	}

	/**
	 * set_css_all extrapolates all vendor-specific css strings.
	 */
	function set_css_all( str1, str2 ) {
		str1 += ';';

		return set_css(
			str1
			+ '-webkit-' + str1
			+ '-moz-' + str1
			+ '-o-' + str1
			+ '-ms-' + str1
			+ ( str2 || '' )
		);
	}

	/**
	 * contains returns a boolean for if substr is found within str.
	 */
	function contains( str, substr ) {
		return str.indexOf( substr ) !== -1;
	}

	/**
	 * test_props is a generic CSS / DOM property test; if a browser supports
	 *   a certain property, it won't return undefined for it.
	 */
	function test_props( props, callback ) {
		for ( var i in props ) {
			if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i] ) ) ) {
				return true;
			}
		}
	}

	/**
	 * test_props_all tests a list of DOM properties we want to check against.
	 *   We specify literally ALL possible (known and/or likely) properties on 
	 *   the element including the non-vendor prefixed one, for forward-
	 *   compatibility.
	 */
	function test_props_all( prop, callback ) {
		var uc_prop = prop.replace( /./, function(a) { return a.toUpperCase(); } ),
		props = [
			prop,
			'webkit' + uc_prop,
			'Moz' + uc_prop,
			'moz' + uc_prop,
			'o' + uc_prop,
			'ms' + uc_prop
		];

		return !!test_props( props, callback );
	}


	// Tests

	/**
	 * Canvas tests in Modernizr 1.0 are still somewhat rudimentary. However,
	 *   the added "canvastext" test allows for a slightly more reliable and
	 *   usable setup.
	 */
	tests[canvas] = function() {
		return !!doc.createElement( canvas ).getContext;
	};
	
	tests[canvastext] = function() {
		return !!(tests[canvas]() && typeof doc.createElement( canvas ).getContext('2d').fillText == 'function');
	};

	/**
	 * geolocation tests for the new Geolocation API specification.
	 *   This test is a standards compliant-only test; for more complete
	 *   testing, including a Google Gears fallback, please see:
	 *   http://code.google.com/p/geo-location-javascript/
	 */
	tests[geolocation] = function() {
		return !!navigator.geolocation;
	};

	tests[rgba] = function() {
		// Set an rgba() color and check the returned value
		
		set_css( background + '-color:rgba(150,255,150,.5)' );
		
		return contains( m_style[backgroundColor], rgba );
	};
	
	tests[hsla] = function() {
		// Same as rgba(), in fact, browsers re-map hsla() to rgba() internally
		
		set_css( background + '-color:hsla(120,40%,100%,.5)' );
		
		return contains( m_style[backgroundColor], rgba );
	};
	
	tests[multiplebgs] = function() {
		// Setting multiple images AND a color on the background shorthand property
		//	and then querying the style.background property value for the number of
		//	occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
		
		set_css( background + ':url(m.png),url(a.png),#f99 url(m.png)' );
		
		// If the UA supports multiple backgrounds, there should be three occurrences
		//	of the string "url(" in the return value for elem_style.background
		
		return /(url\s*\(.*?){3}/.test(m_style[background]);
	};
	
	tests[borderimage] = function() {
		set_css_all( 'border-image:url(m.png) 1 1 stretch' );
		
		return test_props_all( 'borderImage' );
	};
	
	tests[borderradius] = function() {
		set_css_all( 'border-radius:10px' );

		return test_props_all( 'borderRadius', '', function( prop ) {
			return contains( prop, 'orderRadius' );
		});
	};
	
	tests[boxshadow] = function() {
		set_css_all( 'box-shadow:#000 1px 1px 3px' );
		
		return test_props_all( 'boxShadow' );
	};
	
	tests[opacity] = function() {
		// Browsers that actually have CSS Opacity implemented have done so
		//	according to spec, which means their return values are within the
		//	range of [0.0,1.0] - including the leading zero.
		
		set_css( 'opacity:.5' );
		
		return contains( m_style[opacity], '0.5' );
	};
	
	tests[cssanimations] = function() {
		set_css_all( 'animation:"animate" 2s ease 2', 'position:relative' );
		
		return test_props_all( 'animationName' );
	};
	
	tests[csscolumns] = function() {
		set_css_all( 'column-count:3' );
		
		return test_props_all( 'columnCount' );
	};
	
	tests[cssgradients] = function() {
		/**
		 * For CSS Gradients syntax, please see:
		 * http://webkit.org/blog/175/introducing-css-gradients/
		 */
		
		var str1 = background + '-image:',
			str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));';
		
		set_css(
				str1 + str2
			+ str1 + '-webkit-' + str2
			+ str1 + '-moz-' + str2
			+ str1 + '-o-' + str2
			+ str1 + '-ms-' + str2
		);
		
		return contains( m_style.backgroundImage, 'gradient' );
	};
	
	tests[cssreflections] = function() {
		set_css_all( 'box-reflect:right 1px' );
		return test_props_all( 'boxReflect' );
	};
	
	tests[csstransforms] = function() {
		set_css_all( 'transform:rotate(3deg)' );
		
		return !!test_props([ 'transformProperty', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform' ]);
	};
	
	tests[csstransforms3d] = function() {
		set_css_all( 'perspective:500' );
		
		return !!test_props([ 'perspectiveProperty', 'webkitPerspective', 'MozPerspective', 'mozPerspective', 'oPerspective', 'msPerspective' ]);
	};
	
	tests[csstransitions] = function() {
		set_css_all( 'transition:all .5s linear' );
		
		return test_props_all( 'transitionProperty' );
	};



	// @font-face detection routine created by Paul Irish - paulirish.com
	// Merged into Modernizr with approval. Read more about Paul's work here:
	// http://paulirish.com/2009/font-face-feature-detection/
  tests[fontface] = (function(){

    var fontret;
    
		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable. 
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;
  
    else {
      
      // Create variables for dedicated @font-face test
      var st  = doc.createElement('style'),
        spn = doc.createElement('span'),
        wid, nwid, isFakeBody = false, body = doc.body,
        callback, isCallbackCalled;
  
      // The following is a font-face + glyph definition for the . character:
      st.textContent = "@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}";
      doc.getElementsByTagName('head')[0].appendChild(st);
      
      
      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 
      
      if  (!body){
        body = docElement.appendChild(doc.createElement(fontface));
        isFakeBody = true;
      } 
      
      // the data-uri'd font only has the . glyph; which is 3 pixels wide.
      spn.innerHTML = '........';
      spn.id        = 'fonttest';
      
      body.appendChild(spn);
      wid = spn.offsetWidth;
      spn.style.font = '99px testfont,_,serif';
      
      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;
      
      var delayedCheck = function(){
        fontret = Modernizr[fontface] = wid !== spn.offsetWidth;
        docElement.className = docElement.className.replace(/(no-)?font.*?\b/,'') + (fontret ? ' ' : ' no-') + fontface;
        
        callback && (isCallbackCalled = true) && callback(fontret);
        isFakeBody && setTimeout(function(){body.parentNode.removeChild(body)}, 50);
      }

      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    // allow for a callback
    ret._fontfaceready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }
      
    return function(){ return fontret || wid !== spn.offsetWidth; };
  })();
	
	tests[video] = function() {
		return !!doc.createElement(video)[canPlayType];
	};
	
	tests[audio] = function() {
		return !!doc.createElement(audio)[canPlayType];
	};

	
	// Run through all tests and detect their support in the current UA.
	for ( feature in tests ) {
		if ( tests.hasOwnProperty( feature ) ) {
			classes.push( ( !( ret[ feature ] = tests[ feature ]() ) && enableNoClasses ? 'no-' : '' ) + feature );
		}
	}

	// Run through HTML5's new input types to see if the UA understands any.
	//   This is put behind the tests runloop because it doesn't return a
	//   true/false like all the other tests; instead, it returns an array
	//   containing properties that represent the 'supported' input types.
	ret[inputtypes] = function(props) {
		for ( var i in props ) {
			f.setAttribute('type', props[i]);
			inputs[ props[i] ] = !!( f.type !== 'text');
		}
		return inputs;
	}('search tel url email datetime date month week time datetime-local number range color'.split(' '));


	/**
	 * Reset m.style.cssText to nothing to reduce memory footprint.
	 * Reset tmp, i and prop to null (in case they were used).
	 * 
	 * TODO: explore alternative approach where m.style.cssText is
	 *	   set only once and we extract all data in one fell swoop.
	 *	   Could prove to be a performance improvement.
	 */
	set_css( '' );
	m = f = null;

	// Enable HTML 5 elements for styling in IE:
	if ( enableHTML5 && !(!/*@cc_on!@*/0) ) {
		elems = 'abbr article aside audio bb canvas datagrid datalist details dialog figure footer header mark menu meter nav output progress section time video'.split(' ');

		i = elems.length+1;
		while ( --i ) {
			elem = doc.createElement( elems[i] );
		}
		elem = null;
	}

	// Assign private properties to the return object with prefix
	ret._enableHTML5	 = enableHTML5;
	ret._enableNoClasses = enableNoClasses;

	// Remove "no-js" class from <html> element, if it exists:
	(function(H,C){H[C]=H[C].replace(/\bno-js\b/,'js')})(docElement,'className');

	// Add the new classes to the <html> element.
	docElement.className += ' ' + classes.join( ' ' );

	return ret;

})();

分享到：

jQuery 限制多行字符字数的方法换成省略 ... | JS 客户端实现无刷新分页 table表格实 ...

2012-03-01 10:02
浏览 1573
评论(1)
论坛回复 / 浏览 (0 / 2399)
分类:Web前端
查看更多

1 楼 ycdaihuan99n 2012-09-07

还行的，不错

发表评论

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

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

js实现鼠标悬浮扩大缩放 expand、shrink效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

js实现 鼠标悬浮 扩大 缩放 expand、shrink效果

评论

发表评论

相关推荐

一款基于bootstrap的datetimepicker

php/js/jquery等各种语言版本—检测终端类型和浏览器类型

博文转移到个人网站，欢迎大家访问！！！

推荐一款神器，桌面远程调试IOS网站的工具 很好很强大 支持国产！

绚丽的图片文字 跟随过渡切换焦点图设计

看一眼你就会爱上它 10种不同风格任你选

圆形的hover效果 多种style可供选择见demo

图片hover状态平滑划过过渡效果

页面滑到底端弹出提示表单

一款漂亮的滑动表单

php版本 化妆程序 给图片添加饰物

完美的 登录注册框 含漂亮的过渡、转换效果

大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

jquery实现 购物车 信息 级联改变

发现一款很酷的jquery 相片墙翻牌效果

国外经典JS、Jquery 各种资源集合

鼠标悬浮 浮动放大 expand 效果

带提示的input输入框类似html5的 placeholder

瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码

仿淘宝 智能跟随菜单提示栏 智能浮动的菜单

最近访客更多访客>>

js实现鼠标悬浮扩大缩放 expand、shrink效果

推荐一款神器，桌面远程调试IOS网站的工具很好很强大支持国产！

绚丽的图片文字跟随过渡切换焦点图设计

圆形的hover效果多种style可供选择见demo

php版本化妆程序给图片添加饰物

完美的登录注册框含漂亮的过渡、转换效果

jquery实现购物车信息级联改变

鼠标悬浮浮动放大 expand 效果

瀑布流展示示例- 带旋转的图文展示好东西与大家分享附源码

仿淘宝智能跟随菜单提示栏智能浮动的菜单