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://nowjava.com" target="_blank"><img src="images/demo_default_images/1.jpg" /></a> </div> <div> <a href="https://nowjava.com" target="_blank"><img src="images/demo_default_images/2.jpg" /></a> </div> <div> <a href="https://nowjava.com" target="_blank"><img src="images/demo_default_images/3.jpg" /></a> </div> <div> <a href="https://nowjava.com" target="_blank"><img src="images/demo_default_images/4.jpg" /></a> </div> <div> <a href="https://nowjava.com" target="_blank"><img src="images/demo_default_images/5.jpg" /></a> </div> <div> <a href="https://nowjava.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 代码整理:时代Java - NowJava.com

注:此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

kinMaxShow焦点图代码(jQuery)

kinMaxShow 1.1焦点图代码,兼容主流浏览器,推荐下载!kinMaxShow说是全屏焦点图插件(满屏自适应),但是通过一定技巧设置就可以变成一个可控制的焦点图。kinMaxShow宽度默认是自适应100%比例。这时只要给他加个父级 并且控制了父级的宽度 这样kinMaxShow就会变成一个普通定宽的焦点图了。 使用方法:引入jQuery文件和jQuery.kinMaxShow 文