图像悬停缩放像谷歌图像
Image Hover Zoom like Google Images
我写了一些jquery
代码(来自一个视频教程),使鼠标悬停缩放效果像在谷歌图片。我想在变焦前添加一些延迟(0.5-1秒),但我不知道该怎么做!!我尝试了很多delay()
或setTimeout()
的方法,但没有任何帮助!!
我不知道为什么……下面是javascript代码:
$(function(){
$.fn.popOut=function(user_opts){
return this.each(function(){
var opts=$.extend({
useId:"poppedOut",
padding:20,
border:0,
speed:200
},user_opts);
$(this).mouseover(function(){
// kill any instance of this already
$("#"+opts.useId).remove();
// make a copy of the hovered guy
var $div=$(this).clone();
// setup for prelim stuff
$div.css({
"position":"absolute",
"border":opts.border,
"top":$(this).offset().top,
"left":$(this).offset().left,
"-moz-box-shadow":"0px 0px 12px black",
"-webkit-box-shadow":"0px 0px 12px black",
"z-index":"99"
});
// store all of the old props so it can be animate back
$div.attr("id",opts.useId)
.attr("oldWidth",$(this).width())
.attr("oldHeight",$(this).height())
.attr("oldTop",$(this).offset().top)
.attr("oldLeft",$(this).offset().left)
.attr("oldPadding",$(this).css("padding"));
// put this guy on the page
$("body").prepend($div);
// animate the div outward
$div.animate({
"top":$(this).offset().top-Math.abs($(this).height()-opts.height),
"left":$(this).offset().left-opts.padding,
"height":opts.height,
"padding":opts.padding
},opts.speed);
// loop through each selector and animate it to its css object
for(var eachSelector in opts.selectors){
var selectorObject=opts.selectors[eachSelector];
for(var jquerySelector in selectorObject){
var cssObject=selectorObject[jquerySelector];
$div.find(jquerySelector).animate(cssObject,opts.speed);
}
}
$div.mouseleave(function(){
$("#"+opts.useId).animate({
width:$(this).attr("oldWidth"),
height:$(this).attr("oldHeight"),
top:$(this).attr("oldTop"),
left:$(this).attr("oldLeft"),
padding:$(this).attr("oldPadding")
},0,function(){
$(this).remove();
});
});
});
});
};
$(".productBox").popOut({
height:300,
border:"1px solid #333",
selectors:[{".productDescription":{
height:150
}
}]
});
});
和HTML示例代码:
<div class="productBox" style="width:300px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a>
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div>
</div>
</div>
<div class="productBox" style="width:200px;height:235px;margin-right:10px;float:left;background-color:#fff;">
<div class="productImage" style="width:200px;height:116px;overflow:hidden;">
<a href="#"><img src="/home/ponomar/plakat5.jpg" width="100%"></a>
</div>
<div class="productContent" style="float:left;">
<div class="productTitle" style="height:29px;">Product title</div>
<div class="productDescription" style="height:70px;">Here is description of the product.</div>
<div class="buyButton" style="margin-top:0;float:left;"><a href="#">Buy this!</a></div>
</div>
</div>
谁能帮我做那件事?此外,我认为这是一个非常有用的脚本。
提前感谢!!
这可能是你正在寻找的:hoverIntent jQuery插件
最好的例子可以在Pop Images中找到,比如Google Images
还可以看一下演示
如果要将克隆对象复制到原始div中,则只需遵循以下步骤:
添加id到你原来的div &下面的代码在各自的代码之上:
var old_box = $div.attr('id');
$div.attr("id", opts.useId)
.attr("oldWidth", $(this).width())
.attr("oldHeight", $(this).height())
.attr("oldTop", $(this).offset().top)
.attr("oldLeft", $(this).offset().left)
.attr("oldPadding", $(this).css("padding"));
在mouseleave事件上方添加以下代码:
$div.click(
function() {
$("#" + old_box).html($(this).html());
$(this).remove();
}
);
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 强制谷歌为javascript背景图像编制索引
- 将谷歌地图中的平移边界设置为图像覆盖
- 如何获取显示在谷歌搜索右侧的图像链接
- 谷歌地图加载后隐藏加载图像
- 如何使用谷歌应用程序脚本从电子邮件中提取内联文件/图像
- 谷歌浏览器控制台,打印图像
- 加载、滚动、放大和缩小图像,如谷歌地图
- 如何创建谷歌图像引擎效果
- 创建谷歌图表;转换为图像服务器端
- 如何从Node中的图像url将图像上传到谷歌云存储
- 当点击按钮时,谷歌图表转换为图像
- 谷歌地球Api改变图像对比度
- 角度谷歌地图:将图像放在信息窗口
- 谷歌地图和谷歌地点库中不同地点类型的不同图像
- 如何在谷歌图像搜索api v2中获取图像url
- 谷歌图书预览没有在安全的https上显示图书图像链接,但在http上工作.在Google Chrome和Touch浏览器
- 如何使用Api v3在谷歌地图上放置图像
- 动态画布大地图像谷歌地图
- 如何创建未预定义的多图像谷歌地图标记阵列