点击图片弹出大图滚动鼠标控制图片资源-CSDN文库

共23个文件

gif：11个

js：4个

css：3个

点击图片弹出大图

滚动鼠标控制图片

5星 · 超过95%的资源需积分: 9 195 浏览量 2010-09-08 10:53:05 上传评论收藏 135KB RAR 举报

标题和描述中提到的功能涉及到网页图像展示和交互设计，主要涉及HTML、CSS和JavaScript技术。在网页中实现“点击图片弹出大图”并“滚动鼠标控制图片大小”的功能，通常需要以下步骤和技术： 1. 图片显示：在HTML中，我们可以使用`<img>`标签来插入图片。例如： ```html <img src="image_path.jpg" alt="图片描述" id="thumbnail"> ``` 这里`src`属性定义了图片的路径，`alt`提供了图片的文字描述，而`id`则用于JavaScript中的元素选择。 2. 弹出大图：当点击小图时，我们可以通过JavaScript添加一个新的`<div>`元素来承载大图，并将大图的源设置为小图的源。例如： ```javascript document.getElementById('thumbnail').addEventListener('click', function() { var bigImage = '<img src="' + this.src + '" class="large-image">'; var modal = document.createElement('div'); modal.innerHTML = bigImage; document.body.appendChild(modal); }); ``` 这段代码会在用户点击小图时创建一个包含大图的新`<div>`，并将其添加到页面底部。 3. 控制图片大小：使用JavaScript监听鼠标的滚轮事件，根据滚轮的滚动方向调整大图的大小。可以使用`onwheel`事件和CSS的`transform`属性实现： ```javascript document.addEventListener('DOMContentLoaded', function() { var modal = document.querySelector('.large-image'); modal.addEventListener('wheel', function(event) { var scale = event.deltaY < 0 ? 1.1 : 0.9; // 如果向上滚动，放大；向下滚动，缩小 this.style.transform = 'scale(' + scale + ')'; }); }); ``` 这段代码会在用户滚动鼠标滚轮时，根据滚轮的滚动方向改变图片的缩放比例。 4. 完整实现：结合上述代码，我们需要一个完整的HTML页面结构，例如`Test.htm`可能包含： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>点击图片弹出大图</title> <style> .large-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; } </style> </head> <body> <img src="small_image.jpg" alt="小图" id="thumbnail"> <script> // 上述JavaScript代码 </script> </body> </html> ``` 注意，这里的`small_image.jpg`需要替换为实际的小图路径。 5. 文件123456：提供的文件名`123456`可能是一个图片文件，如JPEG或PNG格式，它应该是小图`thumbnail`的源文件，或者是大图`large-image`在弹出时使用的源文件。通过上述方法，我们可以实现标题和描述中的功能，让网页中的图片在被点击后以大图形式弹出，并且通过鼠标滚轮控制图片的大小。这个过程涉及到前端开发的基本技能，包括HTML布局、CSS样式以及JavaScript事件处理。

资源推荐

资源详情

资源评论

收起资源包目录

点击弹出大图.rar （23个子文件）

123456

imgzoom_tb.gif 459B

77_avatar_middle.jpg 4KB

viewthread.js 10KB

go.htm 0B

rtk_s.gif 331B

qq.gif 1KB

style_7_common.css 47KB

close.gif 99B

online_member.gif 365B

attachimg.gif 730B

userinfo.gif 607B

star_level1.gif 547B

style_7_seditor.css 1KB

common.js 57KB

smilies_var.js 3KB

eauto_logo.gif 4KB

100908092593a6b31b4f71929d.jpg 33KB

star_level3.gif 627B

3020990.js 2KB

none.gif 43B

1009080926e903f38110c88bea.jpg 83KB

scriptstyle_7_viewthread.css 30KB

Test.htm 1KB

<TITLE>Powered by Discuz!</TITLE> <LINK href="123456/style_7_common.css" type=text/css rel=stylesheet> <LINK href="123456/scriptstyle_7_viewthread.css" type="text/css" rel="stylesheet"> <script type=text/javascript>IMGDIR = 'images/default'</script> <script src="123456/common.js" type="text/javascript"></script> <div id="append_parent"></div> <div id="ajaxwaitid"></div> <script src="123456/viewthread.js" type=text/javascript></script> <script type=text/javascript>zoomstatus = parseInt(1);var imagemaxwidth = '600';var aimgcount = new Array();</script> <IMG class="zoom" id=aimg_541 onMouseOver="showMenu({'ctrlid':this.id,'pos':'12'})" onClick="zoom(this, this.src)" alt=1.jpg src="123456/none.gif" width=600 file="123456/100908092593a6b31b4f71929d.jpg"> <IMG class=zoom id=aimg_542 onMouseOver="showMenu({'ctrlid':this.id,'pos':'12'})" onClick="zoom(this, this.src)" alt=2.jpg src="123456/none.gif" width=600 file="123456/1009080926e903f38110c88bea.jpg"> <script type=text/javascript reload="1">aimgcount[2830] = [541,542];attachimgshow(2830);</script> <div class="mainbox viewthread" id="postlistreply"><div class="viewthread_table" id="post_new" style="DISPLAY: none"></div></div><div class="forumcontrol s_clear"></div> <script type=text/javascript> var postminchars = parseInt('10'); var postmaxchars = parseInt('10000'); var disablepostctrl = parseInt('0'); </script>

评论收藏

内容反馈