插件描述：让你通过移动光标显示和调整多个图像或其他方法来触发。这个插件很适合当你想节省空间,同时允许用户将达到峰值,其他相关图像的显示。它也可以用来创建交互式动画在多个静态图像。
基本用法
要使用这个插件,只需包括最新的jQuery库(最好是2.0.0版本或更高)和jquery.shuffle-images。js到您的文档的<head>遵循一个HTML标记如下:
<body> .. <div class="shuffle-me"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> .. </div> .. </body>
确保所有的图片你想要洗牌都包围在一个容器中,我们将调用该函数。
一旦设置,只需调用插件这样的:
$(".shuffle-me").shuffleImages({
trigger: "imageMouseMove", // Choose which type of trigger you want here. Available options are "imageMouseMove", "imageHover", "documentMouseMove", and "documentScroll". "imageMouseMove" will trigger when your mouse over the image and move your cursor. "imageHover" will trigger when you mouse over without moving your cursor. "documentMouseMove" will trigger when cursor is being moved anywhere on the page. "documentScroll" will trigger when you scroll the page. The default value is "imageMouseMove"
triggerTarget: false, // For "imageMouseMove", and "imageHover" only, you can set which element to trigger the image shuffle when mouse over. For example, if you want a container ".main" to trigger an image shuffle instead of the image itself, put $(".main") for this option. Default value is false.
mouseMoveTrigger: 50, // For "imageMouseMove" only, you can set how many pixels you have to move in order to trigger one image shuffle. The lower the faster. The default value is 50.
hoverTrigger: 200, // For "imageHover" only, you can set how long you have to hover the image until it shuffles to other images. The option accepts milliseconds without unit. The default value is 200.
scrollTrigger: 100, // For "documentScroll" only, you can set how many pixels you have to scroll to see the image shuffle. The default value is 100.
target: "> img" // In case you have a complete HTML structure, you can set your own custom selector to your images here. The default value is "> img" which means images that are directly under the "shuffle-me" will be used to shuffle.
});与上面的设置将打乱你的照片,当你鼠标移动光标超过50像素将改变图像。
标记
您可以单独分配每个洗牌的触发时机。可用的标记:
data-si-mousemove-trigger
您可以定义一个自定义mouseMoveTrigger选项与这个数据属性:
<div class="shuffle-me" data-si-mousemove-trigger="100"> <img src="images/1.jpg"> ... </div>
data-si-hover-trigger
您可以定义一个自定义hoverTrigger选项与这个数据属性:
<div class="shuffle-me" data-si-hover-trigger="1000"> <img src="images/1.jpg"> ... </div>
data-si-scroll-trigger
您可以定义一个自定义scrollTrigger选项与这个数据属性:
<div class="shuffle-me" data-si-scroll-trigger="200"> <img src="images/1.jpg"> ... </div>
现在,您的用户可以看到几个图像光标随移而改变。
PREVIOUS:
NEXT:
相关插件-图片展示
HTML5/CSS3超酷焦点图特效
焦点图插件切换效果比较简单，但是外观和功能却十分强大。该CSS3焦点图在切换图片时，图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮，是一款非常实用HTML5/CSS3焦点图应用。
图片展示
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
