首页 > 最新动态 > 内力博客

鼠标经过图片放大效果的网站制作案例

分类:制作    标签:    浏览[14610]    评论[0]

02月05日
2015年

显示的效果是鼠标经过a标签,对应的图片会放大效果(从中心位置放大)。

“js部分:
        var zoom = 1.03;
        var width = $(this).find(".move_img").find("img").width();
        var height = $(this).find(".move_img").find("img").height();
        var z_width = width * zoom;
        var z_height = height * zoom;
        $(".big_kuai a").hover(function () {
            $(this).find(".move_img").find("img").animate({
                width: z_width,
                height: z_height,
                marginTop: "-9px",
                marginLeft: "-9px"
            }, 1000);
        }, function () {
            $(this).find(".move_img").find("img").animate({
                width: width,
                height: height,
                marginTop: "0px",
                marginLeft: "0px"
            }, 1000);

        });”

思想如上,css和html可以自己写,不过包含图片的那个div要设置固定的宽度和高度,并且设置属性:overflow:hidden;

效果如下图:

未经过时:

上海网站制作公司 上海虹口区网站建设公司 上海杨浦区网站建设公司 上海宝山区网站设计公司

经过之后:

 

上海闵行区网站制作公司 上海静安区网站制作公司 上海虹口区网站制作公司 上海宝山区网站制作公司

 

 

上一篇:无   下一篇:无

返回上一级

更多我们的作品