网站设计中常用的一些jq效果

只做会做网站设计不会前端是不行的,现在很多网站设计师都会精通前端CSS+jquery,但是今天要说的是是我个人在一家厦门网站设计公司中经验笔记,都是很实用的,希望能帮助网站设计者们,现在越来越多的网站运用上了Jquery技术,特别是在国外网站上Jquery运用的已经很成熟了,不紧提升了网站的精美度与用户之间的互动效果,把Jquery运用到网站的局部效果上,还能大大的提升网站页面上的体验效果。目前我们公司给大多客户网站上都有体现这个效果,下面我就为大家分享下提升网站体验效果的5个Jquery效果,都是比较知名的国内网站用来实现的效果。

第一个:淘宝网站的搜索框Jquery教程效果

大家都知道淘宝网站上搜索框实用之处就不用说了,以前的淘宝搜索框是一直固定在页面顶部的,而现在只要用户往下拉页面,搜索框用Jqery技术一直保持在页面的顶部,方便用户的快速搜索,找到想要的商品。这效果不紧可以用在搜索框上,比如导航也是可以用这效果提供体验的。

在这提供个简单类似Jquery代码效果供参考:

window.onscroll = function(){

var t = document.documentElement.scrollTop || document.body.scrollTop;

if(t>80){ //当页面下拉到大于80的时候显示下的DIV,默认是隐藏的。

$(".fdnav").css({display:"block"});

}else{

$(".fdnav").css({display:"none"});

}

}

第二个:网站侧边导航条Jquery教程效果的运用。

这个对于大多数网站是个很实用的Jquery效果,比如在线客服、快速导航、返回顶部等等。看下图的效果还不错吧!

侧边导航Jquery体验效果代码供参考:

$(document).ready(function(){

$(".wsde").mouseover(function(){//class为wsde的默认css是:position: fixed; right: 1px; width:57px; overflow: hidden;

$(".wsde").stop().animate({‘width‘:‘200px‘});

});

$(".wsde").mouseleave(function(){

$(".wsde").stop().animate({‘width‘:‘57px‘});

});

});

第三个:网站图片预加载Jquery教程效果:

很多时候网站的图片比较多,一时加载不了显示的是都是空白,为了提高用户对网站的友好,Jquery中的图片预加载功能就用上了。

html示例代码:

<img data="这里是我们要显示图片的实际地址" src="这里是一张默认显示的小图片,可以快速加载到页面。可以是所有图片使用统一的图片也可以是要显示图片的缩略图"  alt="图片名"/>

Jquery示例代码:

$(‘img[data]‘).load(function(){//运行Jquery库中的默认类

var __this__ = $(this);

var url = __this__.attr(‘data‘);

var src = __this__.attr(‘src‘);

if(url ==‘‘|| url == src)//这里判断如果图片实际地址不存在或者已经加载不处理

{

return;

}

var img =newImage();//实例化一个图片的对象

img.src = url;//将要显示的图片加载进来

if(img.complete)//如果图片已经加载存在浏览器缓存中直接处理

{

__this__.attr(‘src‘,url);//将要显示的图片替换过来

return;

}

img.onload =function(){//要显示的图片加载完成后做处理

__this__.attr(‘src‘,url);

}

});

第四个:自动验证提交表单的Jqeury效果:

大部分网站都有提交表单:如会员登录、会员注册、在线留言等。用了下面的Jquery插件,用户就能快速知道输入的信息是否合法。

第五个:网站上的select下拉菜单(二级select)美化体验Jquery效果:

这个是我本人为一公司网站制作的select下拉菜单,实际上是运用了Jquery给表单input赋值。select是用Jquery模拟出来的效果。

select下拉菜单html部分示例代码:

<div class="kscz1_1">请选择游戏</div>

<div class="kscz1_2">请选择面值</div>

<div  class="kscz1_3">

<form class="woqu" action="/e/search/index.php" method="post" onSubmit="return checkSubmit();">

