js动态改变图片热区坐标,手机端图片热区自适应
<img id='banner1' src="data:images/banner.jpg" usemap="#banner" border="0"/>
<map name="banner" >
<area id='111' shape="rect" coords="x1,y1,x2,y2" href="/swt/">
</map>
<script>
var picw = $("#banner1").width(); /获取图片宽度
var pich = $("#banner1").height();
var x1 = parseInt(picw*0.6421); /计算出坐标与总长度的商,当做参数
var y1 = parseInt(pich*0.3907);
var x2 = parseInt(picw*0.9343);
var y2 = parseInt(pich*0.5189);
$("#111").attr("coords",'"'+x1+','+y1+','+x2+','+y2+'"'); /设置area的坐标
</script>
这样图片就能实现自适应了
js动态改变图片热区坐标,手机端图片热区自适应的更多相关文章
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- js动态改变iframe的高度
js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%" height="200" ...
- 手机端图片预览和缩放js
转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" ...
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- js动态改变img元素src在IE无效的问题
做了个验证码功能,需要做个点击改变验证码图片的功能,使用js改变img的src,代码如下 $("#cerificationCodeImg").attr("src" ...
- js动态改变setInterval的时间
<!DOCTYPE html> <html> <head> <!--meta name="viewport" content=" ...
- 手机端图片插件可缩放 旋转 全屏查看photoswipe
官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...
随机推荐
- C语言中,数组名作为参数传递给函数时,退化为指针
C语言中,数组名作为参数传递给函数时,退化为指针 C语言中,数组名作为参数传递给函数时,退化为指针:需要数组大小时, 需要一个参数传数组名,另一个传数组大小. 数组名做函数参数时,就相当于指针了. ...
- JS 中的 Window 对象
窗口对象的属性和方法: 在js最外层写的function可以还可以理解为window对象的一个方法.定义的变量也可以称之为window对象的一个属性.例如:window.alert("--- ...
- C#多字符分割
string demo = "0 1 2 3";string[] result = demo.Split(" ,,".ToCharArray());试试,中间的 ...
- C语言 段位
C语言允许在一个结构体中以位为单位来指定其成员所占内存长度,这种以位为单位的成员称为"位段"或"位域" 在结构体中位段的定义格式为: unsignede < ...
- ajax 如何实现页面跳转
老师,您好.jquery的ajax如何实现页面跳转?例如:登陆页面属于用户名和密码后,点击登陆,验证用户名和密码,正确后,跳转到其他页面.能否给个例子. 下面列了五个例子来详细说明,这几个例子的主要功 ...
- Bootstrap配套的js框架
求几个搭配bootstrap的js框架.实现如表单验证,文件多传下载等等 Bootstrap File Input文件选择控件: PNotify通知插件: ClockPicker时间拾取器: Boot ...
- java学习_文件工具类
工具类里面的方法全部都是静态的,调用的时候不需要实例化
- C++ primer 练习9.49
如果一个字母延伸到中线之上,如d或f,则称其有上出头部分.如果一个字母延伸到中线之下,如p或g, 则称其有下出头部分.编写程序,读入一个单词,输出最长的即不包含上出头部分,也不包含下出头部分单 词. ...
- ubuntu14安装ambari2.2
https://cwiki.apache.org/confluence/display/AMBARI/Install+Ambari+2.2.0+from+Public+Repositories 查看是 ...
- spring Integration服务总线
最新项目中使用数据交换平台,主要通过交换平台抓取HIS数据库医生医嘱检查检验等数据以及FTP上的txt文件,html等病程文件,生成XML文件,之后通过业务系统按业务规则对数据进行处理,再将其存入数据 ...