页面上增加可调字体大小，背景色，以及打印的功能
在一个网页上如何像图片中
，用户在浏览网页时可以让用户自己选择调节字体大小和页面背景色.还有在页面上增加一个打印按钮，将页面打印下来，只打印页面上面的文字，页头页脚都不要。求实现代码
--------------------编程问答--------------------
用JQ........
--------------------编程问答--------------------
看我以前做的一个自定义控件，改变字体和颜色的<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SetReadStyle.ascx.cs"
Inherits="controls_SetReadStyle" %>
<script type="text/javascript" src="/js/Cookies.js"></script>
<script type="text/javascript">
function setFontSize(size){
switch(size){
case 2:
size = 12;
break;
case 17:
size = 16;
break;
case 32:
size = 22;
break;
case 47:
size = 28;
break;
case 62:
size = 36;
break;
default:
size = 16;
break;
}
$("#<%=Target %>").css("fontSize",size+"px");
$.cookie('ReadFontSize'+"<%=StudentInfo.StuID %>",size, { path: '/', expires: 30 });
}
function sliderAdd(){
var mleft = $("#fontSlider").css("marginLeft").replace("px","") - 0;
mleft +=15;
if(mleft < 0) mleft = 2;
if(mleft > 60) mleft = 62;
$("#fontSlider").css("marginLeft",mleft + "px");
setFontSize(mleft);
}
function sliderSub(){
var mleft = $("#fontSlider").css("marginLeft").replace("px","") - 0;
mleft -=15;
if(mleft < 0) mleft = 2;
if(mleft > 60)mleft = 62;
$("#fontSlider").css("marginLeft",mleft + "px");
setFontSize(mleft);
}
function divStyle_Close()
{
$("#divStyle").hide();
}
function ShowDivStyle(id,id2,idExample)
{
var eICP=jQuery("#"+id2).position();
$("#"+id).css({'top':(eICP.top + 18) + "px",'left':(eICP.left-130)+"px",'position':'absolute'});//.show();//.fadeIn("fast");
$("#"+id).toggle();
$("#<%=Target %>").bind("click",function() //点击外面，隐藏此控件
{
$("#"+id).hide();
});
for(i=0;i<2;i++)
{
var tbl=document.getElementById('hexSection'+i);
var tblChilds=tbl.childNodes;
var preCell,preColor;
for(j=0;j<tblChilds.length;j++)
{
var tblCells=tblChilds[j].childNodes;
for(k=0;k<tblCells.length;k++)
{
jQuery(tblChilds[j].childNodes[k]).attr('hy',i); //标记是第几行
jQuery(tblChilds[j].childNodes[k]).unbind().mouseover(function(a)
{
}).click(function()
{
var aaa="#"+jQuery(this).attr('hx');
var bbb=jQuery(this).attr('hy');
if(bbb==0)
{
$("#<%=Target %>").css("background",aaa);
$.cookie('ReadBackColor'+"<%=StudentInfo.StuID %>",aaa, { path: '/', expires: 30 });
}
else
{
$("#<%=Target %>").css("color",aaa);
$.cookie('ReadForeColor'+"<%=StudentInfo.StuID %>",aaa, { path: '/', expires: 30 });
}
})
}
}
}
}
//恢复默认
function RestoreDefault()
{
setFontSize(17);
$("#fontSlider").css("marginLeft","17px");
$("#<%=Target %>").css("background","Transparent");
$("#<%=Target %>").css("color","000000");
$.cookie('ReadBackColor'+"<%=StudentInfo.StuID %>","Transparent", { path: '/', expires: 30 });
$.cookie('ReadForeColor'+"<%=StudentInfo.StuID %>","#000000", { path: '/', expires: 30 });
$("#chkReadbj").attr("checked",false);
chkReadbj_onclick();
}
$(function(){
var bColor=$.cookie('ReadBackColor'+"<%=StudentInfo.StuID %>");
var fColor=$.cookie('ReadForeColor'+"<%=StudentInfo.StuID %>");
var size= $.cookie('ReadFontSize'+"<%=StudentInfo.StuID %>");
var ReadbjChecked = $.cookie('ReadbjChecked'+"<%=StudentInfo.StuID %>");
if(bColor!=null)
$("#<%=Target %>").css("background",bColor);
if(fColor!=null)
$("#<%=Target %>").css("color",fColor);
else
$("#readArticle").css("color","black"); //将颜色置为黑色
if(size!=null)
{
var vleft=2;
switch(size)
{
case '12':
vleft = 2;
break;
case '16':
vleft = 17;
break;
case '22':
vleft = 32;
break;
case '28':
vleft = 47;
break;
case '36':
vleft = 62;
break;
}
$("#<%=Target %>").css("fontSize",size+"px");
$("#fontSlider").css("marginLeft",vleft + "px");
}
if(ReadbjChecked==null || ReadbjChecked=="")
{
ReadbjChecked="false";
}
$("#chkReadbj").attr("checked",ReadbjChecked=="true");
chkReadbj_onclick();
bookmark();
});
function chkReadbj_onclick()
{
if($("#chkReadbj").attr("checked"))
{
$("#tabreadArticle").css("filter","progid:dximagetransform.microsoft.alphaimageloader(src='/images/home/readbj.gif', sizingmethod=scale)");
}
else
{
$("#tabreadArticle").css("filter","");
}
$.cookie('ReadbjChecked'+"<%=StudentInfo.StuID %>",$("#chkReadbj").attr("checked"), { path: '/', expires: 30 });
}
</script>
--------------------编程问答--------------------
<a href="javascript:void(null)" id="icp" onclick="ShowDivStyle('divStyle','icp')"
title="设置样式">设置样式</a>
<div id="divStyle" style="width: 200px; height: 195px; background: #217ac1; position: absolute;
overflow: hidden; display: none; z-index: 999; ">
<table cellpadding="0" cellspacing="0" style="width: 198px; height: 194px; position: absolute;
left: 1px;">
<tr style="height: 25px;">
<td style="font-size: 14px; font-weight: bold; color: White;" >
样式设置</td>
<td style="text-align: right;">
<img alt="关闭" src="/Images/miniclose.gif" style="cursor: pointer;" onclick="divStyle_Close()" /></td>
</tr>
<tr style="background: #ffffff; vertical-align: top;">
<td colspan="2">
<table>
<tr style="height: 10px;">
<td colspan="2">
</td>
</tr>
<tr>
<td style="width: 80px; font-size: 12px; font-weight: bold; color: black; line-height: 120%;" align="center">
字体大小:
</td>
<td class="sliderb">
<img src="/images/slider_add.gif" width="13" height="13" style="float: left; cursor: pointer;"
onclick="sliderSub()" />
<img id="fontSlider" src="/images/slider.gif" width="7" height="13" style="margin-left: 0px;padding-left:10px;
float: left;" />
<img src="/images/slider_sub.gif" width="13" height="13" style="float: right; cursor: pointer;"
onclick="sliderAdd()" />
</td>
</tr>
<tr style="height: 10px;">
<td colspan="2">
</td>
</tr>
<tr>
<td style="width: 80px; font-size: 12px; font-weight: bold; color: black; line-height: 120%;" align="center">
背景颜色:
</td>
<td>
<table id="tblColor0" style="width: 104px; height:14px;font-size:1px;" cellpadding="0" cellspacing="1" >
<thead id="hexSection0">
<tr>
<td style="background-color: #808000; cursor: pointer;" hx="808000">
</td>
<td style="background: #808080; cursor: pointer;" hx="808080">
</td>
<td style="background: #C0C0C0; cursor: pointer;" hx="C0C0C0">
</td>
<td style="background: #000000; cursor: pointer;" hx="000000">
</td>
<td style="background: #ffffff; cursor: pointer;" hx="ffffff">
</td>
<td style="background: #008000; cursor: pointer;" hx="008000">
</td>
<td style="background: #000080; cursor: pointer;" hx="000080">
</td>
<td style="background: #800000; cursor: pointer;" hx="800000">
</td>
</tr>
</thead>
</table>
</td>
</tr>
<tr style="height: 10px;">
<td colspan="2">
</td>
</tr>
<tr>
<td style="width: 80px; font-size: 12px; font-weight: bold; color: black; line-height: 120%; " align="center">
字体颜色:
</td>
<td>
<table id="tblColor1" style="width: 104px; height:14px;font-size:1px;" cellpadding="0" cellspacing="1">
<thead id="hexSection1">
<tr>
<td style="background: #0000FF; cursor: pointer; " hx="0000FF" >
</td>
<td style="background: #800000; cursor: pointer;" hx="800000">
</td>
<td style="background: #008000; cursor: pointer;" hx="008000">
</td>
<td style="background: #ffffff; cursor: pointer;" hx="ffffff">
</td>
<td style="background: #000000; cursor: pointer;" hx="000000">
</td>
<td style="background: #00FF00; cursor: pointer;" hx="00FF00">
</td>
<td style="background: #FF00FF; cursor: pointer;" hx="FF00FF">
</td>
<td style="background: #FFC000; cursor: pointer;" hx="FFC000">
</td>
</tr>
</thead>
</table>
</td>
</tr>
<tr style="height: 10px;">
<td colspan="2">
</td>
</tr>
<tr>
<td style="width: 80px; font-size: 12px; font-weight: bold; color: black; line-height: 120%; " align="center">
保 护 色:
</td>
<td align="left" style="font-size: 12px; color: black; line-height: 120%; ">
<input id="chkReadbj" onclick="chkReadbj_onclick();" style="cursor: pointer;" type="checkbox" /><label style="cursor: pointer;" for="chkReadbj">启用/不启用</label>
</td>
</tr>
<tr style="height: 15px;">
<td colspan="2">
</td>
</tr>
<tr style="height: 10px;">
<td>
</td>
<td style=" font-size: 12px; font-weight: bold; color: black; line-height: 160%;">
<a href="javascript:void(null)" id="iDefault" onclick="RestoreDefault();" title="恢复默认设置">
恢复默认</a>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background: #f5f5f5; height: 25px;">
<td colspan="2">
</td>
</tr>
</table>
</div>
using System;--------------------编程问答-------------------- $(function(){
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class controls_SetReadStyle : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
private int _SmallSize = 12;
private int _MediumSize = 16;
private int _LargeSize = 20;
private string _Target;
/// <summary>
/// 小字体大小
/// </summary>
public int SmallSize
{
get { return this._SmallSize; }
set { this._SmallSize = value; }
}
/// <summary>
/// 中字体大小
/// </summary>
public int MediumSize
{
get { return _MediumSize; }
set { this._MediumSize = value; }
}
/// <summary>
/// 大字体大小
/// </summary>
public int LargeSize
{
get { return this._LargeSize; }
set { this._LargeSize = value; }
}
/// <summary>
/// 设置字体的容器ID
/// </summary>
public string Target
{
get { return this._Target; }
set { this._Target = value; }
}
}
$("#id").css("background-color":"#369");
$("#id").css("font-size":"18px");
}) --------------------编程问答-------------------- 除
补充：.NET技术 , ASP.NET
