[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

时间：2023-02-20 18:54:51

HTML代码：

<!DOCTYPE html>

<html>

	<head>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

        <link rel="stylesheet" href="style.css" type="text/css" />

        <script type='text/javascript' src='script.js'></script>

	</head>

	<body>

	<img id="back" name="back" src="back.jpg" alt = "背景"/>

	<div>

		<div id="larger" class="size_btn"><img src="+.png" alt="+"></div>

		<div id="smaller" class="size_btn"><img src="-.png" alt="+"></div>

	</div>

	</body>

</html>

JS代码：

$(document).ready(function(){

	/******** 先将图片居中并完全显示 ********/

	var proportion = 1;

	if($(window).width() / $('#back').width() < $(window).height() / $('#back').height())

		proportion = $(window).width()/$('#back').width();

	else

		proportion = $(window).height()/$('#back').height();

	var back_width = $('#back').width() * proportion;

	var back_height = $('#back').height() * proportion;

	var back_left = ($(window).width() - back_width)/2;

	var back_top = ($(window).height() - back_height)/2;

	$('#back').width(back_width);

	$('#back').height(back_height);

	$("#back").offset({left:back_left,top:back_top});

	//放大缩小操作时的尺寸变化

	var sizeX = back_width/10;

	var sizeY = back_height/10;

	//放大缩小操作时的位置变化

	var moveX = sizeX/2;

	var moveY = sizeY/2;

	//点击放大按钮

	$('#larger').click(function(){

		$('#back').height("+=" + sizeX);

		$('#back').width("+=" + sizeY);

		$("#back").offset(function(n,c){

			newPos = new Object();

			newPos.left = c.left-moveX;

			newPos.top = c.top-moveY;

			return newPos;

		});

	});

	//点击缩小按钮

	$('#smaller').click(function(){

		$('#back').height("-=" + sizeX);

		$('#back').width("-=" + sizeY);

		$("#back").offset(function(n,c){

			newPos = new Object();

			newPos.left = c.left + moveX;

			newPos.top = c.top + moveY;

			return newPos;

		});

	});

	//点击图片

	$('#back').click(function(event){

		var x=($(window).width()/2) - event.clientX + $("#back").offset().left;

		var y=($(window).height()/2) - event.clientY + $("#back").offset().top;

		$("#back").animate({left:x,top:y});

	});

});

css代码：

#back{

	left: 0px;

    top:  0px;

	position:absolute;

	z-index:-1;

}

.size_btn{

	position:absolute;

	height:30px;

	width:30px;

}

#larger{

}

#smaller{

	top:60px;

}

最终效果：

[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

点击放大按钮：

[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

点击图片的任意位置：

[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中

[jQuery]地图浏览：如何实现图片的放大缩小和点击之后的位置居中的更多相关文章

  1. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  2. Android 本地&sol;网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  3. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  4. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  5. Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  6. Java界面程序实现图片的放大缩小

    Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果 ...

  7. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  8. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  9. Android多点触控技术，实现对图片的放大缩小平移，惯性滑动等功能

    首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能.这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2 ...

随机推荐

  1. SQL&ast;Loader之CASE7

    CASE7 1. SQL脚本 case7包含两个SQL脚本,一个是删除脚本ulcase7e.sql,一个是创建脚本ulcase7s.sql [oracle@node3 ulcase]$ cat ulc ...

  2. uniqid函数产生唯一id，减少碰撞几率

    $uuid = str_replace(".","",uniqid(mt_rand(100000,999999),true)); //基于当前时间微妙数,与mt ...

  3. linux挂载远程samba目录

    yum install cifs-utils  #安装cifs协议包 #列出远程目录 smbclient -L 192.100.9.165 -Uadministrator vim /etc/fstab ...

  4. mac 下的 top 命令

    mac 下的 top 命令 文章目录 以前只是在 linux 机器上使用 top 命令.常用的快键键是: p 键 - 按 cpu 使用率排序 m 键 - 按内存使用量排序 这 2 个快捷键在 mac ...

  5. 【shell】条件判断式

    条件判断式的表示格式: 文件判断式: [root@andon ~]# [ -e /root/1 ] && echo yes || echo no #注意[]里面的空格,第一个命令为真打 ...

  6. xheditor上传图片的java实现

    最近一个项目中因为框架的原因,很多文本编辑器都不兼容,最后找到xheditor,这个富文本编辑器的确不错,功能基本都能满足,只是上传图片的java接口需要自己写,因此,测试了两种方法,最终成功.分享给 ...

  7. nginx 健康检查和负载均衡机制分析

    nginx 是优秀的反向代理服务器,这里主要讲它的健康检查和负载均衡机制,以及这种机制带来的问题.所谓健康检查,就是当后端出现问题(具体什么叫出现问题,依赖 于具体实现,各个实现定义不一样),不再往这 ...

  8. Python中进行Base64编码和解码

    Base64编码 广泛应用于MIME协议,作为电子邮件的传输编码,生成的编码可逆,后一两位可能有“=”,生成的编码都是ascii字符.优点:速度快,ascii字符,肉眼不可理解缺点:编码比较长,非常容 ...

  9. Android Training Note

    版本适配 Tip:为了能在几个Android版本中都能提供最好的特性和功能,你应该在你的app中使用Android Support Library,它能使你的app能在旧平台上使用最近的几个平台的AP ...

  10. linux下安装pycharm

    在 linux下打开浏览器,搜索pycharm,点击download. 下载好的文件的名称可能是 ‘pycharm-professional-2016.2.3.tar.gz’. 打开终端界面,输入命令 ...

相关文章