简单的Jquery实现页面文字变化
<html><head>
<title>改变字体 大小 颜色 背景</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
.dragbar{height:20px;background:#ddd;}
.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#fontsize").change(function(){
var size = $("#fontsize").val();//获取下拉框的值
$("p").css({"font-size":size }); //把值付给css的font-size
});
$("#backgroundcolor").change(function(){
var backgroundcolor = $("#backgroundcolor").val();
$("p").css({"background":backgroundcolor});
});
$("#fontcolor").change(function(){
var fontcolor = $("#fontcolor").val();
$("p").css({"color":fontcolor});
$("button").css({"color":fontcolor});
});
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
$("#bu1").click(function(){
$(".panel").fadeOut(4000);
});
$("#bu2").click(function(){
$(".panel").fadeIn(4000);
});
});
var percent=0;
$(function(){
var handle=$(".draghandle");
var dragbar=$(".dragbar");
dragbar.css("width","200px");
handle.css({"width":"10px","top":dragbar.offset().top,"left":dragbar.offset().left});
var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());
handle.bind("mousedown",function(e){
var x=e.pageX;
var hx=parseInt(handle.offset().left);
$(document).bind("mousemove",function(e){
var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx);
handle.css({left:left,top:dragbar.offset().top});
percent=(left/maxlen*100).toFixed(0);
return false;
});
$(document).bind("mouseup",function(){
x=handle.offset();
var size=Math.round(parseInt(x.left)/10);
$("#span1").text(size);
$("p").css({"font-size":size });
$(this).unbind("mousemove");
})
})
function move(percent){
var handle_left=maxlen*percent+dragbar.offset().left;
handle.animate({
left:handle_left,top:dragbar.offset().top
},{duration:1500 , queue:false});
}
});
</script>
</head>
<body>
<label for="fontsize">字体大小</label>
<select id="fontsize">
<option value="12px">小号</option>
<option value="14px">较小</option>
<option value="16px" >中号</option>
<option value="18px">较大</option>
<option value="24px">大号</option>
<option value="30px">超大号</option>
</select>
<div class="dragbar">
<div class="draghandle"></div>
</div>
<p> <span id="span1">unknown</span> px</p>
<label for="backgroundbackground">背景颜色</label>
<select id="backgroundcolor">
<option value="#e5eecc">默认</option>
<option value="gray">淡灰</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">明黄</option>
</select>
<label for="fontcolor">字体颜色</label>
<select id="fontcolor">
<option value="#000000">黑色</option>
<option value="#ff0000">红色</option>
<option value="#006600">绿色</option>
<option value="#0000ff">蓝色</option>
<option value="#660000">棕色</option>
</select>
<br/>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
<button id="bu1">慢慢消失</button>
<button id="bu2">慢慢回来</button>
</body>
</html>
页:
[1]