重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
wordpress企业站仿站产品图片滚动效果是通过设置动画实现的,设置想要的动画之后就可以图片滚动了
创新互联是一家以成都网站建设、网页设计、品牌设计、软件运维、成都网站营销、小程序App开发等移动开发为一体互联网公司。已累计为成都围栏护栏等众行业中小客户提供优质的互联网建站和软件开发服务。
本文接着来告诉你如何让你的整个侧边栏或者侧边栏的指定某个模块在页面滚动的时候随着窗口一起滚动。听起来是不是很炫呢。滚动效果,相信大家已经见过太多,无外乎就是加载一个js特效。开始之前为大家介绍一下侧边栏的构成部分,因为本文采用js特效可以具体到侧边栏某模板(比方说A)到达顶部时,指定模块(比方说B)开始随页面滑动。侧边栏是怎么样的构造侧边栏可以通过小工具或者自行编辑sidebar.php代码来完成,模块布局灵活,一般包括近期文章,近期评论,标签云等等等。下面就是一个常见的侧边栏结构,模块id是我自行编写的,方便大家辨识。...//近期文章 ...//热门文章 ...//标签云 ...//近期评论 ...//连接表 上面就是一个简单的侧边栏构造,注各个模块的id,在下一步滚动代码中将得到对应。如何让侧边栏滚动起来下面就以热门文章、标签云两个相邻模块作为指定滚动模块,来说明指定模块如何实现随窗口滑动。varrollStart = $('.recentcomments'), //近期评论模块到达浏览器顶部时,指定模块开始滚动rollOut = $('.recentcomments,.blogroll'); //近期评论以下模块隐藏包括最新评论,指定模块显现rollStart.before(''); //这个可以不用修改,与下面保持一致varoffset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(), rollSet = $('.hotposts,.tagcloud'); //指定滚动的模块idobjWindow.scroll(function() { if (objWindow.scrollTop() offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.rollbox');//注意与上面的保持一直,不用做修改。 } rollOut.fadeOut(); rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400); } else { rollOut.fadeIn(); rollBox.hide().stop().animate({marginTop:0},400); } });你可以将其粘贴到主题js文件中,也可以用...将其括起来放置到header头文件中。代码说明:随着网页滚动条的滑动,当近期评论模块到达浏览器顶部,近期评论以下的模块包括近期评论隐藏消失,指定模块热门文章和标签云随即显示,开始随窗口滚动。此处代码以最新评论模块为临界点,过了此临界点指定模块显现开始滚动。代码中模块的id一定要和侧边栏sidebar.php模块的id保持一致。请结合代码中的说明理解。注明:指定滚动模块整体高度不要超过浏览器视窗的高度,否者会无限向下延伸。好了,就这样吧。0
在CSS文件中添加:
body{
background-image:url("URL");
background-position:100% 0%;
background-repeat :no-repeat;
background-attachment:fixed;
}
url位置写你的背景图片位置,可以是绝对地址也可以是相对地址。
position是定义位置,可以写具体位置,也可以使用left.right或者center或左右中。
repeat是重复方式,可以不重复,或者垂直重复、水平重复或者全部重复。
background-attachment:fixed;是用来固定图片不随鼠标滚动。