Jquery动画效果

1、图片跟随鼠标移动

 $(document).bind('mousemove', function (e) {
            //获取鼠标坐标
            $("img").css({ "left": e.pageX, "top": e.pageY });
            
        });

2、鼠标放到图片上显示大图效果

 <div>
        <img src="../img/1.jpg"  title="图1" class="img"/>
        <img src="../img/2.jpg"  title="图2" class="img"/>
        <img src="../img/3.jpg"  title="图3" class="img"/>
        <img src="../img/4.jpg"  title="图4" class="img"/>
    </div>


 $(function () {  
               //添加图片移入事件
            $(".img").mousemove(function (e) {
                //判断class名为one的<div>是否添加过
               if ($(".one").length == 0) {
                    //$(this).attr("src")当前图片的路径 新添加的div添加到body里
                    $("<div class='one'><img src='" + $(this).attr("src") + "' /><div/>").appendTo($("body"));
                }
                //添加样式  e.pageX鼠标的横坐标 e.pageY纵坐标
                $(".one").css({ "left": e.pageX+10, "top": e.pageY+10, "position": "absolute" });
            }).mouseout(function () {
                //删除添加的div
                $(".one").remove();
            });
        });

上下滚动文字

 <div id="jnNoticeInfo">
                        <h2 title="最新动态">最新动态</h2>
                        <ul>
                            <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                            <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                            <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
                            <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
                            <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
                            <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
                        </ul>

                        <br class="clear" />
                    </div>

  //上下滚动文字
        setInterval(function () {
            //为jnNoticeInfo添加动画效果
            //$('#jnNoticeInfo ul li: first').height": 0 }, 500 第一行没0.5s高变为0(隐藏)         
            $("#jnNoticeInfo ul li:first").animate({ "$('#jnNoticeInfo ul li: first').height": 0 }, 500, function () {
                 //为第一行添加CSS样式Height 
                 //添加的样式为前面隐藏的样式，先进行获取原先li的Height样式$("#jnNoticeInfo ul li:first").height() 并且追加到ul中
                $("#jnNoticeInfo ul li:first").css("height", $("#jnNoticeInfo ul li:first").height()).appendTo($("#jnNoticeInfo ul"));
            });
            
        }, 1000);

轮播

<div id="jnImageroll">
                    <a href="#nogo" id="JS_imgWrap">
                        <img src="images/ads/1.jpg" alt="相约情人节" />
                        <img src="images/ads/2.jpg" alt="新款上线" />
                        <img src="images/ads/3.jpg" alt="愤怒小鸟特卖" />
                        <img src="images/ads/4.jpg" alt="男鞋促销第一波" />
                        <img src="images/ads/5.jpg" alt="春季新品发布" />
                    </a>
                    <div>
                        <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
                        <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
                        <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
                        <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
                        <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</em></a>
                    </div>
                </div>






        //全局变量
        var index = 0;
        var time = null;

        $("#jnImageroll div a").addClass("opc");
        //封装一个方法
        function show(index) {
            $("#jnImageroll div a").eq(index).removeClass("opc").addClass("chos").siblings().addClass("opc").removeClass("chos");
            $("#JS_imgWrap img").eq(index).fadeIn().siblings().fadeOut();
        }

        $("#jnImageroll").hover(function () {
            //鼠标移入清除定时器
            clearInterval(time);
        }, function () {
            //移出时继续执行轮播
            time = setInterval(function () {
                show(index);
                index++;
                if (index == $("#JS_imgWrap img").length) {
                    index = 0;
                }
            }, 2000)
        }).mouseout();

        //添加鼠标移入事件
        $("#jnImageroll div a").mousemove(function () {
            index = $(this).index();
            //调用封装方法
            show(index);
        }).eq(0).mousemove();