jquery鼠标悬停商品图片边框动画效果特效下载


jquery鼠标悬停商品图片边框动画效果特效下载
jquery鼠标悬停商品图片边框动画效果特效下载以及鼠标悬停、商品图片、边框动画等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<div class="cn_gobuy">
    <div class="search_y"><a href="#"><img src="images/search_y.png" alt=""/></a></div>
    <div class="biankuang biankuang_1"></div>
    <div class="biankuang biankuang_2"></div>
    <div class="biankuang biankuang_3"></div>
    <div class="biankuang biankuang_4"></div>
    <a class="tp_gobuy" href="#"><img src="images/2-328x300.jpg" alt="Voyager 3" title="Voyager 3"></a>
    <a class="top_text" href="#">Voyager 3</a>
    <div class="text_gobuy">
        <br/>
        <b>¥13,599.00</b>
        <br/>
        <div class="a_add_divboc">
            <div id="boynow">
                <a href="#">
                    <img src="images/buynow.jpg" width="117" height="33">
                </a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
//        边框效果--移入
        function biankuang(){
            $('.biankuang_1').stop(true).animate({
                height:'305px'
            },300)
            $('.biankuang_2').stop(true).delay(300).animate({
                width:'360px'
            },300)
            $('.biankuang_3').stop(true).animate({
                height:'305px'
            },300)
            $('.biankuang_4').stop(true).delay(300).animate({
                width:'360px'
            },300)
        }
//        边框效果--移出
        function biankuang1(){
            $('.biankuang_1').stop(true).delay(100).animate({
                height:'0px'
            },100)
            $('.biankuang_2').stop(true).animate({
                width:'0px'
            },100)
            $('.biankuang_3').stop(true).delay(100).animate({
                height:'0px'
            },100)
            $('.biankuang_4').stop(true).animate({
                width:'0px'
            },100)
        }
//        触发
            $('.cn_gobuy').hover(
                    function () {
                            $('.text_gobuy').addClass('text_gobuy_show');
                            $('.search_y').animate({left:'150',opacity:1},300);
                        biankuang();
                    },
                    function () {
                        $('.text_gobuy').removeClass('text_gobuy_show');
                        $('.search_y').animate({left:'100',opacity:0},300);
                        biankuang1();
                    }
            );
    })
</script>

相关推荐

发表评论

相关文章