jquery实现多屏多图焦点图切换特效的方法
本文实例讲述了jquery实现多屏多图焦点图切换特效的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>kinMaxShow技巧效果</title>
<linktype="text/css"href="_doc/base.css"rel="stylesheet"/>
<styletype="text/css">
body{margin:0;padding:50px000;}
#show{width:600px;margin:0auto;}
#kinMaxShow{width:600px;height:300px;
visibility:hidden;overflow:hidden;
}
#kinMaxShowp.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>
<scriptsrc="js/jquery-1.10.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.kinMaxShow-1.1.min.js"
type="text/javascript"></script>
<scripttype="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:"1pxsolid#999999",
color:"#CCCCCC",marginRight:'6px'
},
focus:{
background:"#CC0000",border:"1pxsolid#FF0000",
color:"#000000"
}
}
});
});
</script>
</head>
<body>
<divid="show">
<divid="kinMaxShow">
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/1.jpg"/></a>
<pclass="title">新闻111</p>
</div>
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/2.jpg"/></a>
<pclass="title">新闻222</p>
</div>
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/3.jpg"/></a>
<pclass="title">新闻333</p>
</div>
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/4.jpg"/></a>
<pclass="title">新闻444</p>
</div>
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/5.jpg"/></a>
<pclass="title">新闻555</p>
</div>
<div>
<ahref="#"target="_blank">
<imgsrc="images/demo_artifice_images/6.jpg"/></a>
<pclass="title">新闻666</p>
</div>
</div>
</div>
</body>
</html>
jquery.kinMaxShow-1.1.min.js点击此处本站下载。
希望本文所述对大家的jQuery程序设计有所帮助。