ホームページ > 記事 > ウェブフロントエンド > マルチスクリーンおよびマルチイメージフォーカス画像切り替え特殊効果を実装する jquery メソッド_jquery
この記事の例では、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 プログラミングに役立つことを願っています。