jQ内容的强大,后面继续跟进...

时间:2022-09-06 08:52:55
    <script type="text/javascript" src="jQ/jquery.js"></script>
    <script type="text/javascript">
        //页面加载完成时
        $(function(){
            //给img设置宽度
            $("img").attr("width",150);
            //给img设置初始状态的透明度
            $("img").fadeTo(1000,0.5);
            //鼠标经过离开的状态
            $("img").hover(
                //经过
                function(){
                    $(this).fadeTo(1000,1);
                    //使用css样式 加一个缩放效果
                    $(this).css("transform","scale(1.05)");
                },
                //离开
                function(){
                    $(this).fadeTo(1000,0.5);
                    $(this).css("transform","scale(1)");
                }
            );

        });
    </script>
</head>
<body>
    <img src="data:images/1.jpg" />
    <img src="data:images/2.jpg" />
    <img src="data:images/1.jpg" />
    <img src="data:images/7.jpg" />
    <img src="data:images/5.jpg" />
    <img src="data:images/7.jpg" />
    <img src="data:images/1.jpg" />
    <img src="data:images/2.jpg" />
    <img src="data:images/1.jpg" />
    <img src="data:images/7.jpg" />
    <img src="data:images/5.jpg" />
    <img src="data:images/7.jpg" />
</body>