昨天下午完成了一个公司网站专题,为了实现全屏滑动,采用了jQuery的scrollify插件,效果很炫。但是对于其中的图片,由于每次滚动强制一屏,所以每一屏的图片必须要适应屏幕的高度而调整宽和高,同时在图片中设置的热点(map)坐标也需要根据调整的宽和高比例进行重新设置,因此写了这样的js代码,很简陋:
1 |
|
其中用到了关于jQuery选择器的用法。说下思路:
- 首先获取屏幕的高度,然后根据高度设置每一屏大图的高度。然后计算图片调整后高度与原始高度的比例,用宽度乘以这个比例值,就可以得出图片需要调整的宽度。
- 接着用jQuery的each方法对每个热点(map)属性执行调整自定义调整函数recoords,参数分别为coords坐标值(字符串型)和调整比例。
- recoords函数使用js的split方法切割,将每个坐标值进行计算,之后在用join方法进行合并,返回结果
- 将返回值赋予每个热点(map)的coords,完成热点调整。
剩余部分就是scrollify插件的HTML部分,直接用js代码中申明的section
标签分隔每一屏的代码即可:
1 |
|
最终实现的效果见这里