u013179958
CSDNRGY
采纳率99.5%
2016-12-29 06:57 阅读 4.3k

如何通过html+css+js实现,缩放元素大小的功能?

http://www.familyecho.com/

例如这个网站,我可以点击+,来放大元素,这个原理是什么?

也是通过js去修改元素的大小吗?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    fenghui187 小鬼web 2016-12-29 07:45

    我写了一种简单的实现方式
    图片说明
    图片说明

    点赞 1 评论 复制链接分享
  • xishaoguo 二小1号 2016-12-29 07:22

    css写两套样式完了,js控制引用,点击+的时候引用样式一,点击-的时候引用样式二,样式一写个大样式,样式二写个小样式,不完了么。

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2016-12-29 14:05

    就是简单的width/height操作而已,absolute定位,还需要调整left、top进行居中,如果不考虑居中直接调整width/height就行了

     <!doctype html>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <style>
        #me{position:absolute;left:50%;top:50%;width:50px;height:30px;border:solid 1px #000;margin-left:-25px;margin-top:-15px;text-align:center;line-height:30px;font-size:14px}
    </style>
    <div id="me">me</div>
    <input type="button" value="+" /><input type="button" value="-" />
    <script>
        var w = 50, h = 30,ft=14;
        $(':button').click(function () {
            var plus = this.value == '+';
            w += plus ? 20 : -20;
            h += plus ? 10 : -10;
            ft += plus ? 2 : -2;
            var ml = w / 2, mt = h / 2;
            $('#me').css({ width: w + 'px', height: h + 'px', marginLeft: -ml + 'px', marginTop: -mt + 'px', lineHeight: h + 'px', fontSize: ft + 'px' });
        });
    </script>
    
    点赞 评论 复制链接分享

相关推荐