html如何让div进行缩放 , 就向按住Ctrl+滑轮放大缩小网页一样缩放div??

html-css027

html如何让div进行缩放 , 就向按住Ctrl+滑轮放大缩小网页一样缩放div??,第1张

用css的zoom和js的addEventListener

var scrollFunc=function(e){

    var direct=0

    e=e || window.event

    

    div = document.getElementById('div')//最重要的

    

    if(e.wheelDelta){//IE/Opera/Chrome

        div.style.zoom = wheelDelta

    }else if(e.detail){//Firefox

        div.style.zoom = wheelDelta

    }

    ScrollText(direct)

}

/*注册事件*/

if(document.addEventListener){

    document.addEventListener('DOMMouseScroll',scrollFunc,false)

}//W3C

window.onmousewheel=document.onmousewheel=scrollFunc//IE/Opera/Chrome/Safari

暂未测试

实现div层的放大与缩小,参考实例如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.content

{

border: 1px solid #ccc

width: 440px

overflow: hidden

margin: 10px

}

</style>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

if ($('#content').height() >400)

$('#content').height(400)

$('#bigger').toggle(function() {

$('#content').height($('#content').height() + 100)

$('#bigger').html('缩小')

}, function() {

$('#content').height($('#content').height() - 100)

$('#bigger').html('放大')

})

})

</script>

</head>

<body>

<div id="content" class="content">

内容1<br />

内容2<br />

</div>

<br />

<span id="bigger">放大</span>

</body>

</html>