Jquery 实现HTML 文本字体大小切换

guangqiang

浏览: 399382 次
性别:
来自: 青岛

最近访客更多访客>>

a450065208

qijojo

李虎强

hlbejy

博主相关

博客

微博

相册

留言

关于我

博客专栏

: wordpress步步高
浏览量：76167

: Web前端开发之路
浏览量：92812

: Flex/ActionSc...
浏览量：64015

: Android/IOS 开...
浏览量：35389

: PHP项目实战
浏览量：24523

文章分类

社区版块

存档分类

博客分类：

JavaScript/Jquery
Html&CSS

jquery js html css font

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>effects</title>
	<link rel="stylesheet" href="gettysburg.css" type="text/css" media="screen" />
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript" src="gettysburg.js"></script>

</head>

<body>
  <div id="container">    
    <h2>Abraham Lincoln's Gettysburg Address</h2>
<div id="switcher">
  <div class="label">Text Size</div>
  <button id="switcher-default">Default</button>
  <button id="switcher-large">Bigger</button>
  <button id="switcher-small">Smaller</button>
</div>
<div class="speech">
  <p>Fourscore and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.        
  </p>
  <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that the nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow, this ground. </p>
  <a href="#" class="more">read more</a>        
  <p>The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced.</p> 
  <p>It is rather for us to be here dedicated to the great task remaining before us&mdash;that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion&mdash;that we here highly resolve that these dead shall not have died in vain&mdash;that this nation, under God, shall have a new birth of freedom and that government of the people, by the people, for the people, shall not perish from the earth.</p>
</div>
  </div>
</body>
</html>

/***************************************
   =default styles
************************************** */

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: 62.5% Verdana, Helvetica, Arial, sans-serif;
  color: #000;
  background: #fff;
}
#container {
  font-size: 1.2em;
  margin: 10px 2em;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

h2 {
  font-size: 1.3em;
  margin-bottom: .5em;
}
h3 {
  font-size: 1.1em;
  margin-bottom: 0;
}

code {
  font-size: 1.2em;
}

a {
  color: #06581f;
}
/***************************************
=Aslett Clearing Method for floats 
************************************** */
.clear-after:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
.clear-after {display: inline-block;}
/* backslash hack hides from IE Mac \*/
	* html .clear-after {height: 1%;}
	.clear-after {display: block;}
/* end backslash hack */


/***************************************
   =chapter styles
************************************** */


.hover {
  cursor: pointer;
  background: #ffc;
}

#switcher {
  position: relative;
  width: 300px;
  padding: .5em;
  border: 1px solid #777;
}
.label {
  width: 130px;
  margin: .5em 0;
}

.button {
  width: 140px;
  padding: 5px;
  margin: .5em 0;
  border: 1px solid #e3e3e3;
  position: relative;
}

#brave {
  position: relative;
}
.bordered {
  border: 1px solid #999;
  padding: 1%;
  margin-right: 1%;
}
.more {
  clear: left;
}

$(document).ready(function() {
  var $speech = $('div.speech');
  var defaultSize = $speech.css('fontSize');
  $('#switcher button').click(function() {
    var num = parseFloat( $speech.css('fontSize'), 10 );
    switch (this.id) {
      case 'switcher-large':
        num *= 1.4;      
        break;
      case 'switcher-small':
        num /= 1.4;
        break;
      default:
        num = parseFloat(defaultSize, 10);        
    }
    // if (this.id == 'switcher-large') {
    //   num *= 1.4;
    // } else if (this.id == 'switcher-small') {
    //   num /= 1.4;
    // }
    $speech.animate({fontSize: num + 'px'}, 'slow');
  });
});

// $(document).ready(function() {
//   var $firstPara = $('p:eq(1)');
//   $firstPara.hide();  
//   $('a.more').click(function() {
//     if ($firstPara.is(':hidden')) {
//       $firstPara.fadeIn('slow'); 
//       $(this).text('read less');
//     } else {
//       $firstPara.fadeOut('slow');
//       $(this).text('read more');
//     }
//     return false;
//   });
// });

$(document).ready(function() {
  var $firstPara = $('p:eq(1)');
  $firstPara.hide();  
  $('a.more').click(function() {
    $firstPara.slideToggle('slow');
    var $link = $(this);
    if ( $link.text() == "read more" ) {
      $link.text('read less');      
    } else {
      $link.text('read more');
    }
    return false;
  });
});

