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 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js密码强度实时检测代码
Mar 02 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
react redux入门示例
Apr 19 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
vue+axios实现post文件下载
Sep 25 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
德劲1103的维修打理经验
2021/03/02 无线电
学习php笔记 字符串处理
2010/10/19 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
PHP文件操作方法汇总
2015/07/01 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
javascript生成大小写字母
2015/07/03 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python 杀死自身进程的实现方法
2019/07/01 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
个人授权委托书样本
2014/09/13 职场文书
三八妇女节寄语
2015/02/27 职场文书