jquery全屏代码,html5全屏

jQuery实现带滚动导航效果的全屏滚动相册实例

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的图片

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的图片

var

$currImage

=

$('#st_main').children('img:first');

//加载当前的图片

//同时显示导航的项

$('img').load(function(){

$loader.hide();

$currImage.fadeIn(3000);

//滑出导航

setTimeout(function(){

$list.animate({'left':'0px'},500);

},

1000);

}).attr('src',$currImage.attr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$list.children('li.album').each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elem.find('.st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapper.children(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbs.find('img').length

*

183;

$thumbs.css('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$list.find('.st_arrow_down').live('click',function(){

var

$this

=

$(this);

hideThumbs();

$this.addClass('st_arrow_up').removeClass('st_arrow_down');

var

$elem

=

$this.closest('li');

$elem.addClass('current').animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$this.parent().next();

$thumbs_wrapper.show(200);

});

$list.find('.st_arrow_up').live('click',function(){

var

$this

=

$(this);

$this.addClass('st_arrow_down').removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的图片

$list.find('.st_thumbs

img').bind('click',function(){

var

$this

=

$(this);

$loader.show();

$('img

class="st_preview"/').load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main').children('img:first');

$this.insertBefore($currImage);

$loader.hide();

$currImage.fadeOut(2000,function(){

$(this).remove();

});

}).attr('src',$this.attr('alt'));

}).bind('mouseenter',function(){

$(this).stop().animate({'opacity':'1'});

}).bind('mouseleave',function(){

$(this).stop().animate({'opacity':'0.7'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$list.find('li.current')

.animate({'height':'50px'},400,function(){

$(this).removeClass('current');

})

.find('.st_thumbs_wrapper')

.hide(200)

.andSelf()

.find('.st_link

span')

.addClass('st_arrow_down')

.removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outer.width();

//移除滚动条

$outer.css({

overflow:

'hidden'

});

//查找容器上的最后一张图片

var

lastElem

=

$inner.find('img:last');

$outer.scrollLeft(0);

//当用户鼠标离开菜单的时候

$outer.unbind('mousemove').bind('mousemove',function(e){

var

containerWidth

=

lastElem[0].offsetLeft

+

lastElem.outerWidth()

+

2*extra;

var

left

=

(e.pageX

-

$outer.offset().left)

*

(containerWidth-divWidth)

/

divWidth

-

extra;

$outer.scrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

相关问答

Q1: 请问，怎么用JQuery监听html5 中video 标签的全屏按钮？

这个可以检测 videoWidth 和 videoHeight 这两个属性是否等于自己创建的的属性，不等于则是全屏。

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。

简要介绍

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jouml;rn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。

事件机制

我们大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写 "fn()",使用jquery可以使javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。

Q2: jquery下拉全屏菜单怎么做

使用jQuery配合Superfish制作下拉菜单需要具备以下几个参数

1、项目中需要有jQuery版本库；

2、下载Superfish插件——Superfish；

3.需要把上面两个js引入你的项目中

导入jQuery库和Superfish插件

script type="text/javascript" src="js/jquery.min.js"/script script type="text/javascript" src="js/superfish.js"/script

为了让菜单一个默认的样式，大家还可以到superfish下载superfish.css样式文件，可以直接调用

link rel="stylesheet" href="css/superfish.css" /

Q3: 怎么用jQuery/HTML/Div+CSS按浏览器屏幕大小自适应布局？

少用 JS 多用 CSS, 提升运行效率. 另外 resize 事件当用鼠标拖放窗口大小时, 触发非常频繁, 谨慎使用.

建议 body 下 布局一个 DIV, 这个DIV 的 CSS 可以这样处理:

{

    position: absolute;

    left:0px;

    right:0px;

    top:0px;

    bottom:0px;

    overflow:auto;

}

然后再在这个 div中进行布局, 子div可以用 100%相对布局, 页面宽度就自动撑开了.

另外一种常用布局是用 table 设置宽度为100%进行布局, 不过有很多局限, 用的少了.

Q4: jquery怎么实现当前页面按钮点击全屏，点击退出全屏？

var fullscreen=function(){

elem=document.body;

if(elem.webkitRequestFullScreen){

elem.webkitRequestFullScreen(); 

}else if(elem.mozRequestFullScreen){

elem.mozRequestFullScreen();

}else if(elem.requestFullScreen){

elem.requestFullscreen();

}else{

//浏览器不支持全屏API或已被禁用

}

}

var exitFullscreen=function(){

var elem=document;

if(elem.webkitCancelFullScreen){

elem.webkitCancelFullScreen(); 

}else if(elem.mozCancelFullScreen){

elem.mozCancelFullScreen();

}else if(elem.cancelFullScreen){

elem.cancelFullScreen();

}else if(elem.exitFullscreen){

elem.exitFullscreen();

}else{

//浏览器不支持全屏API或已被禁用

}

}

需要注意，由于安全限制，需要由事件触发fullscreen，比如绑定到某按钮的单击事件上。直接在控制台调用可能无效。

IE的话可能不支持全屏API，原因大家都懂，在最后的else里面是提示还是使用window.open来实现你可以自己决定

有问题请追问。

Q5: js或者jquery实现页面中的一个div全屏

1、引入外部jquery文件

比如：

script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"/script

2、点击按钮时的JQuery代码

$(document).ready(function () {

 $("#go").click(function () {       

 /*属性*/       

 $("#go2").css({ "position": "absolute", "text-align": "center", "top": "0px", "left": "0px", "right": "0px", "bottom": "0px", "background": "red", "visibility": "visible", "filter": "Alpha(opacity=90)"

 });       

 /*高为屏幕的高*/       

 $("#go2").css({           

     height: function () {           

         return $(document).height();       

     },           

     width:"100%"        

 });    

});

});

3、html页面代码

asp:Button ID="go" runat="server" Style="width: 380px; position: absolute; top: 249px;left: 425px; background-color: Green; height: 65px;" Text="后台执行程序，前台遮盖，运行完毕后自动消失" /

div id="go2"

 正在提交数据...

/div