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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP array 的加法操作代码
2010/07/24 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
js获取页面description的方法
2015/05/21 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python对XML文件的操作实现代码
2020/03/27 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
研究生考核个人自我鉴定
2014/03/27 职场文书
《打电话》教学反思
2016/02/22 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers