Jquery学习笔记二

fengfeng925

浏览: 107129 次
性别:
来自: 北京

最近访客更多访客>>

lvtt

hanwei2533

zhlzhen

laowangwww

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript技术

jQuery CSS HTML 工作

今天要做个小例子，一个网页上有几张图片，当鼠标滑过的时候，将展示这个图片的大图，鼠标离开的时候，图片消失。
首先准备html页面，初始页面代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
        </script>
        <title>Jquery DOM Test</title>
    </head>
    <body>
      <ul>
		<li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a></li>
	  </ul>
    </body>
</html>

接着要给这个html页面添加样式，样式代码如下

<style type="text/css">
			body{
				margin:0;
				padding:40px;
				background:#fff;
				font:80% Arial, Helvetica, sans-serif;
				color:#555;
				line-height:180%;
			}
			img{border:none;}
			ul,li{
				margin:0;
				padding:0;
			}
			li{
				list-style:none;
				float:left;
				display:inline;
				margin-right:10px;
				border:1px solid #AAAAAA;
			}
			
			#tooltip{
				position:absolute;
				border:1px solid #ccc;
				background:#333;
				padding:2px;
				display:none;
				color:#fff;
			}
		</style>

ok，现在来看下初始话的页面是什么样子

好了，现在就要实现功能了，只要在<script></script>中加上如下Jquery代码，就可以了

$(function() {
				var x = 10;
				var y = 20;
				$("a.tooltip").mouseover(function(e){
					this.myTitle = this.title;
					this.title = "";	
					var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
					var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素
					$("body").append(tooltip);	//把它追加到文档中						 
					$("#tooltip")
						.css({
							"top": (e.pageY + y) + "px",
							"left":  (e.pageX + x)  + "px"
						}).show("fast");	  //设置x坐标和y坐标，并且显示
			    }).mouseout(function(){
					this.title = this.myTitle;	
					$("#tooltip").remove();	 //移除 
			    }).mousemove(function(e){
					$("#tooltip")
						.css({
							"top": (e.pageY + y) + "px",
							"left":  (e.pageX + x)  + "px"
						});
				});
			})

当全部工作完成之后，当你的鼠标划过页面的时候，效果如下