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,是一款免费开源的相册产品 ...
随机推荐
- 利用Mathematica计算伴随矩阵
AdjointMatrix[M_] := Module[{Ma, B, n, i, j}, Ma = Minors[M]; B = Ma; n = Dimensions[M][[1]]; ...
- js方法收藏
1.验证非负数字 //onfocusout="checkQty(this);" function checkQty(obj) { //排除0开头的非法输入 if (obj.valu ...
- Centos 7 修改SSH端口号
注意!这里的Centos版本是7 step1 修改/etc/ssh/sshd_config vi /etc/ssh/sshd_config #Port 22 //这行去掉#号 Po ...
- python argparse模块解析命令行选项简单使用
argparse模块的解析命令行选项简单使用 util.py #!/usr/bin/env python # coding=utf-8 import argparse parser = argpars ...
- [ActionScript 3.0] Away3D 非skybox的全景例子
package { import away3d.containers.View3D; import away3d.controllers.HoverController; import away3d. ...
- eclipse对项目整理分类
1.Eclipse提供了工作集(Working Set)的功能,它可以用来划分这些项目. 在Package Explorer视图的下拉菜单里选择Show->Working Sets,然后还是在它 ...
- LK光流算法:提高计算精度和增加搜索范围
LK光流算法:提高计算精度和增加搜索范围 关于LK算法的基本理论,见:http://www.cnblogs.com/dzyBK/p/4960630.html 这里主要阐述如何提高LK算法的计算精度和在 ...
- SQLSERVER:计算数据库中各个表的数据量和每行记录所占用空间
转:http://www.cnblogs.com/lyhabc/p/3828496.html CREATE TABLE #tablespaceinfo ( nameinfo ) , rowsinfo ...
- 如何实现Oracle修改用户权限 .
这里将介绍Oracle修改用户权限的实现过程,包括一些权限管理方面的东西.希望通过本文能对大家了解Oracle修改用户权限有所帮助. ORACLE数据库用户与权限管理 ORACLE是多用户系统,它允许 ...
- Temporary Segments: What Happens When a Sort Occurs (文档 ID 102339.1)
APPLIES TO: Oracle Database - Enterprise Edition - Version 8.1.7.4 to 11.2.0.1 [Release 8.1.7 to 11. ...