【锋利的JQuery-学习笔记】遮罩层
效果图:
鼠标移动到上面后--->
html:
<div id="jnBrandList">
<ul>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/20120217.jpg" /></a>
<span><a href="###1">耐克</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/20120218.jpg" /></a>
<span><a href="###2">阿迪达斯</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/20120219.png" /></a>
<span><a href="###3">李宁</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/20120220.png" /></a>
<span><a href="###4">安踏</a></span>
</li>
<li>
<a href="###1" class="JS_live"><img alt="耐克" src="data:images/upload/2014050201.jpg" /></a>
<span><a href="###1">书1</a></span>
</li>
<li>
<a href="###2" class="JS_live"><img alt="阿迪达斯" src="data:images/upload/2014050202.jpg" /></a>
<span><a href="###2">书2</a></span>
</li>
<li>
<a href="###3" class="JS_live"><img alt="李宁" src="data:images/upload/2014050203.jpg" /></a>
<span><a href="###3">书3</a></span>
</li>
<li>
<a href="###4" class="JS_live"><img alt="安踏" src="data:images/upload/2014050204.jpg" /></a>
<span><a href="###4">书4</a></span>
</li>
</ul>
</div>
css:关键就是用ccs做的效果:
/* imgHover */
.imageMask{
background-color:#ffffff;
filter:alpha(opacity=0);
opacity:;
cursor: pointer;
}
.imageOver{
background:url(../images/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=60);
opacity: 0.6;
}
../images/zoom.gif 是:![]()
js:
$(function () {
$("#jnBrandList li").each(function (index) {
var $img = $(this).find("img");
var imgWidth = $img.width();
var imgHeight = $img.height(); //为每个图片链接上添加遮罩层,透明度为0
var spanHtml = '<span style="position:absolute;top:0;left:5px;width:' + imgWidth + 'px;height:' + imgHeight + 'px;" class="imageMask"></span>'; ; $(spanHtml).appendTo(this);
}); //遮罩层切换样式
$("#jnBrandList").delegate(".imageMask", "hover", function () {
$(this).toggleClass("imageOver");
}); /*live函数是为页面加载完后动态加载的元素绑定事件。
$("#jnBrandList").find(".imageMask").live("hover", function(){
$(this).toggleClass("imageOver");
});
*/
});
【锋利的JQuery-学习笔记】遮罩层的更多相关文章
- 锋利的jquery学习笔记
1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- 基于jquery hover图片遮罩层滑动
分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- 20150528—html使用Jquery遍历text文本框的非空验证
<script src="jquery-1.7.2.min.js" type="text/javascript"></script> & ...
- Javascript Class
做个记录,javascript 如何创建类? 有早期的,有原型的,有构造函数的 // early javascript object var o = {}; o.color = 'red'; o.sh ...
- 济南学习 Day2 T2 am
[问题描述]有N个数,随机选择一段区间,如果这段区间的所有数的平均值在[l,r]中则你比较厉害.求你比较厉害的概率.[输入格式]第一行有三个数N,l,r,含义如上描述.接下来一行有
- 自定义textbox加入左右晃动效果
应用开发过程中经常会要求用户在textbox进行输入.例如:登陆,发布. 而一般没进行输入的时候我们都会简单的进行弹窗提示用户输入. 前阵子ios的同学搞了一个左右晃动的效果,觉得还不错,于是也搞了个 ...
- Ping N个IP测试网络连通性
#-----------------------Smokeping移动节点-------------------##! /bin/bashecho "------------- Statin ...
- FastDFS4 + Ubuntu12安装及部署
1. 安装libevent 如果需要使用http进行下载,需要安装这个组件. 2. 安装fastdfs 3. 配置fastdfs 4. 安装nginx 问题4.1:安装nginx启动后访问原先资源UR ...
- js中substring和substr的用法比较
推荐使用substring 方法 stringObject.substring(start,stop) stringObject.substr(start,length) 定义和用法 提取 ...
- 转:const“变量”、define的常量和static 变量
首先讲C编译器的内存分配: 代码区 数据区 用户区=线程栈+堆 其中的数据区存储:常量(define)+静态变量(static)+符号集(const)+全局变量 然后讲一下编译的大致顺序: 注释- ...
- Python学习笔记1——人人都爱列表
一些BIF函数在列表中的应用: Python 3.3.4 (v3.3.4:7ff62415e426, Feb 10 2014, 18:13:51) [MSC v.1600 64 bit (AMD64) ...
- 每日一“酷”之bisect
作用:维护有序列表,而不必在每次想列表增加一个元素时调用sort排序 bisect 模块实现了一个算法用于向列表中插入元素,同时仍保持列表有序.有些情况下,这比反复对一个了表序列更高效,另外也比构建一 ...