手机移动端活动页面如何做热点且自适应啊?

有一个活动页面有10张图拼成的一张大图。。

原图宽是640和加起来一共的高是3661

我在原有的图上做热点区域.

然后如何放到不同分辨率下的屏幕点击区域还是一样的呢?

是图片不是背景图. 图片是max-width:100%;height:auto;

阅读 5.1k
2 个回答

实现这样的功能真是够蛋疼的。在移动端来说,使用svg是更好的选择,它天生支持缩放,也可以在对象上绑定事件,不用考虑上面的问题的。
但如果真要做这样功能也是可行的。可以保存原始图片尺寸,再获得当前图片尺寸,再对热区域进行比例缩放就可以了。图片的热点一般都用的<map></map>,取出里面的<area/>,再使用jquery操作一下DOM应该可以的啊。

结果不搞热点了 . 还要每个去计算比例..
a标签定位了宽百分比.
高的话按position:absolute;top:0;bottom:0; 撑起来的.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题