Kaks jqery meetodit rakendavad pildile pühkimise eelvaate funktsiooni

Väike sodi · Postitatud 19.08.2015 21:21:57

Renderdused on järgmised:

Kui hiir libistab pildi kohal, omandab see fookuse, genereerib suure pildistiili ja liigub koos hiirega

Kui hiir lahkub, hävitab see automaatselt suure pildi, kaks meetodit, soovitatakse teist ja lõpuks lisatakse demo.

Meetod 1:

<!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>

Kopeeri kood

Meetod 2:

<!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>

Kopeeri kood

demo.rar (300.11 KB, Allalaadimiste arv: 0)

[Jquery] Kaks jqery meetodit rakendavad pildile pühkimise eelvaate funktsiooni

Seotud postitused