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

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

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

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;

效果如下图:

未经过时:

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

经过之后:

 

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

 

 

上一篇:无   下一篇:无

返回上一级

评论 [发评论]
douge 2017-11-21 14:51:54

Fantastic blog you have here but I was wondering if you knew of any user discussion forums that cover the
same topics talked about here? I’d really love to be a part of online community where e-slovensko I can get suggestions from other experienced individuals that share the same interest. If you have any recommendations, please let me know.

手术床 2017-11-09 14:58:52

LED手术灯LED无影灯手术床电动手术床手术床电动手术床手术台手术灯LED手术无影灯电动手术台手术无影灯医用手术床医用手术台医用手术灯液压手术台电动吊塔机械手术台多功能手术台LED手术无影灯operating lightoperating lampled operating lampoperating tableoperating lampled operating lampshadowless operating lampmedical operating lampoperating lampled operating lampmedical operating lampshadowless operating lampElectric operating tablegynecology operating tablehydraulic operating tablehalogen operating lamp手术无影灯手术台电动手术台手术灯医用手术床无影手术灯医用手术台医用手术灯液压手术台电动吊塔机械手术台电动病床医用吊塔LED手术灯多功能手术台多功能手术床医用无影灯halogen operating lightled operating lightShadowless operating lightmedical operating lightShadowless operating lampmedical operating lampHydraulic gynecology tableMechanical operating tablecomprehensive operating tableHydraulic gynecology operating tableElectric gynecology operating tableElectric hydraulic operating tablemedical bedmedical pendantmedical trolleymedical cabinetmedical servicesmedical servicemedical emergency servicemedical service companymedical service planmedical service corpsmedical service groupmedical equipmentchina medical equipment

手术床 2017-11-09 13:47:47

LED手术灯LED无影灯手术床电动手术床手术床电动手术床手术台手术灯LED手术无影灯电动手术台手术无影灯医用手术床医用手术台医用手术灯液压手术台电动吊塔机械手术台多功能手术台LED手术无影灯operating lightoperating lampled operating lampoperating tableoperating lampled operating lampshadowless operating lampmedical operating lampoperating lampled operating lampmedical operating lampshadowless operating lampElectric operating tablegynecology operating tablehydraulic operating tablehalogen operating lamp手术无影灯手术台电动手术台手术灯医用手术床无影手术灯医用手术台医用手术灯液压手术台电动吊塔机械手术台电动病床医用吊塔LED手术灯多功能手术台多功能手术床医用无影灯halogen operating lightled operating lightShadowless operating lightmedical operating lightShadowless operating lampmedical operating lampHydraulic gynecology tableMechanical operating tablecomprehensive operating tableHydraulic gynecology operating tableElectric gynecology operating tableElectric hydraulic operating tablemedical bedmedical pendantmedical trolleymedical cabinetmedical servicesmedical servicemedical emergency servicemedical service companymedical service planmedical service corpsmedical service groupmedical equipmentchina medical equipment

 
首页 上一页 1 2 下一页 尾页 共 4 条记录
昵    称:
验证码: 看不清,换一张
以上网友发言只代表其个人观点,不代表内力互动的观点或立场。

更多我们的作品

qq客服在线客服