简单的Jquery实现页面文字变化 -

Jz_lvcha

浏览: 22495 次
性别:
来自: 长沙

最近访客更多访客>>

binashen

suidl

sn200837

neeleon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

简单的Jquery实现页面文字变化

博客分类：

Jquery

jquery javascript html web

<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>

分享到：