2 hercules135 hercules135 于 2014.10.21 00:51 提问

请问网页的视差背景如何实现?

不用html5是否可以实现视差背景效果?

效果类似:http://gmgard.us/

不过他用了新标签,能不能不用这个来实现同样的 视差背景?

1个回答

showbo
showbo   Ds   Rxr 2014.11.18 16:45

他这个不是html5实现的,只是用js设置了背景图片的位置而已

body{background-attachment: fixed;background-repeat: no-repeat;background-image: url("http://static.gmgard.us/Images/banner7_1440.jpg");}
(function () { function bgpos($e, x, y) { if (x && y) $e.css('background-position', x + ' ' + y); return $e.css('background-position').split(' '); } if (window.screen.availWidth > 1024) { var $h = $('html'), $b = $('body'), wrapper = $('.totop-wrapper'), hoffset = 0, _adjustbg = function (pos) { bgpos($h, bgpos($h)[0], (pos + hoffset) + 'px'); bgpos($b, bgpos($b)[0], pos + 'px'); }, adjustbg = $.noop; $(window).scroll(function () { var top = $(window).scrollTop(); if (top > 400 && wrapper.hasClass('hidden')) { wrapper.removeClass('hidden'); wrapper.addClass('active'); } else if (top <= 400 && wrapper.hasClass('active')) { wrapper.addClass('hidden'); wrapper.removeClass('active'); } adjustbg(-top * 0.05); }).on('initoffset', function () { adjustbg = localStorage['parallax'] == 'off' ? $.noop : _adjustbg; hoffset = parseInt(bgpos($h.removeAttr('style'))[1], 10); $(this).trigger('scroll'); }).on('resize', function () { $b.removeAttr('style'); $(this).trigger('scroll'); }).trigger('initoffset'); } })()
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!