<input id="proid" type="hidden" name="proid" value="">

<input id="price" type="hidden" name="price" value="">

<input type="submit" class="dianji" value="">

</form>

</div>

<div class="kscz1_1se" >

<ul id="kscz1_1se">

<li price="50,20" proid="5">大专自卫队苛夺</li> //price中的为select二级选项

<li price="70,50,30" proid="33">磊地在傜</li>

</ul>

</div>

<div class="kscz1_1pri" >

<ul id="kscz1_1pri">

</ul>

</div>

<form class="woqu" action="" method="post" onSubmit="return checkSubmit();">

<input id="proid" type="hidden" name="proid" value="">

<input id="price" type="hidden" name="price" value="">

<input type="submit" class="dianji" value="">

</form>

主要CSS样式,过其实的都不写出来了,这是两个隐藏的下拉表div样式:

.kscz1_1se {

overflow: hidden;

width: 214px;

height: 330px;

position: absolute;

border: 1px solid #E0E0E0;

left: 50%;

top: 0;

z-index: 1000;

display: none;

}

.kscz1_1pri {

overflow: hidden;

width: 94px;

height: 130px;

position: absolute;

border: 1px solid #E0E0E0;

left: 50%;

top: 0;

z-index: 1000;

display: none;

}

select下拉菜单Jquery部分代码:

<SCRIPT type="text/javascript">

$(document).ready(function(){

$(".kscz1_1").mouseover(function(){//鼠标移到select上显下拉效果

$(".kscz1_1se").css({display:‘block‘});

$("#kscz1_1se").css({display:‘block‘});

});

$(".kscz1_1se").mouseleave(function(){//鼠标移出为隐藏下效果

$(this).css({display:‘none‘});

$(this).find("#kscz1_1se").css({display:‘none‘});

});

$(".kscz1_1se li").mousedown(function(){//选择下拉中的一个选项,进行赋值,并对第二项下拉增加内容

var value = $(this).attr("price");

var value2 = $(this).text();

var value3 = $(this).attr("proid");

var pricetext=‘‘;

pricenum = value.split(",");

for(var i=0;i<pricenum.length;i++)

{

pricetext=pricetext+‘<li>‘+pricenum[i]+‘</li>‘;

}

$(".kscz1_1").html(value2);

$(".kscz1_1se").css({display:‘none‘});

$(".kscz1_1se").find("#kscz1_1se").css({display:‘none‘});

$("#kscz1_1pri").html(pricetext);

$(".kscz1_2").html(‘请选择面值‘);

$("#proid").val(value3);

});

$(".kscz1_2").mouseover(function(){//对select二级赋值

if($(".kscz1_1").text()!=‘请选择游戏‘){$(".kscz1_1pri").css({display:‘block‘});}

});

$(".kscz1_1pri").mouseleave(function(){//隐藏select二级下拉表单

$(this).css({display:‘none‘});

});

$(".kscz1_1pri li").live(‘click‘,function(){//对select二级赋值及表单input为price赋值

var value2 = $(this).text();

$(".kscz1_2").html(value2);

$(".kscz1_1pri").css({display:‘none‘});

$("#price").val(value2);

});

});

function checkSubmit(){//验证提交表单

if (document.getElementById(‘proid‘).value=="") {

alert("请选择游戏");

return false;

}

if (document.getElementById(‘price‘).value=="") {

alert("请选择充值金额");

return false;

}

}

</SCRIPT>

注:上面的代码采用到实际网站中必须加载Jquery.ja的主文件,其实现在国外很多网站运用Jquery技术,其最重要的是使用Jquery大大提高了网站用户体验度,提升网站的用户体验效果对改善网的PV也是有很大的好处。这里只是做个抛砖引玉,不紧是上面的5个,其实还有很多网站页面体验效果,都可以运用Jquery来实现更好的用户体验效果。

有什么不清楚的可以在下面留言哦!

时间: 2024-10-06 03:22:45

网站设计中常用的一些jq效果的相关文章

