jquery鼠标移到图上去变大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery练习</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<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;
}
ul{overflow: hidden}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script>
$(function(){
$(".tooltip").hover(
function(e){
$("body").append("<div id=‘tooltip‘><img src="+$(this).attr("href")+"></div>")
$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
}).show("fast")
},
function(){
$("#tooltip").remove()
}
).mousemove(function(e){$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
})})
})
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" class="tooltip" title=""><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8xLmpwZw==.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" class="tooltip" title="苹果 iPod nano"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8yLmpwZw==.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" class="tooltip" title="苹果 iPhone"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8zLmpwZw==.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" class="tooltip" title="苹果 Mac"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF80LmpwZw==.jpg" alt="苹果 Mac"></a></li>
</ul>
<h3>无效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" title="苹果 iPod"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8xLmpwZw==.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" title="苹果 iPod nano"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8yLmpwZw==.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" title="苹果 iPhone"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF8zLmpwZw==.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" title="苹果 Mac"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LmZnbS5jYy9sZWFybi9sZXNzb241L2ltZy9zaGlydF80LmpwZw==.jpg" alt="苹果 Mac"></a></li>
</ul>
</body>
</html>

jquery练习

有效果：

无效果：

时间： 2024-08-10 21:58:58

jquery鼠标移到图上去变大的相关文章

css 鼠标移上去会变大

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } div

jquery点击div 先变大再缩小

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> &l

有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大.然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这样的效果: 这是图片文件夹: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

jQuery之实现页面字体变大、变小

转载请标明,http://www.gxabase.com jQuery之实现字体变大.变小,这在我们做网页的时候经常会使用的功能,以下为实现过程: 1.制作网页页面index.html,页面代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>jQuery training</title> <

鼠标指向div后变大25%

两个方面. 1.21布局,推荐position:absolute;(此题要求3个div),左边两个position:absolute;设置好top与left.右边div设置好margin. 2.js部分 window.onload=function(){ var obj1=document.getElementById("box1"); var obj2=document.getElementById("box2"); var obj3=document.getEl

两种方式实现鼠标悬停图片逐渐变大

鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点: 1.利用js,通过定时器实现宽高的加减. //鼠标移动图片变大 function change_large(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 140;//初始宽度 var bengin_height = 180;//初始高度 clearInterval(timer); timer = setInterval

鼠标移上去变大、改变背景颜色等

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px auto; padding: 0px; } #anniu{ width:100px; height: 80px; text-align: ce

黑马day18 鼠标事件&图片变大

有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大,然后鼠标移动,图片也会跟着移动,接下来我就使用jquery来实现这种效果: 这是图片目录: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动到图片上图片逐渐变大.变清晰(带有过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 50px auto; overflow: hidden; fil