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,是一款免费开源的相册产品 ...
随机推荐
- Eclipse下快速打开本地文件插件EasyExplorer(转)
EasyExplorer 是一个类似于 Windows Explorer的Eclipse插件,它可以帮助你在不退出Eclipse的环境下浏览本地文件系统,类似的插件也有很多,但是本人喜欢使用这个版本 ...
- Java多线程之捕获异常
1.主线程不能捕获到子线程的异常 package Thread.Exection; import java.util.concurrent.ExecutorService; import java.u ...
- 更换ubuntu apt-get 源
为了优化ubuntu软件安装/更新速度,我测试了国内几家apt源的速度,发现北京交大的apt源速度相对最快,然后可以通过以下步骤更新ubuntu源 1) 备份默认的apt源 $ cd /etc/apt ...
- spring错误<context:property-placeholder>:Could not resolve placeholder XXX in string value XXX
spring同时集成redis和mongodb时遇到多个资源文件加载的问题 这两天平台中集成redis和mongodb遇到一个问题 单独集成redis和单独集成mongodb时都可以正常启动程序,但是 ...
- Codeforces 626E Simple Skewness 「数学」「二分」
题意: 给你一堆无序数,寻找它的一个子堆,使得子堆的平均数减中位数最大. 数字的个数n<=2e5 0<=xi<=1e6. 思路: 首先可以证明这堆数一定是奇数个,证明方法是尝试在奇数 ...
- java模拟用户登录(排除没有验证码情况下,抓取网页信息)
import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOException;import j ...
- Oracle 删除数据后释放数据文件所占磁盘空间
测试的时候向数据库中插入了大量的数据,测试完成后删除了测试用户以及其全部数据,但是数据文件却没有缩小.经查阅资料之后发现这是 Oracle “高水位”所致,那么怎么把这些数据文件的大小降下来呢?解决办 ...
- Hibernate高级查询QBC条件设置——Restrictions用法 引自:http://www.cnblogs.com/evon168/archive/2010/10/29/1863059.html
方法说明 方法 说明 Restrictions.eq = Restrictions.allEq 利用Map来进行多个等于的限制 Restrictions.gt > Restrictions.ge ...
- [原创]大连sap vt 实习生面试经历
从决定参加这次面试开始,求职生涯就算是开始了,虽然失败了,但也是亲身体会到了面试的感觉,这次经历也作为第一篇博客. 大连sap的职能是sap的全球技术支持中心和解决方案提供中心.VT项目提供的岗位是技 ...
- eclipse 拨打电话、拨号,发短信
1.拨打电话,拨号 //拨打电话Intent intent = new Intent(); intent.setAction(Intent.ACTION_CALL); intent.setData(U ...