Jquery学习笔记二

最新推荐文章于 2024-01-20 21:49:50 发布

zhangwanfly

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量85

点赞数

分类专栏： JavaScript技术文章标签： jQuery CSS HTML 工作 ViewUI

JavaScript技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天要做个小例子，一个网页上有几张图片，当鼠标滑过的时候，将展示这个图片的大图，鼠标离开的时候，图片消失。
首先准备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，现在来看下初始话的页面是什么样子

[img]http://dl.iteye.com/upload/attachment/283746/fc2ca62c-c454-3f12-a9ca-f045bce3b9a2.jpg[/img]
好了，现在就要实现功能了，只要在<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"
						});
				});
			})

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

[img]http://dl.iteye.com/upload/attachment/283748/05a66fa2-0d35-338e-aea4-8a820f068c82.jpg[/img]

zhangwanfly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery学习笔记二

今天要做个小例子，一个网页上有几张图片，当鼠标滑过的时候，将展示这个图片的大图，鼠标离开的时候，图片消失。首先准备html页面，初始页面代码如下[code="java"] Jquery DOM Test ...
复制链接

扫一扫

专栏目录