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,是一款免费开源的相册产品 ...
随机推荐
- filter的执行顺序
一直没有仔细去研究下filter ,最近系统的测试了下: 先看代码吧 FirstFilter.java ================== package com.test.filter; impo ...
- JS闭包研究、自造困扰与解答
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- SqlServer中的更新锁(UPDLOCK)
UPDLOCK.UPDLOCK 的优点是允许您读取数据(不阻塞其它事务)并在以后更新数据,同时确保自从上次读取数据后数据没有被更改.当我们用UPDLOCK来读取记录时可以对取到的记录加上更新锁,从而加 ...
- esriSRProjCS3Type Constants
ArcGIS Developer Help (Geometry) esriSRProjCS3Type Constants See Also esriSRProjCSType Constants ...
- C# Winform常见的Editor
常见Editor: 1)ArrayEditor,继承自CollectionEditor 2)BinaryEditor 3)CollectionEditor 4)DateTimeEditor 5)Mul ...
- Mingyang.net:为什么不将Bean定义在Action参数中?
Spring MVC提供了一种方便的Bean填充方式: @Controller public class CmsChannelController extends AbstractController ...
- PL/SQL Developer使用技巧、快捷键
1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动大写:Tools-& ...
- 蓝桥杯---数独(模拟 || dfs)
[编程题](满分33分) "数独"是当下炙手可热的智力游戏.一般认为它的起源是"拉丁方块",是大数 学家欧拉于1783年发明的. 如图[1.jpg]所示:6x6 ...
- HashCode equals
HashCode: hashcode就是一个签名.当两个对象的hashcode一样时,两个对象就有可能一样.如果不一样的话两个对象就肯定不一样.一般用hashcode来进行比较两个东西是不是一样的,可 ...
- AdapterView的相关知识。
AdapterView集成自ViewGroup,他的主要子类有AbsListView(Listview,GridView),AbsSpinner(Spinner,Gallery). AdapterVi ...