这篇文章主要介绍了jquery实现多屏多图焦点图切换特效的方法,涉及jQuery插件jquery.kinMaxShow实现焦点图的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jquery实现多屏多图焦点图切换特效的方法。分享给大家供大家参考。具体实现方法如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>kinMaxShow 技巧效果</title>
- <link type="text/css" href="_doc/base.css" rel="stylesheet"/>
- <style type="text/css">
- body{ margin:0; padding:50px 0 0 0;}
- #show{width:600px; margin:0 auto;}
- #kinMaxShow{width:600px; height:300px;
- visibility:hidden; overflow:hidden;
- }
- #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>
- <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
- <script src="js/jquery.kinMaxShow-1.1.min.js"
- type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $("#kinMaxShow").kinMaxShow({
- height:300,
- button:{
- showIndex:true,
- normal:{width:'18px',height:'18px',lineHeight:'18px',
- right:'16px',bottom:'6px',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>
- </head>
- <body>
- <div id="show">
- <div id="kinMaxShow">
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/1.jpg" /></a>
- <p class="title">新闻111</p>
- </div>
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/2.jpg" /></a>
- <p class="title">新闻222</p>
- </div>
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/3.jpg" /></a>
- <p class="title">新闻333</p>
- </div>
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/4.jpg" /></a>
- <p class="title">新闻444</p>
- </div>
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/5.jpg" /></a>
- <p class="title">新闻555</p>
- </div>
- <div>
- <a href="#" target="_blank">
- <img src="images/demo_artifice_images/6.jpg" /></a>
- <p class="title">新闻666</p>
- </div>
- </div>
- </div>
- </body>
- </html>
jquery.kinMaxShow-1.1.min.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。
新闻热点
疑难解答
图片精选
