Du jqery metodai įgyvendina perbraukimo į vaizdą peržiūros funkciją

Mažai purvo · Paskelbta 2015-08-19 21:21:57

Atvaizdai yra tokie:

Kai pelė perbraukia vaizdą, ji įgauna fokusą, sukuria didelį vaizdo stilių ir juda su pele

Kai pelė išeis, ji automatiškai sunaikins didelį paveikslėlį, du būdai, rekomenduojamas antrasis ir galiausiai pridedama demonstracinė versija.

1 metodas:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
<style type="text/css">
<!--
img {
height: 150px;
width: 200px;
border:solid 1px #666666;
}
#divBigImg {
height: 400px;
width: 500px;
border:solid 1px #666666;
position:absolute;
}
#BigImgId {
height: 400px;
width: 500px;
border:solid 1px #666666;
}
li {
float: left;
margin-left:5px;
}
-->
</style>
<scrip去掉t>
$(function(){
$("ul li a").bind("mouseover",function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var herf=$(this).attr("href");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mousemove(function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var herf=$(this).attr("href");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mouseout(function(){
$("#divBigImg").css("display","none")
});
});
</scrip去掉t>
<body>
<ul>
<li><a href="Images/1.jpg" class="toolTip" title="LinkTitle1"><img src="Images/1.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/2.jpg" class="toolTip" title="LinkTitle1"><img src="Images/2.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/3.jpg" class="toolTip" title="LinkTitle1"><img src="Images/3.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/4.jpg" class="toolTip" title="LinkTitle1"><img src="Images/4.jpg" alt="ImgAlt1" /></a></li>
</ul>
<img src="Images/1.jpg" alt="ImgAlt1" id="divBigImg" style="display:none;" />
</body>
</html>

Kopijuoti kodą

2 metodas:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<scrip去掉t type="text/javascrip去掉t" src="jquery-1.4.1-vsdoc.js"></scrip去掉t>
<style type="text/css">
<!--
img {
height: 150px;
width: 200px;
border:solid 1px #666666;
}
#divBigImg {
height: 400px;
width: 500px;
border:solid 1px #666666;
position:absolute;
}
#BigImgId {
height: 400px;
width: 500px;
border:solid 1px #666666;
}
li {
float: left;
margin-left:5px;
}
-->
</style>
<scrip去掉t>
$(function(){
$("ul li a").bind("mouseover",function(e){
var x=e.pageX+10;
var y=e.pageY+10;
var title=$(this).attr("title");
var herf=$(this).attr("href");
$("body").append("<div id='divBigImg'><img src='"+herf+"' id='BigImgId' />"+title+"</div>");
//$("#divBigImg").css("display","block");
$("#divBigImg").css({"display":"block","left":x,"top":y})
$("#divBigImg").attr("src",herf);
}).mousemove(function(e){
var x=e.pageX+10;
var y=e.pageY+10;
$("#divBigImg").css({"display":"block","left":x,"top":y})
}).mouseout(function(){
$("#divBigImg").remove();
});
});
</scrip去掉t>
<body>
<ul>
<li><a href="Images/1.jpg" class="toolTip" title="LinkTitle1"><img src="Images/1.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/2.jpg" class="toolTip" title="LinkTitle2"><img src="Images/2.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/3.jpg" class="toolTip" title="LinkTitle3"><img src="Images/3.jpg" alt="ImgAlt1" /></a></li>
<li><a href="Images/4.jpg" class="toolTip" title="LinkTitle4"><img src="Images/4.jpg" alt="ImgAlt1" /></a></li>
</ul>
</body>
</html>

Kopijuoti kodą

demo.rar (300.11 KB, Atsisiuntimų skaičius: 0)

[Jquery] Du jqery metodai įgyvendina perbraukimo į vaizdą peržiūros funkciją

Susijusios žinutės