网页设计特效

放大或缩小网页的按钮效果代码

发布制作:admin  发布日期:2013/5/4

我们在浏览网页的时候,有时需要把网页放大到150%或者缩小成50%等,为了使得这个需要的操作更方便,可以加入以下代码:

lt;SCRIPT>
<!--
var zoomRate = 20;
var maxRate = 500;
var minRate = 50;
var currZoom = 100;
//document.onkeypress = getKey;
//window.onload = initZoom;
function GetCookie(name){
if (document.cookie != "") {
zoomc = document.cookie.split("; ");
for (var i=0; i < zoomc.length; i++) {
zoomv = zoomc[i].split("=");
if (zoomv[0] == name) {
return unescape(zoomv[1]);
}
}
}else{
return "";
}
}
function SetCookie(name,value){
document.cookie = name + "=" + escape (value)+";";
}
/*function GoZoom(contentid){
if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
document.all[contentid].style.zoom = GetCookie("zoomVal");
currZoom=GetCookie("zoomVal");
}
else{
document.all[contentid].style.zoom = '100%';
currZoom = '100%';
}
}*/
function zoomInOut(contentid, how) {
if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
document.all[contentid].style.zoom = GetCookie("zoomVal");
currZoom=GetCookie("zoomVal");
}
else{
document.all[contentid].style.zoom = '100%';
currZoom = '100%';
}
if (((how == "in") && (parseInt(currZoom) >= maxRate)) || ((how == "out") && (parseInt(currZoom) <= minRate)) ) {
return;
}
if (how == "in") {
document.all[contentid].style.zoom = parseInt(document.all[contentid].style.zoom)+zoomRate+'%';
}
else {
document.all[contentid].style.zoom = parseInt(document.all[contentid].style.zoom)-zoomRate+'%'
}
SetCookie("zoomVal",document.all[contentid].style.zoom);
showCurrZoom(contentid);
}
/*
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
which2 = eventChooser;
var el=event.srcElement;
if ((el.tagName != "INPUT") && (el.tagName != "TEXTAREA"))
{
if(which == "+" )
zoomInOut('zoom', 'in');
else if(which == "-" )
zoomInOut('zoom', 'out');
}
}*/
function initZoom(contentid) {
if(GetCookie("zoomVal") != null && GetCookie("zoomVal") != ""){
document.all[contentid].style.zoom = GetCookie("zoomVal");
currZoom=GetCookie("zoomVal");
}
else{
document.all[contentid].style.zoom = '100%';
currZoom = '100%';
}
showCurrZoom(contentid);
}
function showCurrZoom(contentid) {
document.all['showZoom'].innerText = document.all[contentid].style.zoom;
}
//-->
</SCRIPT>
<div id="zoom">
<div style="text-align:center">
<h4>
网页手动放大缩小
</h4>
</div>
<div>
<div style="text-align:center" ><input type="button" value="放大(+)" onclick="zoomInOut('zoom','in')"/> <span id="showZoom"></span> <input type="button" value="缩小(-)" onclick="zoomInOut('zoom','out')"/></div><br/><div style="text-align:center"><br/><script type="text/javascript">initZoom("zoom");</script><br/>
</div>
</div>
</div>

上一篇:常用的网页漂浮广告代码 下一篇:没有了