[英]jquery hover effect of image
這是我的jQuery代碼
this.imagePreview = function(){
xOffset = 8;
yOffset = 20;
$("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.href
+ "' alt='Image preview' />"
+ c
+ "</p>"
);
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
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");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
這是HTML代碼
<a href="1.png" target="_blank" class="preview"><img src="1s.png"></a>
這是CSS代碼
#preview{
position: absolute;
background: #333;
padding: 5px;
display: none;
color: #fff;
}
所有這些都在這個小提琴中http://jsfiddle.net/56wk9/ (盡管我找不到適合該小提琴的圖像,但此代碼工作正常)
該代碼的作用是,它將鼠標懸停在另一個圖像1s.png上顯示圖像1.png
但是由於此代碼使用了將圖像顯示為
<a href="1.png" target="_blank" class="preview">
在單擊基本圖像時,它將在新窗口中打開該放大的圖像。相反,我希望打開另一個網站而不是此放大的圖像..當我放置網頁鏈接時,它沒有顯示懸停效果。
所有幫助都是黃金。
使用鏈接中的數據代替href。
例如
<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>
然后,不要使用this.href
使用數據
$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />
的HTML
<a href="http://www.google.com" target="_blank" class="preview" data="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg"></a>
Java腳本
this.imagePreview = function(){
xOffset = 8;
yOffset = 20;
$("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).attr('data') +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
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");
});
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
的CSS
#preview{
position:absolute;
background:#333;
padding:5px;
display:none;
color:#fff;
/*box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);*/
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.