使用jQuery实现图片遮罩半透明坠落遮挡


默认九宫格图片排列效果,当鼠标悬停在图片上后,会从图片的上方下滑一个半透明遮罩的效果

同时出现一些文字介绍

使用方法:

1、将head中的css样式引入到你的网页中
2、将代码部分拷贝到你的网页body结束前的地方即可
(js、图片采用绝对路径,不建议修改)

复制代码 代码如下:

$(function(){
    $('.sgw_img dt').hover(function(){
        $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
    },function(){
        $(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
    })
    $('.sgw_img dd').hover(function(){
        $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
    },function(){
        $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
    })
})

以上就是本文分享的全部内容了,希望大家能够喜欢。



相关阅读:
Windows10 USB无线网卡如何使用 usb无线网卡怎么使用
浅谈Ajax请求与浏览器缓存
开启PHP的伪静态模式
jQuery 中ajax异步调用的四种方式
Win10到底啥什么时候正式发布?微软Build 2015未公布确切上市时间
基于html5和nodejs相结合实现websocket即使通讯
win10安装密钥更新变化有哪些? win10安装密钥新变化的内容
html禁止清除input文本输入缓存的两种方法
JavaScript实现梯形乘法表的方法
jquery学习总结(超级详细)
jQuery.Highcharts.js绘制柱状图饼状图曲线图
php通过array_merge()函数合并两个数组的方法
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
jQuery插件pagination实现无刷新分页
快速导航

Copyright © 2016 phpStudy |