jQuery技术

kinMaxShow 技巧效果

字号+ 作者:H5之家 来源:H5之家 2017-05-01 13:01 我要评论( )

kinMaxShow 技巧效果演示 kinMaxShow 说是全屏焦点图插件(满屏自适应),但是通过一定技巧设置就可以变成一个可控制的焦点图。kinMaxShow宽度默认是自适应100%比例。这时只要给他加个父级 并且控制了父级的宽度 这样kinMaxShow就会变成一个普通定宽的焦点图了

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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 50个jQuery学习必备小技巧(下)

    50个jQuery学习必备小技巧(下)

    2017-04-29 17:05

  • 转载 jQuery技巧

    转载 jQuery技巧

    2017-04-26 13:07

  • 学习web前端必备的jQuery11个技巧.doc

    学习web前端必备的jQuery11个技巧.doc

    2017-04-26 13:01

  • jquery用正则获取字符串的最后一位字符的方法和实例

    jquery用正则获取字符串的最后一位字符的方法和实例

    2017-04-25 18:04

网友点评