jq简单的图片放大缩小

最新推荐文章于 2022-03-18 10:09:51 发布
最新推荐文章于 2022-03-18 10:09:51 发布
阅读量97 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sunlyq/p/6694469.html
版权

开始自己的学习之旅，坚持

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
</head>
<body>
<div id="divimg" style="width:400px"><img id="imgcont" alt="" src="img/2.jpg" style="width:200px;height:200px"
</div>

<input id="btn1" type="button" value="放大"/>
<input id="btn2" type="button" value="缩小"/><br />

<script>
$("#btn1").click(function(){
$("#imgcont").css({width:"250px",height:"250px"});
});
$("#btn2").click(function(){
$("#imgcont").css({width:"150px",height:"150px"});
});

//鼠标浮动事件
// $("#imgcont").mouseover(function(){
// $("#imgcont").css({width:"300px",height:"300px"});
// });
// $("#imgcont").mouseout(function(){
// $("#imgcont").css({width:"200px",height:"200px"});
// });
</script>
</body>
</html>

 

//简单的显示隐藏替换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello World jQuery!</title>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="show" />
<input id="btnHide" type="button" value="hidden" /><br/>
<input id="btnChange" type="button" value="change content is Hello World, too!"/>
<script>
$("#btnShow").bind("click",function(event){
$("#divMsg").show();//显示
});

$("#btnHide").bind("click",function(event){
$("#divMsg").hide();//隐藏
});

$("#btnChange").bind("click",function(event){
$("#divMsg").html("Hello World,too!");
});
</script>

</body>
</html>

 

//验证框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>

</head>
<body>
<div id="divMsg">验证输入框</div>
<input id="text1" type="text" />
<input id="text2" type="text" readonly="readonly" /><br />
<script>
$("#text1").bind("focus",function(event){
$("#text2").val("256yu9");
});

</script>
</body>
</html>

转载于:https://www.cnblogs.com/sunlyq/p/6694469.html

