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,是一款免费开源的相册产品 ...
随机推荐
- vs2012出现无法启动iis express web 服务器的错误
一直用的好好的,今天调试时却总报上面的错误.“文件查看器”->"windows 日志"->"系统"里发现有几条“HttpEvent”错误, 具体信息 ...
- 深入Java集合学习系列:HashMap的实现原理
1. HashMap概述: HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变 ...
- JAVA用户数据输入
数据输入 首先需要导入扫描仪 然后声明扫描仪 输出输入提示 接收用户数据的数据 输出用户数据的数据 实例: import java.util.Scanner; //导入扫描仪 public class ...
- ubuntu更换源后报错:W: GPG error: (转载)
From:http://www.njava.com/njava-626.html 更换163源后,更新源时出现错误. # apt-get update W: GPG error: http://ext ...
- 移动应用(手机应用)开发IM聊天程序解决方案
这个解决方法已经定制下来很久了,上一段时间比较忙,没有时间整这些东西.最近稍微好些,不怎么加班.所以抽空总结下,同时也分享给大家,也算是给大家一个借鉴吧!或许这并不是最好的解决方案,但只要能满足当前需 ...
- DBCP数据库连接池
在用JDBC连接数据库的时候,需要创建对数据库的连接,这样才能执行后续的操作.然而,这样做有两个问题: 数据库允许的连接个数有限 创建连接的过程需要消耗内存和时间 所以,JDBC引入了连接池的概念.也 ...
- flexbox弹性盒模型
div { display:flex; } div a{ }
- gomobile 真机 log 打出的日志跟踪
go mobile 开发的应用,真机调试时,我们期望看到log包打出的日志, 这时候就需要借用 Android Device Monitor 了. 我们的 go 代码中用最简单的 log.Printl ...
- 倍增法lca
][N],siz[N];//rt数组需要在dfs之前置-1. void dfs(int pos,int deep){ dep[pos]=deep; siz[pos]=; for(edge *it=ad ...
- 【转】Bash脚本实现批量作业并行化
首先附上自己常用的代码 ---------------------------------------------------------------------------------------- ...