13518219792
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：
十多年的新疆网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整新疆建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“新疆网站设计”,“新疆网站推广”以来，每个客户项目都认真落实执行。
运行效果图如下：
主要代码如下：
$(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程序设计有所帮助。
全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
事件监听
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false);
全屏样式设置
在浏览器全屏的使用我们还可以进行样式设置
html:-moz-full-screen {
background: red;
}
html:-webkit-full-screen {
background: red;
}
html:fullscreen {
background: red;
}
网页设计中对许多电脑的屏幕大小有所考虑，所以大多时候，网页都是已1000个像素为标准。因此，如果你用ctrl+鼠标中键，这样会使字变大，让图片失真，这不是人TX要的效果！%D%A
你可以使用JQuery设置图片的大小来显示大图
$("img").attr("width","100"); // 设置宽度
$("img").attr("height","100"); // 设置高度
步骤一、首先打开需要修改的HTML文件。
步骤二、然后始化样式，将代码添加在style/style标签内。
步骤三、添加一个div容器，然后命名为bg-box
步骤四、背景全屏需要容器全屏，将bg-box的样式补全。
步骤五、设置完毕，图片背景以及全屏了。
