Some print.
Some print.

Jquery应用-全屏切换.

By19.Published on2007-10-3.

Jquery记录.

WORDPRESS升级到2.3后重做了皮肤，并且从prototype转为jquery，BLOG中用了jquery很多初级效果，这里提供一个全屏切换，有助我们在发表文章时候需要切换全屏来看的内容（比如代码），如下：
（注：这里用了jQuery.noConflict();，将$方法用jQuery代替。）

相关JS(点击上方按钮切换全屏观看):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

jQuery.noConflict(); //将$方法用jQuery代替
function fontBigger(elt)
{
	//var work = jQuery(elt).parent().next(); //或者父目录的下一个目录
	var work = jQuery("div[name='"+elt+"']");
	work.each(function(){
		jQuery(this).html("<span class='fontwrap' style='font-size:100%'>"+jQuery(this).html()+"</span>");
		var wrap=jQuery(this).children('.fontwrap');
		var m = wrap.css('fontSize').match(/(d+(?:.d+)?)(.*)/);
		wrap.css('fontSize', (1.2 * parseFloat(m[1])) + m[2]);
	});
}
function fontSmaller(elt)
{
	//var work = jQuery(elt).parent().next();
	var work = jQuery("div[name='"+elt+"']");
	work.each(function(){
	jQuery(this).html("<span class='fontwrap' style='font-size:100%'>"+jQuery(this).html()+"</span>");
	var wrap=jQuery(this).children('.fontwrap');
	var m = wrap.css('fontSize').match(/(d+(?:.d+)?)(.*)/);
	wrap.css('fontSize' , (parseFloat(m[1]) /1.2) + m[2]);
	});
}
function texteOnly(elt,th)
{
	//var texte = jQuery(elt).parent().next(); 
	var texte = jQuery("div[name='"+elt+"']");
	jQuery("body").toggleClass('onlytext_wrapper'); //BODY的CLASS＝onlytext_wrapper
	if (this['backTextOnly']) { 
		texte.removeClass("onlytext"); 
		texte.addClass("ottextq"); //全屏用CLASS=onlytext
		jQuery(th).parent().insertBefore(jQuery("#marktextonly")).after(texte);
		jQuery("#marktextonly").remove();
		jQuery('body').children().show();
		this.backTextOnly = false;
		return;
	}
	//点击全屏
	texte.removeClass("ottextq"); //返回时候清除CLASS
	texte.addClass("onlytext"); //全屏用CLASS=onlytext
	jQuery(texte[texte.length-1]).after('<div id="marktextonly">marktextonly</div>');
	jQuery(th).parent().prependTo("body").after(texte).siblings().slice(texte.length).hide(); 
	this.backTextOnly = true;
}

引入这个JS之后只要在你发表文章的时候加入3个按钮来对应需要全屏DIV的NAME就行了。比如下面的全屏name=”glll”的DIV。

1
2
3
4
5
6
7
8

<div>
<button title="增加字号" onClick="fontBigger('glll')">加大字号</button>
<button title="减小字号" onClick="fontSmaller('glll')">减小字号</button>
<button title="全屏-页面-切换"  onClick="texteOnly('glll',this)">全屏-页面-切换</button>
</div>
<div name="glll">
需要全屏的内容
</div>

注意自己写一下显示需要的CSS，jquery版本1.13＋。以后会更多学习jquery。

{ Tags: , }

(查看之前文章)    »    |    (查看之后文章)    »    |


这篇文章发布于 2007年10月3日，星期三，5:41 上午，归类于 Diary。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。



One Response to “ Jquery应用-全屏切换. ”

  1. 泥鳅 说： ( Has commented 1 times in LL19.com )
    2008-01-24 于 2:04 下午

    这是我最喜欢的游戏…….喜欢的不得了~…..呵呵

    回复 |  回复并邮件

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。