jQuery鼠标滑过hover图片开门效果演示-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

jQuery鼠标滑过hover图片开门效果演示

分类:弹出层 更新时间:2016-07-05 浏览次数:1791

代码简介

这是一个神奇的jQuery鼠标滑过hover图片效果,这个图片鼠标滑过效果当鼠标hover图片的时候,图片分割成4快分别向四个角移动,鼠标离开的时候4个小图片又收缩回来。

浏览器兼容

兼容:Chrome,Opera,Firefox,Safari,IE8+

使用方法

这是一款jQuery图片鼠标滑过开门效果插件,来看看它是如何工作的:

  • 将所有的图片层的div的class都设置为 qitem ,以便能用jQuery找到图片并替换为4个角的div。
  • 每一个角的div都具有相同的背景图像,但是它们的background position各不相同,分别是:top left,top right,bottom left和bottom right。它看起来像是一整幅图片,实际是图片被分成4块,合并在一起。
  • 鼠标滑过的移入、移出操作将使4个角向4个方向运动。
  • 当4个角图片移动后,图片的标题将显示在出来。
  • 如果以后点击了某张图片,那么将链接到哪张图片的div中包含的超链接上去。

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!