美国称将绕过联合国安理会自行惩罚叙利亚

西安军工企业夫妻藏匿国家机密资料被判刑

首都机场爆炸案嫌犯冀中星涉爆炸罪被公诉

美国摄影师离火山口仅1米处拍最完美喷发照

地方官员为跑批文驻北京 在部委端茶扫地打开水

经济年度人物评选启动 主题转型升级智慧与行动

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