jquery实现多屏多图焦点图切换特效的方法

2019-11-20 12:33:33

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery消息提示框插件Tipso

下一篇：jquery实现鼠标拖拽滑动效果来选择数字的方法