Warning: mysql_query() [function.mysql-query]: Unable to save result set in D:\AppServ\www\newclick\common\db_order.php on line 50
鼠标经过图片放大效果的网站制作案例_手机网站制作_网页设计制作_上海网站建设公司_内力互动网络
首页 > 最新动态 > 内力博客

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

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

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;

效果如下图:

未经过时:

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

经过之后:

 

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

 

 

上一篇:无   下一篇:无

返回上一级

评论 [发评论]
 
共 条记录
昵    称:
验证码: 看不清,换一张
以上网友发言只代表其个人观点,不代表内力互动的观点或立场。

更多我们的作品

qq客服在线客服