dingkangan2211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery点击放大缩小图片尺寸的方法
yushu778的博客
03-18 2495
一.尺寸方法 二.放大图片尺寸 三.缩小图片尺寸
基于JQuery的图片放大缩小，拖动
02-15
基于JQuery的图片放大缩小功能，以及拖动等相关功能。
jq双击放大图片_基于jquery实现一张图片点击鼠标放大再点缩小
weixin_35625397的博客
12-29 164
var isopen = false;var newImg;var w = 200; //将图片宽度+200var h = 200; // 将图片高度 +200$(document).ready(function(){$("img").bind("click", function(){newImg = this;if (!isopen){isopen = true;$(this).width($(...
jq图片放大缩小
xiaoyun888_的博客
11-16 149
css部分： .pic01{ width: 100px !important; height: 100px; } .pic02{ display: none; } .pic02 img{ z-index: 11; width: 300px; height: 300px; .
前端jquery实现图片点击放大缩小
热门推荐
gjq1993的博客
02-15 2万+
利用dom的垂直分层实现图片的点击放大和缩小（手机上使用的效果较好），在图片放大的时候同时禁止页面的滑动，如果在web端的话可以不禁止屏幕的滚动（因为图片放大是将图片的宽度变成100%，在web上长度可能会超出屏幕 的高度）。 js部分： function clickToBigImg(){//绑定图片函数 //var clickImgId = $(this).attr("i
jQuery图片放大缩小旋转预览代码
07-24
对于图片放大和缩小，我们可以记录下初始坐标和缩放比例，然后根据鼠标移动的距离和缩放比例调整图片大小： ```javascript var initialScale = 1; var initialMouseX, initialMouseY; // 放大/缩小函数 function ...
jq zoom实现图片放大缩小
02-11
总的来说，使用jQuery Zoom插件实现图片放大缩小功能涉及以下几个步骤：引入jQuery和插件库，设置HTML结构，初始化插件，并可选地调整配置选项。这个过程结合了HTML、CSS和JavaScript，展示了前后端技术在增强网页...
JQuery点击放大缩小图片并可左右滑动
05-09
Rebox可能是基于JQuery的一个轻量级实现，它可能包含了图片放大、缩小以及左右滑动的功能。使用这样的插件可以大大简化开发工作，因为它们通常已经封装好了所有必要的逻辑和样式。 在实际应用中，我们还需要考虑...
jquery图片放大缩小旋转代码.zip
01-03
本项目"jquery图片放大缩小旋转代码"提供了利用jQuery实现图片的动态操作，如放大、缩小和旋转的功能。下面将详细解释这个功能的实现原理和步骤。 1. **HTML 结构**： 首先，我们需要在 HTML 页面中创建一个图片...
基于jquery的滚动鼠标放大缩小图片效果
10-28
在网页设计中，为了增强用户体验，经常需要实现一些交互性的特效，比如图片的滚动鼠标放大缩小功能。这个功能使得用户可以通过滚轮轻松查看图片的细节，尤其在展示产品或艺术作品时非常有用。本篇文章将详细讲解如何...
JQuery，图片的放大和缩小
08-10
NULL 博文链接：https://cb123456.iteye.com/blog/2213358
jquery 点击图片放大，再点击缩小（针对同一张图片）
09-27
一个简单的 针对同一张图片，点击图片放大，再点击缩小.
jquery图片的放大缩小旋转
06-25
jquery图片的放大缩小旋转
jQuery全屏图片放大缩小切换特效
06-10
jQuery全屏马赛克透明背景图片放大缩小切换特效，鼠标滚轮控制图片放大缩小，图片放大后可拖动，支持左右箭头控制图片切换。
【JQ】点击图片放大缩小（添加样式实现）
longlongfishday的博客
09-17 459
基于layui的图片放大 在弹窗中显示放大图片 $('body').on('click', '.imgSM', function () { var imgsrc = $(this).attr('src'); var index = layer.open({ type: 1, title: '查看大图', ...
用jQuery写图片放大和缩小
m0_68189681的博客
03-18 1607
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.11.2.js"></script> </head> <body> <h2>图片放大缩小</h2> <img src="img/1d.jpg" a.
jq放大图片
黎成诃月的博客
01-17 399
$(".list-item").hover(function(){         $(this).children(".list-scale").addClass("scaleMax")     },function(){         $(this).children(".list-scale").removeClass("scaleMax")     }); .bigImg-text{
jquery缩放图片_jQuery CSS缩放图像教程
cuken7684698822的博客
08-06 344
jquery缩放图片Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing. Features 今天，我将向您介绍JQuery的另一个有用工具-Zoomimage插件...
前端 原生js/jq放大图片方法
最新发布
07-12
在前端开发中，可以使用原生 JavaScript 或 jQuery 来实现图片的放大效果。下面分别给出两种方法： 1. 原生 JavaScript 方法： ```javascript // HTML 结构 // <img src="path_to_image.jpg" alt="Image" class="zoomable-image"> // CSS 样式 // .zoomable-image { // cursor: pointer; // } // JavaScript 代码 const images = document.querySelectorAll('.zoomable-image'); images.forEach(image => { image.addEventListener('click', function() { // 创建放大图片的容器 const zoomContainer = document.createElement('div'); zoomContainer.classList.add('zoom-container'); document.body.appendChild(zoomContainer); // 创建放大图片 const zoomedImage = document.createElement('img'); zoomedImage.src = this.src; zoomedImage.alt = this.alt; zoomContainer.appendChild(zoomedImage); // 点击放大图片容器时关闭放大效果 zoomContainer.addEventListener('click', function() { this.remove(); }); }); }); ``` 2. 使用 jQuery 方法： ```javascript // HTML 结构与 CSS 样式同上 // JavaScript 代码 $('.zoomable-image').on('click', function() { // 创建放大图片的容器 const zoomContainer = $('<div>').addClass('zoom-container'); $('body').append(zoomContainer); // 创建放大图片 const zoomedImage = $('<img>').attr('src', this.src).attr('alt', this.alt); zoomContainer.append(zoomedImage); // 点击放大图片容器时关闭放大效果 zoomContainer.on('click', function() { $(this).remove(); }); }); ``` 以上代码实现了点击图片时，在页面上创建一个放大的图片，并且点击放大的图片时可以关闭放大效果。你可以根据实际需求，对样式和交互进行进一步的调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值