时尚网站
欢迎来到我们的时尚网站!这个网站提供了最新的时尚资讯、潮流趋势和购物指南,让您在时尚领域保持领先。
一、页面加载动画
在页面加载时,我们使用了一个淡入淡出的动画效果,以增强用户体验。当页面宽度大于1024像素时,会显示一个欢迎logo,持续2秒钟后消失。这不仅提高了用户对网站的认知度,还为他们提供了一种友好的欢迎体验。同时,为了避免过于频繁的弹出广告,我们在第一次播放后将该动画设置为不可见。
$(function(){
$('.logo-welcome').hide();
if(!$.cookie('phone_logo_played') && $(window).width() > 1024){
$('body').css('overflow','hidden');
$('.logo-welcome').height($(window).height()).show().delay(2000).fadeOut( function(){
$('body').css('overflow','auto');
});
$.cookie('phone_logo_played',1,{ expires:1 });
}
});
二、搜索框设置
在首页顶部,我们隐藏了搜索框,以减少杂乱感并优化页面布局。当用户需要进行搜索时,可以通过点击页面顶部的搜索图标或使用键盘快捷键来触发搜索功能。这样可以提高用户的搜索效率,让他们更快地找到所需信息。
.index-top-search {display: none;}
三、图片控制按钮
在展示图片时,我们使用了owl-theme
库来创建一个简洁的轮播图。为了确保图片加载速度,我们设置了图片控制按钮的透明度为70%。同时,当鼠标悬停在按钮上时,按钮会变得更明显,方便用户进行操作。
.owl-theme .owl-controls .owl-buttons div {filter: Alpha(Opacity=70); opacity: 0.7;}
.owl-theme .owl-controls.clickable .owl-buttons div:hover {}