[英]jquery hover effect of image
this is my jquery code 这是我的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();
});
this is html code 这是HTML代码
<a href="1.png" target="_blank" class="preview"><img src="1s.png"></a>
this is css code 这是CSS代码
#preview{
position: absolute;
background: #333;
padding: 5px;
display: none;
color: #fff;
}
all this is in this fiddle http://jsfiddle.net/56wk9/ (though i could not find images to fit in this fiddle this code is working fine) 所有这些都在这个小提琴中http://jsfiddle.net/56wk9/ (尽管我找不到适合该小提琴的图像,但此代码工作正常)
what this code does, it displays an image 1.png on hover on another image 1s.png 该代码的作用是,它将鼠标悬停在另一个图像1s.png上显示图像1.png
but since this code use the image to be displayed as 但是由于此代码使用了将图像显示为
<a href="1.png" target="_blank" class="preview">
on clicking the base image it opens this enlarged image in a new window.. what instead i want that another website shall be opened not this enlarged image.. when i put the link of webpage it does not show hover effect. 在单击基本图像时,它将在新窗口中打开该放大的图像。相反,我希望打开另一个网站而不是此放大的图像..当我放置网页链接时,它没有显示悬停效果。
all help is golden. 所有帮助都是黄金。
Use data in your link instead of the href. 使用链接中的数据代替href。
For example 例如
<a href=""http://www.somesite.com data="image-1s.png"><img ...></a>
Then, instead of using the this.href
use the data 然后,不要使用
this.href
使用数据
$("body").append("<p id='preview'><img src='"+ $(this).attr('data') +"' alt='Image preview' />
Here's the updated fiddle 这是更新的小提琴
HTML 的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>
Javascript 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 的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.