基于jQuery的自适应图片左右切换

效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm基于jQuery编写的横向自适应幻灯片切换特效全屏自适应jquery焦点图切换特效,在IE6这个

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

基于jQuery的自适应图片左右切换此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm

基于jQuery编写的横向自适应幻灯片切换特效

全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6。

适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

hoverslide

代码如下:

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>jQuery自适应满屏图片轮播切换 - 何问起</title>
  6 <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>
  7 <script type="text/javascript" src="http://hovertree.com/texiao/jquery/30/js/hoverslide.js"></script>
  8 </head>
  9 <body>
 10 <style type="text/css">        
 11 * {
 12     margin:0;
 13     padding:0;
 14     list-style:none;
 15 }
 16 body {
 17     background:#fff;
 18     font:normal 12px/22px 宋体;
 19     width:100%;
 20 }
 21 img {
 22     border:0;
 23 }
 24 a {
 25     text-decoration:none;
 26     color:#333;
 27 }
 28 a:hover {
 29     color:#1974A1;
 30 }
 31 #footer {
 32     text-align:center;
 33 }
 34 .fullSlide {
 35     width:100%;
 36     position:relative;
 37     height:410px;
 38     background:#000;
 39 }
 40 .fullSlide .bd {
 41     margin:0 auto;
 42     position:relative;
 43     z-index:0;
 44     overflow:hidden;
 45 }
 46 .fullSlide .bd ul {
 47     width:100% !important;
 48 }
 49 .fullSlide .bd li {
 50     width:100% !important;
 51     height:410px;
 52     overflow:hidden;
 53     text-align:center;
 54 }
 55 .fullSlide .bd li a {
 56     display:block;
 57     height:410px;
 58 }
 59 .fullSlide .hd {
 60     width:100%;
 61     position:absolute;
 62     z-index:1;
 63     bottom:0;
 64     left:0;
 65     height:30px;
 66     line-height:30px;
 67 }
 68 .fullSlide .hd ul {
 69     text-align:center;
 70 }
 71 .fullSlide .hd ul li {
 72     cursor:pointer;
 73     display:inline-block;
 74     *display:inline;
 75     zoom:1;
 76     width:42px;
 77     height:11px;
 78     margin:1px;
 79     overflow:hidden;
 80     background:#000;
 81     filter:alpha(opacity=50);
 82     opacity:0.5;
 83     line-height:999px;
 84 }
 85 .fullSlide .hd ul .on {
 86     background:#f00;
 87 }
 88 .fullSlide .prev,.fullSlide .next {
 89     display:block;
 90     position:absolute;
 91     z-index:1;
 92     top:50%;
 93     margin-top:-30px;
 94     left:15%;
 95     z-index:1;
 96     width:40px;
 97     height:60px;
 98     background:url(http://hovertree.com/texiao/jquery/30/images/slider-arrow.png) -126px -137px #000 no-repeat;
 99     cursor:pointer;
100     filter:alpha(opacity=50);
101     opacity:0.5;
102     display:none;
103 }
104 .fullSlide .next {
105     left:auto;
106     right:15%;
107     background-position:-6px -137px;
108 }
109 
110 </style>
111 <div class="fullSlide">
112   <div class="bd">
113     <ul>
114       <li _src="url(http://hovertree.com/texiao/jquery/30/images/a.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/code/"></a></li>
115       <li _src="url(http://hovertree.com/texiao/jquery/30/images/b.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://hovertree.com/tiku/"></a></li>
116       <li _src="url(https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/59ef062d-f2d8-41af-ad71-5a0108654624-1639931099901.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://tool.hovertree.com/"></a></li>
117       <li _src="url(https://gitee.com/system_mush/my-jsp-tutorial/raw/jsp/my_tutorial/2021/12/59ef062d-f2d8-41af-ad71-5a0108654624-1639931099901.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://run.hovertree.com/code/"></a></li>
118       <li _src="url(http://hovertree.com/texiao/jquery/30/images/e.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://keleyi.com"></a></li>
119     </ul>
120   </div>
121   <div class="hd">
122     <ul>
123     </ul>
124   </div>
125   <span class="prev"></span> <span class="next"></span> </div>
126 <script type="text/javascript">
127 jQuery(".fullSlide").hover(function() {
128     jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
129 },
130 function() {
131     jQuery(this).find(".prev,.next").fadeOut()
132 });
133 jQuery(".fullSlide").hoverslide({
134     titCell: ".hd ul",
135     mainCell: ".bd ul",
136     effect: "fold",
137     autoPlay: true,
138     autoPage: true,
139     trigger: "click",
140     startFun: function(i) {
141         var curLi = jQuery(".fullSlide .bd li").eq(i);
142         if ( !! curLi.attr("_src")) {
143             curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
144         }
145     }
146 });
147 </script>
148 <div style="text-align:center;clear:both; font-size:12px;">
149 <p><a href="http://hovertree.com" target="_blank">何问起</a>分享网站整理</p>
150 <p>适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
151 <p>来源:何问起</p>
152 </div>
153 </body>
154 </html>

网页特效:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120661.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java按字节、字符、行、随机读取文件,并设置字符编码格式

    java按字节、字符、行、随机读取文件,并设置字符编码格式

  • python表白代码简单「建议收藏」

    python表白代码简单「建议收藏」谢谢大家的支持,您的一键三连是罡罡同学前进的最大动力!一键三连一键三连一键三连一键三连一键三连一键三连python表白代码简单1.首先你要现有python,以及环境配置(自己去网上找资源)2.下载pycharm(相当于Dev、Eclipse编译器)3.复制粘贴即可下面放上源代码:importturtle#str=input(‘请输入表白语:’)str=”糖浆不分离”str1=”2020/12/22~2021/2/16″turtle.speed(

  • python变量命名规则

    python变量命名规则在Python中,变量标记或指向一个值。当遇到变量时,Python将其替换为指向值。>>>cost=2.99>>>.1*cost0.29900000000000

  • Win32 API 常量定义(四)

    PublicConstMIXER_OBJECTF_HMIDIOUT=(MIXER_OBJECTF_HANDLEOrMIXER_OBJECTF_MIDIOUT)PublicConstMIXER_OBJECTF_MIDIIN=&H40000000PublicConstMIXER_OBJECTF_HMIDIIN=(MIXER_OBJECTF_HANDLEOrMIX

  • BM3D图像去噪算法

    BM3D图像去噪算法一、引言          一种非局部去噪方法Non-localmethod[1],可以归类到spatialmethod中,另外用的比较多的还有transformmethod,基于transformmethod的方法在imagedenoise中也取得了很好的效果,不过理论阐述会比较繁琐,如BLS-GSM-Wavelet。        NLM去噪算法使用的是i

  • 正则表达式中的特殊字符一览[通俗易懂]

    正则表达式中的特殊字符一览[通俗易懂]
    正则表达式中的特殊字符一览
     
    〓简介〓
    字符意义:对于字符,通常表示按字面意义,指出接着的字符为特殊字符,不作解释。
    例如:/b/匹配字符’b’,通过在b前面加一个反斜杠,也就是/b/,则该字符变成特殊字符,表示匹配一个单词的分界线。或者:对于几个字符,通常说明是特殊的,指出紧接着的字符不是特殊的,而应该按字面解释。例如:*是一个特殊字符,匹配任意个字符(包括0个字符);例如:/a*/意味匹配0个或多个a。为了匹配字面上的*,在a前面加一个反斜杠;

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号