// $(document).ready(function() {
//   
//   var $firstPara = $('p:eq(1)');
//   $firstPara.hide();
//   $('a.more').click(function() {
//     var $link = $(this);
//     $firstPara.animate({
//       opacity: 'toggle',
//       height: 'toggle'
//     }, 
//     'slow'
//     );
//     if ( $link.text() == "read more" ) {
//       $link.text('read less');      
//     } else {
//       $link.text('read more');
//     }
//     return false;
//   });
//   
// });


// $(document).ready(function() {
//   $('div.label').click(function() {
//     var paraWidth = $('div.speech p').outerWidth();
//     var $switcher = $(this).parent();
//     var switcherWidth = $switcher.outerWidth();
//     $switcher.animate({
//       'left': paraWidth - switcherWidth, 
//       height: '+=20px', 
//       borderWidth: '5px'
//     }, 'slow');
//     
//   });
// });

// $(document).ready(function() {
//   $('div.label').click(function() {
//     var paraWidth = $('div.speech p').outerWidth();
//     var $switcher = $(this).parent();
//     var switcherWidth = $switcher.outerWidth();
//     $switcher
//       .animate({left: paraWidth - switcherWidth}, 'slow')
//       .animate({height: '+=20px'}, 'slow')
//       .animate({borderWidth: '5px'}, 'slow');
//   });
// });

$(document).ready(function() {
  $('div.label').click(function() {
    var paraWidth = $('div.speech p').outerWidth();
    var $switcher = $(this).parent();
    var switcherWidth = $switcher.outerWidth();
    $switcher
      .fadeTo('fast',0.5)
      .animate({
        'left': paraWidth - switcherWidth
      }, 'slow')
      .fadeTo('slow',1.0)
      .slideUp('slow', function() {
        $switcher
          .css('backgroundColor', '#f00');
      })
      .slideDown('slow');
  });
});

// $(document).ready(function() {
//   $('p:eq(2)')
//     .css('border', '1px solid #333')
//     .click(function() {
//       $(this).slideUp('slow')
//         .next().slideDown('slow');
//     });
//   $('p:eq(3)').css('backgroundColor', '#ccc').hide();
// });
  


$(document).ready(function() {
  var $thirdPara = $('p:eq(2)');
  $thirdPara
    .css('border', '1px solid #333')
    .click(function() {
      $(this).next().slideDown('slow',function() {
        $thirdPara.slideUp('slow');
      });
    });
  $('p:eq(3)').css('backgroundColor', '#ccc').hide();
});

// Make clickable elements appear so on hover.
$(document).ready(function() {
  $('h2, div.button, div.label, span.more').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
});

查看图片附件

分享到：

Wordpress实现多语种版本插件 WPML2.4.2 | jQuery 限制多行字符字数的方法换成省略 ...

2012-03-01 16:30
浏览 1371
评论(0)
论坛回复 / 浏览 (0 / 1527)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Jquery 实现HTML 文本字体大小切换

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Jquery 实现HTML 文本字体 大小 切换

评论

发表评论

相关推荐

CSS3 background 分别设置多个背景图片【博主推荐】

一款基于bootstrap的datetimepicker

php/js/jquery等各种语言版本—检测终端类型和浏览器类型

博文转移到个人网站，欢迎大家访问！！！

推荐一款神器，桌面远程调试IOS网站的工具 很好很强大 支持国产！

绚丽的图片文字 跟随过渡切换焦点图设计

看一眼你就会爱上它 10种不同风格任你选

用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果

圆形的hover效果 多种style可供选择见demo

图片hover状态平滑划过过渡效果

纯css 应用使得网站各个模块切换 平滑过渡

页面滑到底端弹出提示表单

一款漂亮的滑动表单

php版本 化妆程序 给图片添加饰物

完美的 登录注册框 含漂亮的过渡、转换效果

大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动

jquery实现 购物车 信息 级联改变

LESS 一种流行的新式的动态样式语言

发现一款很酷的jquery 相片墙翻牌效果

用css或jquery方式 使div 水平、竖直均居中

最近访客更多访客>>

Jquery 实现HTML 文本字体大小切换

推荐一款神器，桌面远程调试IOS网站的工具很好很强大支持国产！

绚丽的图片文字跟随过渡切换焦点图设计

用jquery都弱爆了纯css 实现焦点图的动态绚丽效果

圆形的hover效果多种style可供选择见demo

纯css 应用使得网站各个模块切换平滑过渡

php版本化妆程序给图片添加饰物

完美的登录注册框含漂亮的过渡、转换效果

jquery实现购物车信息级联改变

用css或jquery方式使div 水平、竖直均居中