windows的变革历程

所属分类：UI,其他-滚动,动画效果

24301 324 查看评论 (5)

分享到微信朋友圈

查看演示立即下载

插件描述：多款轻量插件结合打造windows产品的变革历程

使用到的插件有skrollr(视差滚动)

https://github.com/Prinzhorn/skrollr#rd

waypoints(滚动监听)

http://prinzhorn.github.io/skrollr/

tooltipster(工具提示)

http://iamceege.github.io/tooltipster/

unveil(延迟)

http://luis-almeida.github.io/unveil/

unveil

使用方法

HTML

<img src="bg.png" data-src="img1.jpg" /> 
<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> 
javascript
$(document).ready(function() {
  $("img").unveil();
});

tooltipster

使用方法

HTML

<h1 class=““tooltip”” title=““This” is=“” my=“” image‘s=“” tooltip=“” message！”=“”>Click here</h1>

javascript

$（‘.tooltip’）.tooltipster（ {

	animation：‘slide’,
	// Default： fade
	arrow：true,
	// Default： true
	arrowColor：‘’,
	// Default： tooltip‘s background color
	delay：200,
	// Default： 200
	fixedWidth：400,
	// Default： 0
	followMouse：true,
	// Default： false
	offsetX：0,
	// Default： 0
	offsetY：0,
	// Default： 0
	overrideText：’‘,
	// Default： ’‘
	position：’bottom - right‘,
	// Default： top
	speed：500,
	// Default： 100
	timer：0,
	// Default： 0
	tooltipTheme：’.my - custom - theme‘ // Default： ’.tooltip-message‘
}）;

七屏百叶窗焦点图代码

jquery ui 仿windows 桌面