当前位置: 首页 > 编程笔记 >

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

蒙弘图
2023-03-14
本文向大家介绍jquery实现多屏多图焦点图切换特效的方法,包括了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery实现左右切换焦点图,包括了jQuery实现左右切换焦点图的使用技巧和注意事项,需要的朋友参考一下 演示图: 代码: 以上所述就是本文的全部内容了,希望大家能够喜欢。

  • 本文向大家介绍js实现非常简单的焦点图切换特效实例,包括了js实现非常简单的焦点图切换特效实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现非常简单的焦点图切换特效的方法。分享给大家供大家参考。具体分析如下: 这是一个非常非常简单的焦点图(更像滑动门),可供初学者借鉴参考 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍jQuery焦点图轮播效果实现方法,包括了jQuery焦点图轮播效果实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery焦点图轮播效果实现方法。分享给大家供大家参考,具体如下: 前面一篇《JS实现焦点图轮播效果的方法详解》详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧。 核心代码如下: 和js的区别:用.animate()方法

  • 本文向大家介绍Winform下实现图片切换特效的方法,包括了Winform下实现图片切换特效的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Winform下实现图片切换特效的方法,是应用程序开发中非常实用的一个功能。分享给大家供大家参考之用。具体方法如下: 本实例源自网络,功能较为齐全、丰富!主要功能代码如下: 另外还有一种调用API实现的特效: 希望本文所述实例对大家C#程序设计有

  • 本文向大家介绍JS实现图片高斯模糊切换效果的焦点图实例,包括了JS实现图片高斯模糊切换效果的焦点图实例的使用技巧和注意事项,需要的朋友参考一下 焦点图相信对大家来说都不陌生,本文给大家分享的是一种图片高斯模糊切换效果的焦点图,下面话不多说了,来看看实现的效果图和实例代码吧。 效果图 实例代码 更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》

  • 本文向大家介绍JS实现图片切换特效,包括了JS实现图片切换特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下 知识点: 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果: 点击上一张下一章切换图片 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐

  • 本文向大家介绍一款由jquery实现的整屏切换特效,包括了一款由jquery实现的整屏切换特效的使用技巧和注意事项,需要的朋友参考一下 今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏。当然,你也可以滚动鼠标来切换页面。效果非常好。我们看下效果吧 源码下载 html代码: css代码: js代码:

  • 本文向大家介绍JQuery实现简单的图片滑动切换特效,包括了JQuery实现简单的图片滑动切换特效的使用技巧和注意事项,需要的朋友参考一下 JQuery实现简单的图片滑动切换特效 jQuery图片从下往上滚动效果是一款jquery animate方法制作的图片从下往上滚动效果。 上演示图