找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发JQ入门系列_手写一个放大镜

2018-12-17 分类：jQuery 阅读(1234) 评论(0)
一般大公司前端开发流程
类似美团的前端开发流程
前端开发完整流程

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta
            name=”viewport”
            content=”initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width”
        />
        <title>HTML5</title>
        <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
        <style>
            html {
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                font-size: 62.5%; /*相当于10px*/
            }
            html * {
                tap-highlight-color: rgba(
                    0,
                    0,
                    0,
                    0.05
                ); /*ios的Safari浏览器的链接点击时的效果*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
                -ms-tap-highlight-color: rgba(0, 0, 0, 0.05);
                margin: 0;
                padding: 0;
            }
            body {
                font-size: 1.4rem; /*14px*/
                font-family: ‘微软雅黑’;
            }
            article,
            aside,
            details,
            figure,
            figcaption,
            footer,
            header,
            hgroup,
            main,
            menu,
            nav,
            section,
            summary {
                display: block;
            }
            ul {
                overflow: hidden;
            }
            ul li {
                list-style: none;
            }
            a:link {
                color: #666;
                text-decoration: none;
            }
            a:visited {
                color: #666;
                text-decoration: none;
            }
            a:hover {
                color: #09c;
                text-decoration: none;
            }
            a:active {
                color: #09c;
                text-decoration: none;
            }
            /*img{-ms-interpolation-mode:bicubic;width:100%;}*/
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .main {
                width: 95%;
                margin: 50px auto;
            }
            #glass {
                position: relative;
                z-index: 999;
            }
            #glass-small {
                width: 400px;
                height: 262px;
                cursor: pointer;
                overflow: hidden;
            }
            #glass-small img {
                width: 400px;
                height: 262px;
            }
            #glass-big {
                position: absolute;
                width: 600px;
                height: 600px;
                overflow: hidden;
                left: 450px;
            }
            #glass-big img {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class=”main”>
            <div id=”glass”>
                <div id=”glass-small” class=”left”>
                    <img
                        src=”http://cdn.attach.qdfuns.com/notes/pics/201608/23/150949xe7vbhddzvpbtdtp.jpg”
                    />
                </div>
                <div id=”glass-big” class=”left”>
                    <img
                        src=”http://cdn.attach.qdfuns.com/notes/pics/201608/23/150955sksepkieda1edkpk.jpg”
                    />
                </div>
            </div>
        </div>
        <script type=”text/javascript”>
            $(function() {
                glass(‘#glass-small’, ‘#glass-big’)
            })
            function glass(smallDiv, bigDiv) {
                var _imgSmall = $(smallDiv),
                    _imgBig = $(bigDiv),
                    _imgBigDivH = _imgBig.height(),
                    _imgBigDivW = _imgBig.width(),
                    mouseInImgX = 0,
                    mouseInImgY = 0, //鼠标在缩略图中的位置
                    _imgSmallOffsetX = _imgSmall.offset().left, //小图距离文档左边位置偏移
                    _imgSmallOffsetY = _imgSmall.offset().top, //小图距离文档顶部位置偏移
                    _imgSmallH = _imgSmall.find(‘img’).height(),
                    _imgSmallW = _imgSmall.find(‘img’).width(),
                    _imgBigH = _imgBig.find(‘img’).height(),
                    _imgBigW = _imgBig.find(‘img’).width(),
                    perH = _imgSmallH / _imgBigH, //小图和大图高度的比例
                    perW = _imgSmallW / _imgBigW //小图和大图宽度的比例
                _imgSmall
                    .hover(
                        function() {
                            _imgBig.find(‘img’).fadeIn()
                        },
                        function() {
                            _imgBig.find(‘img’).fadeOut()
                        },
                    )
                    .mousemove(function(e) {
                        mouseInImgX = e.pageX – _imgSmallOffsetX
                        mouseInImgY = e.pageY – _imgSmallOffsetY
                        var marginLeft =
                                -(mouseInImgX / perW – _imgBigDivW / 2) + ‘px’,
                            marginTop =
                                -(mouseInImgY / perH – _imgBigDivH / 2) + ‘px’
                        _imgBig.find(‘img’).css({
                            ‘margin-left’: marginLeft,
                            ‘margin-top’: marginTop,
                        })
                        if (mouseInImgX / perW <= _imgBigDivW / 2) {
                            _imgBig.find(‘img’).css({ ‘margin-left’: 0 })
                        }
                        if (mouseInImgY / perH <= _imgBigDivH / 2) {
                            _imgBig.find(‘img’).css({ ‘margin-top’: 0 })
                        }
                        if (_imgBigW – mouseInImgX / perW < _imgBigDivW / 2) {
                            _imgBig.find(‘img’).css({
                                ‘margin-left’: _imgBigDivW – _imgBigW + ‘px’,
                            })
                        }
                        if (_imgBigH – mouseInImgY / perH < _imgBigDivH / 2) {
                            _imgBig.find(‘img’).css({
                                ‘margin-top’: _imgBigDivH – _imgBigH + ‘px’,
                            })
                        }
                    })
            }
        </script>
    </body>
</html>
前端开发流程规范
web前端开发大体流程
前端工程化开发流程图
赞(0)
前端开发者 » 前端开发JQ入门系列_手写一个放大镜
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论