• 使用 jQuery制作仿Flash 图片横向切换(转)


    Demo演示:http://nba.titan24.com/focus/kikx/slider_demo.html
    DEMO 说明:
    图片横向滑动切换的原理很简单,就是当前被选中的图片,或者当前鼠标划入的图片宽度变大,
    其他的图片减少相应的尺寸就可以了,于是我们就有了这个公式:

    假如我们有11张图片,图片容器宽度一共为 960 px ,则每个图片宽度为 960/11 px ,
    图片打开状态宽度为 160 px,那么其他图片就要变成 (960-160)/10 px 基于这个公式,
    再结合jQuery的 animate 方法对样式的控制,我们就可以模拟这个效果。


    这个动画的原理很简单,但是在实现的过程中有几个需要注意的问题。

    1,样式上:
    由于图片要始终位于中间位置,所以我们把图片作为背景图片,这样做的好处有2。

    第一,根据容器大小的变换显示图片区域大小 ,就模拟了Flash 遮罩的效果;

    第二,用  background:url(../images/0.jpg) center top no-repeat; 可以使得图片始终在容器中间位置显示。

    由于图片容器是浮动的,所以我们必须保证图片们不能换行,在本例中,
    我采用了这样的DOM结构 :
    <div class="picon" id="picon">
            <ul>
               <li class="pic1"> <!--背景是pic1.jpg的 li--> </li>
              <li class="pic2"> <!--背景是pic2.jpg的 li--> </li>
               .....
          </ul>
    </div>

    样式:
    .picon{ clear:both; height:400px; overflow:hidden; background:#000; position:relative;}
    .picon ul{ position:absolute; top:0; left:0; height:400px; 1000px;} /*大于外层容器宽度 预留安全空间*/
    .picon li{ float:left; height:400px; border-right:1px solid #fff; 79px; position:relative;}


    2,在脚本方面的技巧


    第一:在算图片的尺寸的时候要取整 ,var avgw= parseInt((960-maxw-2)/11);
             
    我们并不需要带小数的像素值。
    |
    第二:就是延时执行,也就是鼠标移入一个图片的时候,不立即执行,要延时一段时间,
              如果立即执行则鼠标在经过的途中会划过N多的图片,每个都会触发动作,就导致
              图片挨个执行自己的动画,这样就导致运行缓慢系统负担严重,而且我们并不想
              触发那些动作。
     
             比如 我们把动作设置成一个函数 
             var act=function (){
                 //code goes here;
              }
               那么我们采用如下方式 
              $("#picon").find("li").mouseover(
                      function(){
                           t=setTimeout(act,200);
                      }
               )
              这样就避免了鼠标快速划过触发的动作,别忘了在离开的时候 还要
                if(t){
                        clearTimeout(t);
                } 
               来取消延时。


    具体的代码大家可以再下载的例子中查看。

    下载地址 http://kikx.googlecode.com/files/uefa_slider.zip

    PS:在实现的过程中我还试图采用表格的结构,利用表格自动分配宽度的原理来省却计算
    每个容器的宽度,结果是在IE中运行可以,但是在Firefox等其他现代浏览器中出现反复跳
    动的现象。所以最后还是采取了脚本计算分配宽度的做法。
  • 相关阅读:
    Linux安装gitlab
    logback日志配置
    spring源码-aop动态代理-5.3
    【转】阿里云免费SSL证书申请与安装使用(IIS7)
    WebApi 全局使用filter
    Mint-UI Picker 三级联动
    P标签莫名有了margin-top值的原因
    Vue为v-html中标签添加CSS样式
    【转】C# string数组转int数组
    【转】SQLServer汉字转全拼音函数
  • 原文地址:https://www.cnblogs.com/luluping/p/1495827.html
Copyright © 2020-2023  润新知