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

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/6473

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案