net-jquery 图片标注之后,移动缩放时,标注跟着移动

问题描述

jquery 图片标注之后,移动缩放时,标注跟着移动

各位哥们,
小弟我有一个问题实在解决不了,希望各位帮帮忙!

使用jquery对一张图片进行标注,
这张图片可以移动缩放,
在图片变化过程中,
标注相对页面不是静止的,是要跟着图片移动的,其在图片的坐标不会发生变化。
图片的缩放可以做出来,
静态图片或百度图片的标注也可以做出来,
但是,
当这个图片可以缩放的时候,怎么保证标注始终固定在图片上的某一个点,
就是如何建立图片的坐标,并获取和设置这个坐标,或者有没有什么第三方引擎。

解决方案

那就在图片和标注的父级加一个div呗嘛,移动这个div相当于。

解决方案二:

依据图片缩放比率重新计算你标准的left/top值,重设标准left/top进行定位

时间: 2024-12-19 19:40:04

net-jquery 图片标注之后,移动缩放时,标注跟着移动的相关文章

jquery 图片预加载 自动等比例缩放插件_jquery

复制代码 代码如下: /* **************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 此插件使用时可让页面先加载,而图片后加载的方式, 解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题 ///参数设置: scaling 是否等比例自动缩放 width 图片最大

jquery 图片缩放拖动的简单实例

 本篇文章只要是对jquery 图片缩放拖动的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.不使用jquery,简单的缩放:   代码如下: <HTML>  <HEAD>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <TITLE>onMouseWheel</TITLE>  <SCR

Jquery图片缩放效果代码

<!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-

为什么这段jquery图片放大代码放在php中就不会出现放大的图片效果了

问题描述 为什么这段jquery图片放大代码放在php中就不会出现放大的图片效果了 #ShowPictureBox { width:300px; height:300px;overflow:hidden; }$(document).ready(function(){ $("#ShowPictureBox").JNMagnifier({ renderTo:"#ShowBigPictureBox" });}); <!--这里显示放大效果--> 解决方案 jq

jQuery图片裁剪插件CropZoom使用方法与bug修复

非常不错的jQuery图片裁剪插件CropZoom,功能非常强大,可以旋转图片,改变图片显示比例, 拖拽到指定区域进行裁剪,裁剪及时显示裁剪图片效果,绝对能满足你的需求,很适合头像图片 裁剪方面的应用. jQuery图片裁剪插件CropZoom 兼容性: 兼容IE6+,fireFox2+,Opera,Safria,Chrome 使用方法: 1.加载JS,CSS文件 <link href="css/jquery-ui-1.7.2.custom.css" rel="Styl

jquery图片不完全按比例自动缩小的简单代码

开发前期用自动生产 固定大小的图片 进行 显示,发现不能满足,在前期的时候把保存了原图,现在只能显示原图,原图由于上传时候没有做任何限制所有要使用 图片不完全按比例缩小,下面是代码   复制代码 代码如下: jQuery(document).ready(function() {  /* 图片不完全按比例自动缩小*/  $(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200;  /

jQuery图片特效插件Revealing实现拉伸放大

  本文给大家分享的是jQuery图片展示效果,使用的是jQuery Revealing插件,不点击的情况下,图片整齐排列成一行,当任意一个图片缩略图被点击的时候,该图片就放大显示,当点击关闭按钮时图片又重新还原了缩略图模式. 点击图片,图片拉伸放大显示,效果非常棒! 使用方法: 1.head区域引用文件 jquery.js,photorevealer.js,datouwang.css 2.在文件中加入区域代码 3.图片个数可以自由增减,增加或者删除即可 4.如果图片信息更多,需要更大的空间,可

jquery实现鼠标滑过小图时显示大图的方法

 这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <

图片旋转,鼠标滚轮缩放,镜像,切换图片js代码

demo下载地 址:http://download.csdn.net/detail/cometwo/9404811 感谢博客:http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>图片旋转,鼠标滚轮缩放,镜像,切换图片</title> <m