锋利的jQuery 第三章章节总结的例子

代码如下:

<style>
li{ float:left; list-style:none; padding:3px;}
img{ border:#CCC 1px solid;}
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;}
.img1{ display:block;}
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微软雅黑;}
</style>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二个产品"><img src="images/apple_2.jpg" /></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三个产品"><img src="images/apple_3.jpg" /></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四个产品"><img src="images/apple_4.jpg" /></a></li>
</ul>
<script>
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
this.imgTitle = this.myTitle ? this.myTitle : "无title";
var tooltip = "<div id='tooltip'><img class='img1' src='" + this.href + "'/><div class='div1'>" + this.imgTitle + "</div></div>"
$("body").append(tooltip);
$("#tooltip").css({
"top": +(e.pageY + y) + "px",
"left": +(e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
$("#tooltip").remove();
this.title = this.myTitle;
})
</script>

赞 (0)

相关推荐

  • 锋利的jQuery 第三章章节总结的例子

    复制代码 代码如下: <style> li{ float:left; list-style:none; padding:3px;} img{ border:#CCC 1px solid;} #tooltip{ display:none; border:#CCC 1px solid; position:absolute;} .img1{ display:block;} .div1{ padding:0px; margin:0px; background:#111; color:FFF; font

  • JavaScript ECMA-262-3 深入解析.第三章.this

    介绍 在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节.讨论的主题就是this关键字. 实践证明,这个主题很难,在不同执行上下文中确定this的值经常会发生问题. 许多程序员习惯的认为,在程序语言中,this关键字与面向对象程序开发紧密相关,其完全指向由构造器新创建的对象.在ECMAScript规范中也是这样实现的,但正如我们将看到那样,在ECMAScript中,this并不限于只用来指向新创建的对象. 下面让我们更详细的了解一下,在ECMAScript中this的值到底是什么? 定义 t

  • MYSQL必知必会读书笔记第三章之显示数据库

    MYSQL必知必会读书笔记第三章之显示数据库

    MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. show column from tablename: 对每一个字段返回一行,行中包含字段名,数据类型.是否允许NULL.键信息.默认值以及其他信息. describe 语句: MySQL支持使用describ作为show columns from 的一种快捷方式.describ tablename 所支持的其他的show语句: show s

  • C语言程序设计谭浩强第五版课后答案(第三章习题答案)

    C语言程序设计谭浩强第五版课后答案(第三章习题答案)

    1.假如我国国民生产总值的年增长率为7%, 计算10年后我国国民生产总值与现在相比增长多少百分比.计算公式为 p = ( 1 + r ) n p = (1+r)^n p=(1+r)n ,其中r为年增长率,n为年数,p为与现在相比的倍数. 题目解析: 此题的关键主要是利用数学库math中pow函数进行计算,若不熟悉可以查阅帮助文档,查看pow函数的用法. 代码示例: #include<stdio.h> #include <math.h> int main() { float p, r

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • XSLT轻松入门第三章：XSLT的元素语法

    通过前面两章的介绍,我们已经对XSLT的基本概念和它的转换过程有了一些了解.下面我们一起来学习XSLT的具体语法.说到语法总是比较枯燥的,您可以大体上浏览一遍,等您真正需要使用XSLT的时候,再仔细研究它们. 3.XSLT的元素语法 3.1 xsl:template和xsl:apply-templates 3.2 xsl:value-of 3.3 xsl:for-each 3.4 xsl:if 3.5 Xxsl:choose, when, otherwise 3.6 xsl:sort 3.1 x

  • Jquery知识点三 jquery表单对象操作

    在Jquery中这三个函数如果有参数的话就是赋值操作,没有参数则是取值操作,其中val()是一个很重要的方法,和它相关的表单对象如:input系的标签.select.textarea等都是用于和服务器端交互的标签元素,所以要搞清楚这个val(): 对于radio.checkbox.select的赋值操作: 复制代码 代码如下: $("input[name=a]").val(["娱乐1"]); $("input[type=checkbox]").v

  • DOS批处理高级教程 第三章 FOR命令中的变量

    FOR命令中有一些变量,他们的用法许多新手朋友还不太了解,今天给大家讲解他们的用法! 先把FOR的变量全部列出来: ~I          - 删除任何引号("),扩展 %I      %~fI        - 将 %I 扩展到一个完全合格的路径名      %~dI        - 仅将 %I 扩展到一个驱动器号      %~pI        - 仅将 %I 扩展到一个路径      %~nI        - 仅将 %I 扩展到一个文件名      %~xI        - 仅将

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

随机推荐