Jquery实现鼠标放在图片上面显示大图效果

 

 才学jquery两天。代码可能比较杂,仅供参考。

 引用 http://www.zhjie.net

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="file:///E|/MyWeb/MyBlog/Js/jquery-1.7.2.js"></script>
<style type="text/css">
.imgDiv{ position:absolute;}
#showPic{ position:absolute; z-index:2; top:200px; left:200px; width:150px; height:300px; display:none;}
</style>

</head>

<body>
<div id="pic">
<img src="file:///F|/Picture/唯美宽屏桌面/jiping (1).jpg"
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现鼠标选择显示图片的功能,需要以下几个步骤: 1. 引入 jQuery 库代码 2. 编写 HTML 代码,并给需要触发显示图片元素添加相应的类名或 ID 3. 编写 CSS 代码,设置需要显示图片的样式及初始状态 4. 编写 jQuery 代码,添加鼠标事件,并控制图片显示和隐藏 以下是一个简单的实现示例: HTML 代码: ```html <div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <div class="description"> <p>点击图片查看大图</p> </div> ``` CSS 代码: ```css .image-container img { display: none; /* 初始状态下隐藏图片 */ } .image-container img.active { display: block; /* 当前选中的图片显示 */ margin: 0 auto; /* 图片居中显示 */ max-width: 100%; /* 图片不超过容器宽度 */ } .description { text-align: center; } ``` jQuery 代码: ```javascript $(document).ready(function(){ // 给每个图片添加点击事件 $('.image-container img').click(function(){ // 移除所有图片的 active 类,隐藏所有图片 $('.image-container img').removeClass('active'); // 给当前点击的图片添加 active 类,显示图片 $(this).addClass('active'); }); }); ``` 如果您的代码无法实现该功能,可能是由于以下原因: 1. 没有正确引入 jQuery 库的代码。 2. 没有添加鼠标事件或事件绑定错误。 3. CSS 样式设置不正确。 4. HTML 结构或类名、ID 命名错误。 您可以检查以上几个方面,看看哪个地方出现了问题。如果还有疑问,可以提供您的代码和错误信息,我可以帮您进一步分析。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值