zoukankan      html  css  js  c++  java
  • jq实现鼠标经过图片翻滚效果

    短短的十多行代码就实现了一个酷炫的图片翻滚代码,要实现这个效果并不难,只要思路对了,一切都好办,不多说了,直接上代码看效果!

    html结构:

    <ul class="list">
            <li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>
            <li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>
            <li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>
            <li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>
            <li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>
            <li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>
            <li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>
            <li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>
            
        </ul>

    css代码:

     *{ margin:0; padding:0;}
        .list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
        .list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}
        .list li img{ float:left; width:150px; height:80px; border:none;}
        .list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

    jq代码(注意要引入jq库):

     $(function () {
                $('.list li').hover(function () {
                    $(this).children('a,img').stop();
                    $(this).children('img').stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
                        $(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
                    });
    
                }, function () {
                    $(this).children('a,img').stop();
                    $(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
                        $(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);
    
                    });
                });
    
            });

    是不是很简单的几句jq代码?亲,不妨copy下来看下效果呗!

  • 相关阅读:
    DOM2DOM3续
    总结 @ 在 C# 中的用法 (装载)
    ORACLE10G卸载过程
    .net中访问oracle数据库的几种方式(转载)
    试图运行项目时出错,无法启动调试。没有正确安装调试器。请运行安装程序安装或修复调试器
    设计模式 构造器
    设计模式 抽象工厂
    linq中日期格式转换或者比较,程序报错说不支持方法的解决办法
    bootstrap图标字体不出来问题的解决办法
    JavaScript对象属性访问的两种方式
  • 原文地址:https://www.cnblogs.com/sweet201314/p/3594792.html
Copyright © 2011-2022 走看看