使用 jQuery 预览图像,更改悬停图像大小
Image Preview with jQuery, change the Hover image size
这应该是一个非常简单的问题:
我正在尝试使用jQuery使用最简单的工具提示和图像预览我正在尝试使用此示例
它对我来说工作正常,
我的问题是如何更改悬停图像大小(悬停小图像后工具提示中显示的图像大小)我的图像太大,我想将其大小设置为 200px x 200px我该怎么做?
这是当前样式:
<style>
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
这是Javascript:
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("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();
});
这是主要的:
<a href="1.jpg" /*class="preview"*/><img src="1s.jpg" alt="gallery thumbnail" /></a>
添加
#preview img {
height:200px;
}
或更改
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
自
$("body").append('<p id="preview"><img style="height:200px" src="'+ this.href +'" alt="Image preview" />'+ c +'</p>');
或
$("body").append('<p id="preview"><img style="width:200px" src="'+ this.href +'" alt="Image preview" />'+ c +'</p>');
取决于您要如何限制它
相关文章:
- JQuery图像悬停并单击冲突
- 将图像悬停在左侧时,右侧的图像会发生变化
- 图像悬停时的取消滑块
- 图像悬停时的文本叠加 - 响应式
- Jquery 图像悬停效果错误
- Jquery图像悬停卡住了
- 图像悬停在几个图像上不起作用
- Adipoli jQuery 图像悬停效果
- HS 画布图像悬停/交换
- 在文本链接上显示图像 悬停在 CSS 或 JS 上
- HTML/CSS图像悬停-使用不同大小的图像
- 在图像悬停时显示文本而不是光标
- 图像悬停并替换-jquery
- Java脚本图像悬停效果
- JQuery图像悬停在之前/之后
- jQuery图像悬停时的简单文本更改
- JQuery在图像悬停显示标题标签内容,可能的
- Jquery交换图像悬停在不同的元素
- 只有Javascript -改变图像悬停在隐藏的单选按钮
- 图像悬停查询效果