kinMaxShow 默认效果演示

上面为 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="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_default_images/1.jpg" /></a> </div> <div> <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_default_images/2.jpg" /></a> </div> <div> <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_default_images/3.jpg" /></a> </div> <div> <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_default_images/4.jpg" /></a> </div> <div> <a href="https://www.lanrentuku.com/" target="_blank"><img src="images/demo_default_images/5.jpg" /></a> </div> <div> <a href="https://www.lanrentuku.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>

感谢:网友Kin 代码整理:懒人图库

*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。