我试图使用Jquery
和Javascript
,所以当客户端鼠标移到PageGridView
上使用的通用图标时,它将显示缩略图图像稍微偏离图标。
我借用了我在Techrepublic上找到的代码。
正在使用的CSS:
<style type="text/css">
#Fullimg{position:absolute;display:none;z-index:-1}
#preview{
position:absolute;
border:3px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
pre{
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-weight:normal;
padding:7px;
border:3px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
</style>
Javascript: <script type="text/javascript" language="javascript">
// Kick off the jQuery with the document ready function on page load
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
xOffset = -20;
yOffset = 40;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.link +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
</script>
图标:
<asp:Image ID="imgThumbnail" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" ClientIDMode="Static" CssClass="preview" link='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureThumb&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>'/>
代码绝对没有做任何奇怪的事情,尽管它甚至试图使它工作在一个fiddle。我已经在这件事上绞尽脑汁将近一个星期了,老板开始因为我不能使它工作而生气了。
任何帮助或更高效的代码方法将不胜感激。
我纠正了代码中的一些基本部分。链接在这里:http://fiddle.jshell.net/bpVUk/2/你现在可以根据你的需要修改。
代码: // Kick off the jQuery with the document ready function on page load
$(document).ready(function () {
var xOffset = -20;
var yOffset = 40;
$('.preview').on('mouseover', function (e) {
var img = $(this);
img.t = img.title;
img.title = "";
var c = (img.t != "") ? "<br/>" + img.t : "";
$("body").append("<p id='preview'><img src='" + img.attr('link') + "' alt='Image preview' />" + c + "</p>");
$("#preview").css({
"top": (e.pageY - xOffset) + "px",
"left": (e.pageX + yOffset) + "px",
'display': 'block',
});
});
$('.preview').on('mouseleave', function (e) {
$('#preview').remove();
})
});