图像的jquery悬停效果
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>
Javascript
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);*/
}
相关文章:
- css(或jQuery)悬停时淡入淡出
- jquery快速悬停问题
- jQuery:当屏幕大小改变时,如何更改默认图像和悬停图像
- jQuery悬停在没有鼠标悬停的情况下启动
- 如何使jQuery中的悬停函数单独应用于数据库映像
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- jquery悬停和while循环
- 在悬停Jquery/cs3时通过翻转动画更改文本
- 悬停在悬停jquery/javascript中
- 更改元素父元素的背景颜色时停止在
上闪烁鼠标悬停?jQuery/JS. - 在悬停jQuery上保持下拉列表打开
- 使用.on()关闭悬停jquery
- 如何设置属性='数据fancybox组'在滑动悬停jquery
- Wordpress不接受.悬停(jquery)
- 我如何添加文本到悬停jQuery元素
- Img SRC路径给第一个子只在悬停jquery
- 我如何跟踪一个:悬停jquery源代码
- 显示通知直到超时除非悬停(jQuery)
- 改变悬停jquery的一部分Href
- 改变背景位置的悬停- jquery