jquery实现多屏多图焦点图切换特效的方法
更新时间：2015年05月04日 16:30:28 投稿：shichen2014
这篇文章主要介绍了jquery实现多屏多图焦点图切换特效的方法,涉及jQuery插件jquery.kinMaxShow实现焦点图的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
input输入框在获得或失去焦点时隐藏或显示文字，这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧，本文使用jquery实现以下，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要为大家详细介绍了jQuery表单验证之密码确认的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了如何利用JQuery写一个简单的异步分页插件，感兴趣的小伙伴们可以参考一下2016-03-03
有时候需要合并表格中相同文本的相邻单元格，需要的朋友可以参考下。2011-04-04
BootStrap中jQuery插件Carousel实现轮播广告效果
轮播广告在网站中的应用实在是太常见了，下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,感兴趣的朋友一起看看吧2017-03-03
这篇文章主要介绍了基于jQuery使用Ajax动态执行模糊查询功能,通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jquery实现向下滑出的二级导航下滑菜单效果,涉及jquery实现页面结点样式动态变换效果的实现技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
jquery dialog open后,服务器端控件失效的快速解决方法
本篇文章是对jquery dialog open后,服务器端控件失效的快速解决方法。进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文主要是介绍了jQuery中on方法及trigger方法，以及围绕这个方法来体验的观察者模式，是篇非常不错的文章，对我们理解观察者模式很有帮助。2014-12-12
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制的基本折线图效果,结合实例形式分析了jQuery基于HighCharts插件绘制图形的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论