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程序设计有所帮助。
相关推荐
-
纯JS焦点图特效实例(可一个页面多用)
实例如下: <!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="Co
-
JS焦点图,JS 多个页面放多个焦点图的实例
如下所示: <!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> <title>js同一页面可多次调用的图片幻
-
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"&
-
jquery带下拉菜单和焦点图代码分享
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"
-
jQuery实现带水平滑杆的焦点图动画插件
这是一款很实用的jQuery焦点图动画插件,跟其他jQuery焦点图插件不同的是,它带有一个水平的滑杆,你可以通过滑动滑杆实现图片的切换,也可以通过点击图片来切换.这款焦点图是纯jQuery实现的,兼容性和实用性都还可以,而且也比较简单,很容易集成到需要的项目中去. 效果展示如下所示: HTML代码 <div id="wrapper"> <ul id="flip"> <li title="The first image&q
-
jquery带有索引按钮且自动轮播切换特效代码分享
本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr
-
js仿土豆网带缩略图的焦点图片切换效果实现方法
本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/
-
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide,非常漂亮的图片轮播特效插件,支持左右轮播图片.上下轮播图片.自适应移动端显示,支持众多的参数配置:orientation :'horizontal'(水平切换),speed : 500(切换速度,单位毫秒),easing : 'ease-in-out'(动画效果), minItems : 3(默认展示的数量)等,浏览器兼容方面:IE8+.以及较现代浏览器,不介意低版本浏览器的可以使用,当然也可以使用到移动端触屏. 支持响
-
jquery实现炫酷的叠加层自动切换特效
下面是HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jquery叠加页片自动切换特效 - 柯乐义</title><base target="_blank" /> <lin
-
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
demo04.html 复制代码 代码如下: <!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 ht
-
jQuery实现页面内锚点平滑跳转特效的方法总结
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实
-
jQuery横向擦除焦点图特效代码分享
本文实例讲述了jQuery横向擦除焦点图特效.分享给大家供大家参考.具体如下: 迅雷jQuery横向擦除焦点图是一款基于jQuery实现的7屏横向擦除焦点图代码,有缩略图和标题,可以自定义标题. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc