jQuery 简单的jQuery悬停放大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20078250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simple Jquery hover enlarge
提问by A-frame
I'm not sure where I'm going wrong. I'm trying to create a very simple hover-enlarge plugin with Jquery using the scale function. Here is my code:
我不确定我哪里出错了。我正在尝试使用缩放功能使用 Jquery 创建一个非常简单的悬停放大插件。这是我的代码：
$(document).ready(function(){
$("#content img").toggle("scale",{
percent: "80%"
},0);
$('#content img').hover(function() {
$(this).css("cursor", "pointer");
$(this).toggle("scale",{
percent: "90%"
},500);
}, function() {
$(this).toggle("scale",{
percent: "80%"
},500);
});
});
Here's a small example: http://jsfiddle.net/8ECh6/
这是一个小例子：http: //jsfiddle.net/8ECh6/
Here's the page: http://samples.zcardna.com/health.html
这是页面：http: //samples.zcardna.com/health.html
If somone knows where I've gone wrong that would awesome! THANKS!
如果有人知道我哪里出错了，那就太棒了！谢谢！
回答by Trevor
Well I'm not exactly sure why your code is not working because I usually follow a different approach when trying to accomplish something similar.
好吧，我不确定为什么您的代码不起作用，因为在尝试完成类似的事情时，我通常会采用不同的方法。
But your code is erroring out.. There seems to be an issue with the way you are using scaleI got the jQuery to actually execute by changing your code to the following.
但是您的代码出错了。您使用的方式似乎存在问题，scale我通过将您的代码更改为以下内容来实际执行 jQuery。
$(document).ready(function(){
$('img').hover(function() {
$(this).css("cursor", "pointer");
$(this).toggle({
effect: "scale",
percent: "90%"
},200);
}, function() {
$(this).toggle({
effect: "scale",
percent: "80%"
},200);
});
});
But I have always done it by using CSSto setup my scaling and transition..
但我总是通过使用CSS来设置我的缩放和过渡来完成它..
Here is an example, hopefully it helps.
这是一个例子，希望它有所帮助。
$(document).ready(function(){
$('#content').hover(function() {
$("#content").addClass('transition');
}, function() {
$("#content").removeClass('transition');
});
});
回答by Dirk
If you have more than 1 image on the page that you like to enlarge, name the id's for instance "content1", "content2", "content3", etc. Then extend the script with this, like so:
如果您想要放大的页面上有 1 张以上的图像，请将 id 命名为例如“content1”、“content2”、“content3”等。然后使用此扩展脚本，如下所示：
$(document).ready(function() {
$("[id^=content]").hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
Edit: Change the "#content" CSS to: img[id^=content] to remain having the transition effects.
编辑：将“#content”CSS 更改为： img[id^=content] 以保持过渡效果。
回答by Code Spy
This will show original dimensions of Image on Hover using jQuery custom code
这将使用 jQuery 自定义代码在悬停时显示图像的原始尺寸
HTML
HTML
<ul class="thumb">
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/1.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/2.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/3.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/4.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/5.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/6.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/7.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/8.jpg)"></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="thumbnail-wrap" style="background-image:url(./images/9.jpg)"></div>
</a>
</li>
</ul>
CSS
CSS
ul.thumb {
float: left;
list-style: none;
padding: 10px;
width: 360px;
margin: 80px;
}
ul.thumb li {
margin: 0;
padding: 5px;
float: left;
position: relative;
/* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li .thumbnail-wrap {
width: 100px;
height: 100px;
/* Set the small thumbnail size */
-ms-interpolation-mode: bicubic;
/* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
position: absolute;
left: 0;
top: 0;
background-size: cover;
background-repeat: no-repeat;
-webkit-box-shadow: inset -3px 0px 40px -15px rgba(0, 0, 0, 1);
-moz-box-shadow: inset -3px 0px 40px -15px rgba(0, 0, 0, 1);
box-shadow: inset -3px 0px 40px -15px rgba(0, 0, 0, 1);
}
ul.thumb li .thumbnail-wrap.hover {
-webkit-box-shadow: -2px 1px 22px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -2px 1px 22px -1px rgba(0, 0, 0, 0.75);
box-shadow: -2px 1px 22px -1px rgba(0, 0, 0, 0.75);
}
.thumnail-zoomed-wrapper {
display: none;
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
width: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 99;
}
.thumbnail-zoomed-image {
margin: auto;
display: block;
text-align: center;
margin-top: 12%;
}
.thumbnail-zoomed-image img {
max-width: 100%;
}
.close-image-zoom {
z-index: 10;
float: right;
margin: 10px;
cursor: pointer;
}
jQuery
jQuery
var perc = 40;
$("ul.thumb li").hover(function () {
$("ul.thumb li").find(".thumbnail-wrap").css({
"z-index": "0"
});
$(this).find(".thumbnail-wrap").css({
"z-index": "10"
});
var imageval = $(this).find(".thumbnail-wrap").css("background-image").slice(5);
var img;
var thisImage = this;
img = new Image();
img.src = imageval.substring(0, imageval.length - 2);
img.onload = function () {
var imgh = this.height * (perc / 100);
var imgw = this.width * (perc / 100);
$(thisImage).find(".thumbnail-wrap").addClass("hover").stop()
.animate({
marginTop: "-" + (imgh / 4) + "px",
marginLeft: "-" + (imgw / 4) + "px",
width: imgw + "px",
height: imgh + "px"
}, 200);
}
}, function () {
var thisImage = this;
$(this).find(".thumbnail-wrap").removeClass("hover").stop()
.animate({
marginTop: "0",
marginLeft: "0",
top: "0",
left: "0",
width: "100px",
height: "100px",
padding: "5px"
}, 400, function () {});
});
//Show thumbnail in fullscreen
$("ul.thumb li .thumbnail-wrap").click(function () {
var imageval = $(this).css("background-image").slice(5);
imageval = imageval.substring(0, imageval.length - 2);
$(".thumbnail-zoomed-image img").attr({
src: imageval
});
$(".thumnail-zoomed-wrapper").fadeIn();
return false;
});
//Close fullscreen preview
$(".thumnail-zoomed-wrapper .close-image-zoom").click(function () {
$(".thumnail-zoomed-wrapper").hide();
return false;
});
回答by CY5
To create simple hover enlarge plugin, try this. (DEMO)
要创建简单的悬停放大插件，试试这个。 （演示）
HTML
HTML
<div id="content">
<img src="http://www.freevectorgallery.com/wp-content/uploads/2011/10/Vintage-Microphone- 11395-large.jpg" style="width:50%;" />
</div>
js
js
$(function () {
$('#content img').hover(function () {
$(this).toggle(function () {
$(this).width('70%');
});
});
});
