简单的 Jquery 悬停放大
Posted
技术标签:
【中文标题】简单的 Jquery 悬停放大【英文标题】：simple Jquery hover enlarge 【发布时间】：2013-12-03 09:38:03 【问题描述】：我不确定我哪里出错了。我正在尝试使用缩放功能使用 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);
);
);
这是一个小例子：http://jsfiddle.net/8ECh6/
这是页面：http://samples.zcardna.com/health.html
如果有人知道我哪里出错了，那就太棒了！ 谢谢！
【问题讨论】：
嗨@A-frame，如果您发布一个包含您的代码的JSFiddle链接，您将获得更快的帮助。 (jsfiddle.net) 发生了什么（或没有发生）？你有错误吗？也发布您的 HTML。 @j08691 没有任何反应。这是我正在处理的简单登录页面：samples.zcardna.com/health.html @blurfus link 在下面查看我的答案 【参考方案1】：好吧，我不太确定您的代码为什么不起作用，因为在尝试完成类似的事情时，我通常会采用不同的方法。
但是您的代码出错了。您使用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);
);
);
但我总是通过使用CSS 来设置缩放和过渡..
这是一个例子，希望对你有帮助。
$(document).ready(function()
$('#content').hover(function()
$("#content").addClass('transition');
, function()
$("#content").removeClass('transition');
);
);
http://jsfiddle.net/y4yAP/
【讨论】：
在 CSS 中使用#content:hover 并且您根本不必使用 jQuery/JS...参见 jsfiddle.net/en30ajh0（使用 javascript 在悬停时切换类似乎非常多余）
@Trevor 转换完成后我需要一些回电。我想在转换后隐藏图像并显示带有一些细节的 div，例如 tympanus.net/Tutorials/OriginalHoverEffects/index10.html
@anam 抱歉，您的问题在新问题中可能得到最好的回答。如果您创建了一个问题并且没有立即得到答案，请给我发消息链接到您的问题，我会解决它。谢谢【参考方案2】：
如果您想要放大的页面上有超过 1 张图片，请将 id 命名为“content1”、“content2”、“content3”等。然后使用此扩展脚本，如下所示：
$(document).ready(function()
$("[id^=content]").hover(function()
$(this).addClass('transition');
, function()
$(this).removeClass('transition');
);
);
编辑： 将“#content”CSS 更改为：img[id^=content] 以保持过渡效果。
【讨论】：
【参考方案3】：要创建简单的悬停放大插件，试试这个。 (DEMO)
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
$(function ()
$('#content img').hover(function ()
$(this).toggle(function ()
$(this).width('70%');
);
);
);
【讨论】：
【参考方案4】：Demo Link
Tutorial Link
这将使用 jQuery 自定义代码显示悬停时图像的原始尺寸
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
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
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;
);
【讨论】：
以上是关于简单的 Jquery 悬停放大的主要内容，如果未能解决你的问题，请参考以下文章