sHover

这是一个简单的原生JavaScript插件，它可以让你的展示图片感应鼠标进入方向，从而让悬浮层做出不同的运动效果，多个图片放在一起效果更酷炫噢！它的使用和设置都非常方便，更重要的是它能用在几乎所有的浏览器上啊！（至少IE5及以上吧），快来下载试试吧。

一句话使用sHover

1.将结构搭好，并设置了基本样式之后

example1

intro1

<div class="example1">
	<span class="intro1"></span>
</div>
			
.example1{
	width: 300px;
	height: 300px;
	background:powderblue;
}
.intro1{
	background:firebrick;
}

2.只需执行这条语句

var example1=new sHover("example1","intro1");

3.再把鼠标移上去看看

sHover的设置

设置滑动速度

悬浮层滑入滑出的速度，默认值为5，取值范围0-10

example1.set({
	speed:7
});

设置透明度

设置悬浮层的最终透明度，默认值为100，取值范围0-100

example1.set({
	opacity:80
});

是否开启滑动时淡入淡出

默认值为false，可设为true

example1.set({			
	opacityChange:true
});

设置前后效果预览

设置前

设置后

example1.set({
	speed:7,
	opacity:80,						
	opacityChange:true
});

sHover的炫酷使用实例

Flowers

Flowers are so inconsistent! But I was too young to know how to love her

You know

one loves the sunset, when one is so sad

For

For she did not want him to see her crying. She was such a proud flower

Volcanoes

It is of some use to my volcanoes, and it is of some use to my flower, that I own them. But you are of no

I thought

I thought that I was rich, with a flower that was unique in all the world; and all I had was a common

For she

For she did not want him to see her crying. She was such a proud flower

Thorns

She has only four thorns to defend herself against the world. And I have left on my planet, all alone!

A little boy

To me, you are still nothing more than a little boy who is just like a hundred thousand other little boys.

And I

And I have no need of you. And you, on your part, have no need of me.

Foxes

I am nothing more than a fox like a hundred thousand other foxes.

Tame

But if you tame me, then we shall need each other.

Unique

To me,you will be unique in all the world. To you, I shall be unique in all the world.

单个元素内部HTML结构

为所有元素加上统一的class，以方便统一设置运动效果和样式，可以在主容器和悬浮页内放入任何你需要元素，也可以给他们加上你喜欢的样式。我在主容器里放了一张图片，悬浮窗内放了标题，文章和按钮。

<div id="item1" class="sHoverItem">
	<img id="img1" src="images/1.jpg">
	<span id="intro1" class="sIntro">
		<h2>Flowers</h2>
		<p> Flowers are so inconsistent!  </p>
		<button>inconsistent</button>
	</span>
</div>

启用组件和效果的设置

根据你想要达到的效果，灵活的设置动画效果的各种参数吧！右边是我为这个图片展示界面设置的效果。

var a=new sHover("sHoverItem","sIntro");
 a.set({
 	slideSpeed:5,
 	opacityChange:true,
 	opacity:80
 });