Jquery如何实现鼠标滑过显示层叠样式

 2014-12-08 15:41:23   评论   589次浏览

现在很多网站都需要基于扁平化设计,在PC端网站我们会想要一种类似win8一样的块状鼠标滑过特效,这里我们就会想到使用JQuery来实现一些特效,当然,这种效果还需要借助一个插件。
前端特效这种鼠标经过添加文字层的案例有很多,我们需要引用的插件名称为captall,首先需要把这个插件放入引用的网页,在对应的内容页面上按照插件规则添加内容代码。

<script src='js/jquery.min.js' type='text/javascript'></script>
<script src='js/jquery.captall.min.js' type='text/javascript'></script>
<script type="text/javascript" src="js/easing.js"></script>
具体引用方式举例(主要图片部分要格式一致):
<a href="#">
<div class="squanimg">
<img src="images/230px.jpg" class="image" alt="这是一个效果显示商圈" />
</div>
</a>
我们可以看到这样的效果:
前端特效
在引用页面还要添加上对应的引用代码:
<script type="text/javascript">
$(document).ready(function () {
//这个地方设置鼠标滑过字母的参数
$('.image').captall({
animation: 'fade',
slideFrom: 'topcenter',
backgroundColor: '#1abc9c',
paddingLeft:10,
paddingRight:10,
paddingTop:100,
fontColor: '#ffffff',
slideTo: 'bottom',
width: '100%',
height: '100%'});
});
</script>

上述参数参考选项:

animation   String       默认值:幻灯片 -如何将字幕显示自己?

backgroundColor   String 默认值:FFFFFF -定义背景颜色。

caption   String         默认值:空 -文本或链接或图片....

delay      Intege        默认值:0 -定义的延迟来显示和隐藏的元素,淡入淡出和幻灯

delay      InInteger     默认值:0 -定义的延迟,显示元素,淡入淡出和幻灯

delayOut   Integer       默认值:0 -定义的延迟隐藏元素,淡入淡出和幻灯

easing     String        默认值:空 -定义在和元件出动画,仅供幻灯片

easingIn   String        默认值:空 -定义在元素的动画,为slideonly

easingOut  String        默认值:空 -定义元素的动画出来,因为只有一张幻灯片

fadeOutAfter  Integer    默认值:0 -定义之后,固定元素淡出时间

fontColor     String     默认值:000000 -定义字体的颜色。

fontSize      String     默认值:16像素 -定义字体的大小。

height        Integer    默认值:30 -元素的高度。

inTime        Integer:  默认值:200 -以毫秒为单位显示该元素的时间。

left          Integer 默认值: 0元素的左侧位置。

opacity       Float 默认值:0.7默认值浮动元素的不透明度。

outTime       Integer 默认值:200的元素消失在毫秒时间。

padding       Array 默认值: [0] -定义元素的边框和内容的元素之间的空间。

paddingTop    Integer 默认值: 0 -填充的顶部边框。

paddingRight  Integer 默认值: 0填充的右边界。

paddingBottom   Integer 默认值: 0填充的底部边界。

paddingLeft     Integer 默认值: 0填充到左边界。

sldeFrom      String 默认值: 底 - 定义从何处元素滑动

slideTo       String 默认值: 底 - 定义到该元素的幻灯片。

textAlign     String 默认值:左 - 在元素中的文本的对齐方式。

time          Integer 默认值:200 - 时间以毫秒为单位的元素出现和消失。

top           Integer 默认值: 0 - 元素的顶部位置。

width         String  默认值:全 - 元素的宽度。

有了这样一个插件和对应的调用方法,在类似的页面中使用起来就会非常方便。

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: