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


Posted in Javascript onMay 04, 2015

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

Javascript 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
javascript白色简洁计算器
May 04 #Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
Joomla开启SEF的方法
2016/05/04 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
对Python中的@classmethod用法详解
2018/04/21 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python基于property()函数定义属性
2020/01/22 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
老师给学生的表扬信
2014/01/17 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
个人求职意向书
2015/05/11 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android