kinMaxShow 技巧效果_H5之家 - 中国HTML5教程资源分享第一站

kinMaxShow 技巧效果演示

kinMaxShow 说是全屏焦点图插件(满屏自适应)，但是通过一定技巧设置就可以变成一个可控制的焦点图。kinMaxShow宽度默认是自适应100%比例。这时只要给他加个父级并且控制了父级的宽度这样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({ //设置焦点图高度(单位:像素) 必须设置否则使用默认值 500 height:300, //设置焦点图按钮效果 button:{ //设置焦点图切换方式为mouseover 鼠标经过按钮切换图片, 默认为 click，可选 click[鼠标点击切换]或mouseover[鼠标滑过切换] switchEvent:'mouseover', //设置显示索引数字 true 显示，默认为 false 不显示 showIndex:true, //按钮常规下样式设置，css写法，类似jQuery的 $('xxx').css({key:value,……})中css写法。 //【友情提示：可以设置透明度哦不用区分浏览器统一为 opacity，CSS3属性也支持哦如：设置按钮圆角、投影等，只不过IE8及以下不支持】 normal:{width:'18px',height:'18px',lineHeight:'18px',left:'16px',bottom:'16px',fontSize:'12px',opacity:0.8,background:"#666666",border:"1px solid #999999",color:"#CCCCCC",marginRight:'6px'}, //当前焦点图按钮样式设置，写法同上 focus:{background:"#CC0000",border:"1px solid #FF0000",color:"#000000"} } }); }); </script>

HTML 代码 <div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/1.jpg" /></a> <p>>美国称将绕过联合国安理会自行惩罚叙利亚</p> </div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/2.jpg" /></a> <p>>西安军工企业夫妻藏匿国家机密资料被判刑</p> </div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/3.jpg" /></a> <p>>首都机场爆炸案嫌犯冀中星涉爆炸罪被公诉</p> </div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/4.jpg" /></a> <p>>美国摄影师离火山口仅1米处拍最完美喷发照</p> </div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/5.jpg" /></a> <p>>地方官员为跑批文驻北京在部委端茶扫地打开水</p> </div> <div> <a href="http://www.lanrentuku.com" target="_blank"><img src="images/demo_artifice_images/6.jpg" /></a> <p>>经济年度人物评选启动主题转型升级智慧与行动</p> </div> </div> </div>

CSS样式 <style type="text/css"> /* 设置焦点图父级宽度 */ #show{width:600px; margin:0 auto;} #kinMaxShow{display:none;} /* 设置焦点图标题位置、样式等。标题位置、样式完全可以自定义哦 */ #kinMaxShow p.title{ position:absolute; left:0; bottom:0; text-indent:10px; line-height:30px;font-family:Verdana; color:#FFF; display:block;width:100%; height:30px; font-family:14px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#aa000000,endcolorstr=#aa000000);background:rgba(0,0,0,0.5);} </style>