网页设计中常用的Web安全字体

但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1,  Arial 微软公司的网页核心字体之一,最常用的sans-serif字体,当字号很小时不容易阅读.但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代.(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一

网页设计中常用的19个Web安全字体

在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1,  Arial 微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代.(苹果系

网站制作中常用的一些网页布局

打开一个网站,首先呈现在眼前的就是网站的布局,同时好的网页布局也可以让访客更容易在网站上找到他们所需要的信息,所以网站制作初学者应该对网页布局的相关知识有所了解. 一.网页布局类型 网页布局大致可分为"国"字型.拐角型.标题正文型.左右框架型.上下框架型.综合框架型.封面型等,下面分别论述. 1. "国"字型: 也可以称为"同"字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,

B2C商城网站设计中需要注意的事情

中国电子商务的发展已经趋于成熟,商家在根据自己的需求进行 B2C网站设计时需要考虑自身的商品特性,怎样通过互联网平台扩展商品的销售?乾元坤和告诉你需要注意哪些事情? C2C平台是淘宝排名第一,B2C商城系统平台基本是天猫一家独大,市场份额一直在80%左右.这种绝对垄断的市场地位,并不是保持稳态的竞争格局,一定会发生变化;需要有一些和淘宝进行竞争的,天猫也是一样.这意味着这些B2C商城系统平台建设还有一定的竞争空间. B2C商城系统怎么获取流量呢?如果从B2C商城系统切入渠道电商,大部分是因为流量

在网站设计中非常有用的10款在线生成工具

设计和开发者社区发展飞快,以致于我们的步伐很难跟上发生在我们身边的这一切.这就是为什么我喜欢聚集最新发布的优秀资源和工具,以使我们的工作和生活更轻松.这篇文章集合了 Web 开发中会用到的优秀工具,我敢肯定这些你会在这里发现有用的工具. 您可能感兴趣的相关文章 推荐8款很棒的测试网站速度的免费工具 12款很棒的浏览器兼容性测试工具推荐 构建杀手级应用 JavaScript 工具和技术 推荐25款提高网站可用性和转化率的工具 2012年最佳 Web 前端开发工具和框架 CSS Tricks Wit

网站设计中文字排版的技巧

用户会在网上阅读到大量的新闻及各类文章,特别是网络小说,这些页面展示的主体就是通篇大段的文字.对于这种看似简单的文字堆砌的页面,有没有人抱怨过:“这样的页面还需要出效果图啊?”作为网页设计师的你是怎样处理这样的界面的? 是习惯性的使用宋体字或者微软雅黑? 是直接设为12px或者14px的字号? 你有想过为什么要使用这种字体.字号吗? 你有考虑过文字排布与阅读效率的关系吗? 你的页面背景会影响到用户的浏览舒适度吗? 我们将从以下几个方面来做具体分析:字体.字号.行长.间距.背景. 字体.字号 字体

算法6:设计中常用的武器-栈

算法就是设计,而设计无处不在,故算法无处不在,但这是废话,关键还是,要把握设计的套路,如果能发明套路就更不得了.设计套路中,有一个套路,是定制一个数据结构,就相当于定制出一个专用的厉害武器,然后用于解决特定的问题. 为了解决不同的问题,你可以定制出不同的数据结构.什么是数据结构?就是数据的组织结构,有特点的结构.在诸多数据结构中,有一些是通用的,也就是可以用于很多问题场景,因此它也是常用的. 常用的数据结构中,有一个结构,叫作"栈".栈,能独立作为一个数据结构,在于它有自己的特点--由

网页设计中常用的CSS命名规则整理

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 或 wrap 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:foote

网站建设中常用的JS代码段落

1.屏蔽左右键 这个不介绍了. <script language="JavaScript"> document.oncontextmenu=new Function("event.returnValue=false;"); document.onselectstart=new Function("event.returnValue=false;"); </script> 2.jquery应用检测 什么意思呢?就是在CDN无