上面为 kinMaxShow 默认效果 代码如下:
javascript 代码
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/jquery.kinMaxShow-1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#kinMaxShow").kinMaxShow(); }); </script>
HTML 代码
<div id="kinMaxShow"> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/1.jpg" /></a> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/2.jpg" /></a> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/3.jpg" /></a> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/4.jpg" /></a> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/5.jpg" /></a> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="images/demo_default_images/6.jpg" /></a> </div> </div>
IE浏览器下 在页面刚加载, js代码还未执行时候会出现一瞬间“常见”的“闪动”,为kinMaxShow 容器添加一句CSS display:none 即可解决,而且最好放在页面头部或是头部CSS文件中。(此方式不保留占位)
CSS样式
<style type="text/css"> #kinMaxShow{display:none;} </style>
也可以这样设置 kinMaxShow容器的CSS样式 (此方式保留占位)
CSS样式
<style type="text/css"> /* 高度为焦点图高度 */ #kinMaxShow{visibility:hidden;width:100%; height:500px;overflow:hidden;} </style>