码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标滚轮改变图片大小

时间:2015-01-08 13:15:21      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

    <script type="text/javascript">
 
        window.onresize = function () {
            shade.style.height = document.documentElement.clientHeight + "px";
            shade.style.width = document.documentElement.clientWidth + "px";
            ImageCenter();
        } 
        function ImageCenter() {
            divDetail.style.left = (document.documentElement.clientWidth - divDetail.clientWidth) / 2 + "px";
            divDetail.style.top = (document.documentElement.clientHeight - divDetail.clientHeight) / 2 + "px";
        }

        function MakeSize(e) {
            var zoom = parseInt(e.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if (zoom > 360)
                return;
            if (zoom > 0)
                e.style.zoom = zoom + ‘%‘;
            ImageCenter();
        } 


    </script>
    <div id="Shade" style="opacity: 0.5; position: absolute; left: 0px; top: 0px; z-index: 1000;
        background: rgb(0, 0, 0);" onclick="ShadeClick();">
    </div>
    <div id="divDetail" style="zoom: 1; opacity: 1; position: absolute; z-index: 1001;">
        <img id="detailImage" onmousewheel="return MakeSize(this);" style="cursor: pointer;">
    </div>

 

鼠标滚轮改变图片大小

标签:

原文地址:http://www.cnblogs.com/wjshan0808/p/4210531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!