利用html和Jquery实现照片墙（点击之后放大，再点击缩小）

最新推荐文章于 2024-06-07 13:51:40 发布
最新推荐文章于 2024-06-07 13:51:40 发布
阅读量3.8k 收藏 7
点赞数 3
分类专栏： 前端 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superwoman_yy/article/details/78290524
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.12.2.min.js"></script>
		<script>
			$(function(){
				initimg();
				initposition();
				$(window).resize(initposition);
				$(".wrap .imgs li").click(smallImg);
				//初始化照片，循环拼接
				function initimg(){
					for(var i=1;i<=24;i++){
						var $li = $("<li></li>");
						$li.css({
							"background":"url('img/"+i+".jpg')",
							"background-size":"125px 125px"
						}).addClass("smallImg");
						$(".wrap .imgs").append($li);
					}
				}
				//初始化照片定位
				function initposition(){
					var w = ($(".wrap").width()-125*6)/5;
					var h = ($(".wrap").height()-125*4)/3;
					//.each视为了循环每一张照片
					$(".wrap li").each(fun
最低0.47元/天 解锁文章
superwoman_yy
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现点击图标div循环放大缩小功能
10-17
本篇文章将详细介绍如何使用jQuery实现点击图标时，div元素循环放大缩小的功能。 首先，jQuery是一个轻量级的JavaScript库，它提供了丰富的API和简洁的语法，使得开发者能更轻松地操作DOM元素、处理事件和执行动画...
jQuery实现的图片点击放大缩小功能案例
10-15
标题中的“jQuery实现的图片点击放大缩小功能案例”是指使用jQuery库来实现在网页中点击图片后，图片能够放大或缩小的功能。这个功能通常用于增强用户体验，让用户能更清晰地查看图片细节。以下是对该功能的详细解释...
html实现点击图片放大功能
nzz_1214
11-20 6750
<html> <head> <meta charset="UTF-8"/> <title>魔影国际影城全国分布图</title> <meta name="viewport" content="width=device-width,height=device-height;initial-scale=1,maximum-scale=1"> &...
html:点击图片放大到全屏居中，再次点击缩回
liu3743120的博客
07-10 9978
JavaScript代码： function coverLayer(tag) { with ($('.over')) { if (tag == 1) { css('height', $(document).height()); css('display', 'block'); ...
html页面上点击图片放大
最新发布
weixin_49720804的博客
06-07 412
html页面上有的图片很小 想点击某个图片后把图片放大展示 这里是用wangediter后渲染的html页面（dangerouslySetInnerHTML这个方法直接渲染html页面），这里是用原生js获取dom元素和antd的弹框组件实现的
h5 img js 点击图片放大_html5 点击图片中间显示 可放大 缩小 js+css
weixin_42470196的博客
02-15 637
【实例简介】html5 点击图片中间显示 可放大 缩小 js+css【实例截图】【核心代码】图片放大缩小特效└── 图片放大缩小特效├── cabel-v1.css├── images│ ├── mwsf-14.jpg│ ├── mwsf-14-thumb.jpg│ ├── mwsf-16.jpg│ ├── mwsf-16-thumb.jpg│ ├── mwsf-20.jpg│...
html中点击图片自动放大缩小,jquery点击图片进行放大缩小
weixin_31614747的博客
05-31 952
需求：点击图片进行放大，再点击缩小，进行轮回操作。分析：可以用jquery的toggle事件HTML中图片显示部分： 对应事件的javascript函数如下：function changeSize(id){var img = $("#"+id);var oWidth=img.width(); //取得图片的实际宽度var oHeight=img.height(); //取得图片的实际高度$("#"...
html竖着查看图片点击放大,利用jQuery实现点击弹窗图片放大预览查看
weixin_35133814的博客
06-04 283
特效描述：利用jQuery实现 点击弹窗 图片放大 预览查看。利用jQuery实现点击弹窗图片放大预览查看代码结构1. 引入CSS2. 引入JS3. HTML代码点击任意图片使用插件交互：ESC键关闭弹框，左键、右键和鼠标滚轮切换图片$(function () {$('.image-list').on('click', '.cover', function () {var this_ = $(th...
jQuery实现的点击图片居中放大缩小功能示例
10-17
以下是一个关于如何使用jQuery实现点击图片居中放大缩小功能的详细步骤： 首先，确保你的页面已经引入了jQuery库。你可以从官方下载地址（https://jquery.com/download/）获取最新版本，或者直接在HTML文件中引用...
基于jquery实现一张图片点击鼠标放大再点缩小
10-26
一张图片点击鼠标放大，再点缩小基于jquery1.8.3实现，下面有个不错的示例，感兴趣的朋友可以参考下
jQuery点击照片墙合成大图代码.zip
07-11
"jQuery点击照片墙合成大图代码"是一个示例项目，它展示了如何利用jQuery来实现一个功能，即当用户点击照片墙中的小图片时，能够展示一个放大并合成的大图。这个功能在许多网站的图片展示区域非常常见，为用户提供了...
图片墙，点击放大，支持左右切换
01-16
magnificPopupMaster插件的demo,简单实用。稳定。有图片放大的动画过度效果。用起来还是蛮不错的。并且弹层的高度是固定的。
html 图片整体缩放,html页面中css缩放图片的方法
weixin_36011746的博客
05-31 4796
在html页面制作中，可以利用 CSS 中的 transform 属性对图片进行旋转，缩放，移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。css transform 属性的介绍transform：该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。缩放使用值：scaleY(n)：对高度进行缩n倍的缩放scaleX(n)...
20行html代码加40行css代码实现照片墙页面（鼠标hover实现旋转缩放）
weixin_33937913的博客
12-20 222
为什么80%的码农都做不了架构师？>>> ...
html打照片墙的代码原理,20行html代码加40行css代码实现照片墙页面（鼠标hover实现旋转缩放）...
weixin_33655208的博客
05-31 550
html代码：照片墙照片展示css代码：@charset "utf-8";/**/*{/*全局初始化margin-外边距为0 padding-内边距为0*/margin: 0;padding: 0;}body{background-image: url(../img/IMG_20150219_192345.jpg);background-size: cover;}.photo-group im...
HTML5+CSS3实现图片可倾斜摆放的动画相册效果
01-19 1094
先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 1 @CHARSET "UTF-8"; 2 *{ 3 padding:0px; 4 margin:0px; 5 } 6 div{ 7 font-family:"楷体"; 8 font-size:14px; 9 col...
HTML5响应式网页设计——页面特效——平移、缩放、旋转、倾斜
m0_47274301的博客
11-20 1255
变换属性： 属性 说明 transform 指定应用的变换功能 transform-origin 指定变换的起点 transform属性的值： 属性 说明 transform（<长度值或百分数值>） transformX（<长度值或百分数值>） transformY（<长度值或百分数值>） scale(<数值>) scaleX(<数值> scaleY(<数值>
HTML照片墙 个性相册源码
banzhuan678的博客
04-29 2021
简介： 高晴，以第一名入围新浪发起的“中国最美校服女生”决赛并获得“最美校服女生”美誉而被网友们熟知，随后更参加了江苏卫视《一站到底》节目以及参演电视剧《先生，你哪位》并饰演郑蕊一角，被众多网友所喜爱也逐渐人气大增。 网盘下载地址： http://kekewl.net/8C1zes8KC2n0 图片： ...
html + css + jquery 照片墙
Object的博客
10-23 751
html + css + jquery 照片墙 需求： 将指定的照片放到照片墙 点击选中照片墙中的照片，照片墙显示选中照片的放大图片 点击照片墙的放大照片，照片墙还原成 多个小图 照片墙小图模式 照片墙大图模式 实现代码 <!DOCTYPE html> <html> <head> <!-- 引入JQuery --> <script src="./js/jquery3.5.1.js"></script>
利用jquery实现图片的放大
06-12
可以使用jQuery的插件来实现图片的放大，其中比较常用的插件是jQuery Zoom和jQuery Magnify。 1. jQuery Zoom jQuery Zoom是一个基于jQuery的图片放大插件，可以在鼠标悬停或点击时放大图片。 首先，在HTML中引入jQuery和jQuery Zoom的文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script> ``` 然后，在需要放大的图片上添加class属性，并在JavaScript中调用jQuery Zoom插件： ```html <img src="image.jpg" class="zoom"> ``` ```javascript $(document).ready(function(){ $('.zoom').zoom(); }); ``` 2. jQuery Magnify jQuery Magnify是另一个基于jQuery的图片放大插件，与jQuery Zoom相似，可以在鼠标悬停或点击时放大图片。 首先，在HTML中引入jQuery和jQuery Magnify的文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-magnify/2.1.1/jquery.magnify.min.js"></script> ``` 然后，在需要放大的图片上添加class属性，并在JavaScript中调用jQuery Magnify插件： ```html <img src="image.jpg" class="magnify"> ``` ```javascript $(document).ready(function(){ $('.magnify').magnify(); }); ``` 以上就是利用jQuery实现图片的放大的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值