鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

2024-05-17

当您将鼠标悬停在图像缩略图上(例如 Google 图片正在使用的缩略图)时,我正在尝试创建图像放大效果。但是,我遇到了一个问题,即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置。

这是我到目前为止所拥有的:

<style>
img{float:left;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#I1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#I1").animate({height:96,width:128},"fast");
   });
});
</script> 

 <img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >

你是否尝试过给它一个比其他的更高的 z-index 和一个绝对位置?你肯定需要给它一个绝对位置 - 这就是你如何将它从 DOM 堆栈中删除并使其独立浮动在那里,而不使其他元素依赖于它。

或者,您可以像我在这里那样使用克隆:

..删除了旧网址..

更新了更多“图像”、更流畅的动画,并删除了之前导致图像卡住的错误。

http://jsfiddle.net/Swader/jKTVn/7/ http://jsfiddle.net/Swader/jKTVn/7/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

鼠标悬停时放大图像而不使用 Jquery 推送其他图像? 的相关文章

随机推荐

  • Windows-1252 编码 - 显示不正确的字符

    我有一个缓冲区 其中包含以 Windows 1252 编码的字符 然而 当我使用适当的编码创建一个新的字符串时 我经常得到询问标记 而不是预期的结果 例如 byte tmps new byte byte 0xfb System out pr
  • iOS 上的 OpenCV - VideoCapture 属性始终返回 1

    我一直在尝试构建一个简单的 OpenCV iOS 应用程序 该应用程序从捆绑包中加载视频并查询其帧数 持续时间等 然后它将尝试从中获取各个帧 不幸的是 当我使用VideoCapture类中 所有属性返回值 1 然后我尝试导航到frame 1
  • 如何 XML 序列化 DateTimeOffset 属性?

    The DateTimeOffset当数据表示为 Xml 时 我在此类中拥有的属性不会呈现 我需要做什么来告诉 Xml 序列化将其正确呈现为DateTime or DateTimeOffset XmlRoot playersConnecte
  • 使用元类的 __call__ 方法而不是 __new__?

    在讨论元类时 the docs http docs python org reference datamodel html state 您当然也可以重写其他类方法 或添加新的 方法 例如定义一个自定义 call 方法中的 元类允许在调用类时
  • Google Apps 脚本:比较日期

    我在比较 Google Apps 脚本中的日期时遇到了一个奇怪的问题 为此 我的工作表在 cell getValue 中有一个日期 所以 e range setNote cell getValue startDate 行中 注释显示两个看起
  • MongoDB:如果使用 $addToSet 或 $push,是否应该预先分配文档?

    我一直在研究 MongoDB 我知道强烈建议在插入时完全构建 预分配 文档结构 这样将来对该文档的更改不需要移动该文档磁盘周围 这在使用 addToSet 或 push 时适用吗 例如 假设我有以下文档 id rsMH4GxtduZZfxQ
  • LC3 LEA指令和存储的值

    我对这个问题感到困惑 指令后寄存器0中存储的值是多少 LEA R0 A 被处决了吗 为什么答案是x370C 我认为应该将A的地址加载到R0中 如果是这样我们怎么知道地址 有人可以帮忙吗 非常感谢 ORIG X3700 LEA R0 A LD
  • 在 hooks 文件夹中使用节点脚本时,cordova 插件安装问题

    Cordova 3 4 hooks 未在 iOS 中正确安装提到的插件 我正在添加install plugins js进入文件夹project project root hooks after platform add其中有以下代码 usr
  • 如何获取 OpenIdConnectOptions StateDataFormat

    我有一个自定义 Open Id Connect 服务器 使用身份服务器4 https github com IdentityServer IdentityServer4 此 SSO 服务器具有用于非标准 Open Id Connect 操作
  • Spark 在 WholeTextFiles 上创建的分区少于 minPartitions 参数

    我有一个文件夹 里面有 14 个文件 我在一个集群上使用 10 个执行器运行 Spark Submit 该集群的资源管理器为 YARN 我创建了我的第一个 RDD 如下所示 JavaPairRDD
  • 将二进制数据转换为 pdf 文件

    我正在尝试将二进制数据转换为其原始格式 PDF 但是我的任何一个解决方案都打破了我的想法 第一个是一个小文件 它创建一个 PDF 文件 但它显示为空 第二个也创建了一个 PDF 文件 但我无法打开它 错误在哪里 第一个代码 Conn Ope
  • 为什么 Visual Studio 2013 不断更改为深色主题

    我有 Visual Studio 2013 Professional 它不断将我的主题从蓝色变为深色 有人知道这是为什么吗 是的 我使用在几台计算机之间共享的公司帐户登录 听起来您的 Visual Studio 中已启用同步设置 因此它正在
  • 使用 LINQ 与 C# 交换 List<> 元素

    我有这个清单 var 列表 新列表 3 1 0 5 我想将元素 0 与 2 交换 输出 0 1 3 5 如果您只想对其进行排序 我会使用 List Sort 如果你想交换 没有内置的方法可以做到这一点 不过 编写扩展方法很容易 static
  • Android 11 上的新 BlobStoreManager 读写

    我以前使用外部存储来存储我想在应用程序之间共享的特定数据 没有任何内容提供者 主机 File folder new File Environment getExternalStorageDirectory FOLDER NAME File
  • UiTextField 和 resignFirstResponder

    我有一个奇怪的设置 我有一个View called View1 and a ViewController call 视图控制器1 in IB View1是 的孩子视图控制器1 Inside View1 我使用代码创建UITextField并
  • 是否可以通过 C#.NET 编写 Win32 .dll 文件?

    是否可以通过 C NET 编写 Win32 dll 文件 如果是的话 我在哪里可以找到一些教程 如果不是 那么您对编写 Win32 DLL 有什么建议 Thanks 对的 这是可能的 事实上有一个工具可以做到这一点 它在 Rainmeter
  • 我的 DataContext 怎么错了?

    我使用 LINQ To SQL 一段时间了 我通常在解决方案中执行以下操作 在一个项目中 我创建了一个 dbml 架构 在另一个项目中 我创建了一个简单的 DataAccessLayer DAL 它了解我的第一个项目 并实例化 DataCo
  • 函数未定义 - 未捕获的引用错误

    我有这个 Uncaught ReferenceError 函数未定义 错误 不明白 如果我有 document ready function function codeAddress var address document getElem
  • 如何在不关闭浏览器自动完成建议的情况下改进它们?

    这里有十个无数的线程 如何disable浏览器自动完成行为 例如如何禁用网络表单字段 输入标签上的浏览器自动完成功能 https stackoverflow com questions 2530 how do you disable bro
  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的