php 热区,jquery如何使热区锚点随图片大小尺寸改变而变化
我们在图片上标识多个锚点热区,当用户使用不同分辨率的终端查看网页时,那么预期的锚点位置就会发生偏移,这就需要我们利用技术来适用各类屏幕尺寸。
我们利用jquery可以很好地实现热区锚点随图片尺寸大小缩放而适应位置变化。
在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现在很多网页对浏览器分辨率兼容性要求很高,多数都是用的百分比来定义图片的尺寸,希望图片能随着分辨率的不同,显示设备的不同,自适应的显示最佳效果,这种情况下如何定义图片热区的尺寸可以随着图片一起变化呢?
这是我今天遇到的问题,问了百度个把小时也没有找到答案,忽悠人的错误答案也不少。热区的范围和坐标主要是由area元素的coords属性来决定的,例如下面这行代码:
这是一个矩形热区的范围和坐标,你可以看到有四个数字,这四个数字代表的是什么意思呢,前两个数字是矩形热区左上角的点相对于图片总长宽的横坐标和纵坐标,后面两个数字是矩形热区右下角的点相对于图片总长宽的横坐标和纵坐标。网上有的说,如果图片是用百分比来定义的话,这四个数字也用百分比定义应该就可以吧,很遗憾不行,这地方貌似只能是纯整数的数值方能起效果,加个“%”符号都不起任何作用了。想不通百度贴吧里居然还有不少答案是说用百分比数值来定义。什么都问百度也不一定都是对的,如果这篇文章是被百度搜出来的,那你一定要耐心的看完。
我们如何定义个热区让它随图片的大小来自由缩放呢?不急,只要功夫深,铁杵磨成绣花针,方法总是有的,借助js可以重新定义coords的属性值,让其随着图片的大小来生成新的数值。怎么做?高手应该想到办法了,我这里就只介绍下jquery方法吧。假如我有一张id=pic的图片,宽度是1920,高度是1080,代码如下:
那么绘制一个矩形热区,是可以随着图片大小自由缩放的呢,代码参考下面:
var picw = $("#pic").width();
var pich = $("#pic").height();
var x1 = parseInt(picw*0.1820);
var y1 = parseInt(pich*0.2955);
var x2 = parseInt(picw*0.3280);
var y2 = parseInt(pich*0.5645);
$(".box").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"')
你一定很奇怪,上面这段代码各个数值都要乘以一个小数是怎么得出来,首先你还是要在原始大小的图片上绘制一个你所需要的矩形范围和坐标,例如下面这行代码:
然后用所得到的coords属性值对应的去除原始图片的长和宽就获得了当前图片热区范围和位置与原始图片的比例,然后每次都用js获取图片的宽和高来乘以这个比例值就总是可以得到热区相对于图片的真实大小和位置,不管图片怎么变化,热区也会随之改变。建议函数写在onResize的方法里,这样在浏览器人为缩放的时候,图片热区也会随图片变化自由变化。
声明:如需转载,请注明来源于www.webym.net并保留原文链接:http://www.webym.net/jiaocheng/1005.html
php 热区,jquery如何使热区锚点随图片大小尺寸改变而变化相关推荐
- html锚链接设为无效,使用jQuery使HTML锚链接(HyperLink)不可点击或禁用
本文将介绍如何使用jQuery使HTML锚链接(HyperLink)不可点击或禁用. 使HTML锚链接(HyperLink)不可点击或禁用 HTML禁用(disabled)属性不适用于HTML锚链接( ...
- 在jQuery Mobile中实现锚记跳转的方式
在jQuery Mobile中实现锚记跳转的方式:使用JavaScript脚本,模拟实现命名锚记的跳转,具体实现步骤如下:
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- html无法获取图片高宽,如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- 使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
- 定义视频尺寸html,使HTML5视频海报与视频本身尺寸相同
有谁知道如何调整HTML5视频海报的大小,使其适合视频本身的确切尺寸?使HTML5视频海报与视频本身尺寸相同 这里是代码: HTML: CSS: video{ border:1px solid r ...
- 如何使QGraphicsItem不随QGraphicsView放大缩小而改变大小
一.简述 在使用QGraphicsView过程中,有时候我们需要对view进行缩放,但是对于一般正常的加入view中的item都会随着view的大小变化而变化,但是如果我们想让某些item不随view ...
- 轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 #img img{width:100%;height:100%; ...
最新文章
- ctypes python3_聊聊Python ctypes 模块
- ubantu mysql允许外部链接_ubuntu 下mysql 设置允许远程连接
- 问题 1436: 地宫取宝 (dp)
- Hibernate HQL基础 投影查询
- php手机接口购物车怎么实现,php购物车的实现原理
- 一个复杂系统的拆分改造实践
- jquery --- 事件处理函数的event对象的几个属性(方法)说明
- Vue之$nextTick属性
- java内存分配模型优点_高并发实战(二)-并发基础 缓存 MESI 内存模型
- linux I/O-记录锁(record lock)
- php按条件修改xml,php 修改、增加xml结点属性的实现代码
- Python Parse JSON –转储,加载
- 基于SSM的宠物领养网站
- 实现elementUI多语言切换
- http请求 405错误
- 去除字符串中所包含的空格(包括:空格(全角,半角)、制表符、换页符等)
- 赤喀高铁正式通车,日立电梯助力赤峰西站开通运营
- BS EN 438-6装饰用板材外部用压实层压板材的分类和规范
- 香水白皮书指出,中国香水消费客单价远超美欧市场
- java zgc_现在该关注ZGC和昏暗的Nashorn的明星了:Java影响者参与其中