kaedah jquery untuk melaksanakan penukaran imej berbilang skrin dan berbilang imej fokus kesan khas

kaedah jquery untuk melaksanakan penukaran imej berbilang skrin dan berbilang imej fokus kesan khas_jquery

WBOY

Lepaskan： 2016-05-16 16:01:00

asal

1106 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan khas penukaran imej berbilang skrin dan fokus imej berbilang. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

jquery.kinMaxShow-1.1.min.js klik di sinimuat turun dari tapak ini.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.