在网站内容比较多的时候，通常情况下如果要再回到顶部，就需要动用鼠标直接滚动到最上面，这样对用户来说并不是十分方便，尤其是在网站内容比较多的时候，这个时候很多人都会想到网站下拉的时候顶部固定不动这个效果，那要怎么实现呢 首先这必须要有JQuery的配合才会有效果，因此首先我们需要引入JQuery库，下面我们以1.7.2的jquery版本为例： <script src=”js/jquery-1.7.2.min.js”></script> 其次还需要引入这样一段JS代码： 其中红圈部分是可以要据实际需要来做修改的，我们想让哪部分内容一直浮动固定，就填写对应的元素ＩＤ就可以了，可以只是导航，也可以整个网站头部的内容，本例中是让整个头部的内容都固定浮动的 正常状态，滚动条在最顶端的时候： 下拉到网页中间部分之后的状态： 我们发现头部一直是在最上方浮动的，方便用户快速切换到自己想要的目录，这是目前我使用的方法 如果你有更好的方法，欢迎交流！

近年来社交媒体越来越流行了，能够分享音乐、视频、图像甚至是其他的 docs 文档到互联网上去，这样子还能够提高页面的点击量。通常，一些社交媒体插件都能允许你的用户分享你网站上的内容到其他的社交平台，比如说这些社交平台 上：Facebook, Google, Twitter, Pinterest等等。 这里我们选择了几款非常不错的 jQuery 社交分享插件。只需要少量的代码，就可以将它们轻松的集成到你的网站上，并且能够帮助你的访问者分享网站上的内容。 [...]

不久前做的一个英语外贸网站的一个表单通过jquery实现了鼠标点击文本框时里面的提示文字自动消失的效果，html页面做好以后，其他页面效果都正常，但是唯独产品详细页这个效果却出不来，仔细研究测试了好久，才发现只要去掉prototype.js，效果就能恢复正常，但是prototype.js又是详细页中产品图片特效中必不可少的，后来才知道是因为prototype.js与jquery产生了冲突导致的，那该如何解决呢 首先，将jquery.js放到prototype.js前面，而且还必须在jquery.js后面将$变量重命名。这两个缺一不可！ 正确的顺序，以我自己实际中运用到的为例： 测试的其他两种顺序： 经测试这两种顺序都只能实现其中的一个效果，所以只能是第一种顺序，而且 <script type=”text/javascript”> var jQuery=$; </script> [...]

同一产品两种属性，只能选择其中一种属性，不可以同时选择，例如下图 如果我选择了Highlight Color的内容，就不允许选择Mixed Color的内容，一般这种情况，我们如何利用简单的js实现呢？ 我们知道，禁止select下拉是disabled，具体代码如下 js的原理十分简单，if(document.getElementById(“a”).value!=”selected”)，如果id为a的select下拉框里面的值不是selected的时候，也就是有选择时 document.getElementById(“b”).disabled=”disabled”，id为b的select下拉框为disabled，即禁止下拉， else { document.getElementById(“b”).disabled=””;否则id为b的下拉框就可以下拉选择。具体实现如下图 [...]

通过jquery让图片或者文字左右自动或手动滚动、选项卡自动切换，这些效果对于我们来说并不陌生，外贸网站建设过程中会经常用到，那如果选项卡自动切换而且每个选项卡的内容还需要能独立的滚动，该如何实现呢？下面我们来看一下通过superslide这个jquery插件来实现这个效果： 既然用到了superslide插件，那么jquery.superslide.2.1.1.js当然是必不可少的，对这个插件不了解的可以在网上搜索一下详细了解，在这里就不做详细介绍了。 源码： <div id=”hprod” class=”width-center pad”> <div class=”slideGroup” style=”margin:0 [...]

随着智能设备的普及，移动网络的发展，手机网民已经越来越多，为了给手机网民更好的浏览体验，越来越多的网站能够自适应手机屏幕，而导航是每个网站都必不可少的，清晰、明了的网站导航能够让浏览者快速找到他们想要的内容，但由于手机屏幕有限，所以留给导航的位置也就不能太多，如何让导航既清晰又不至于占用太多位置，下面我们来看看通过jquery 实现的自适应导航： 首先我们需要引入jquery.min.js，此外还需要 <script type=”text/javascript” src=”js/pgwmenu.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(‘.pgwMenu’).pgwMenu(); [...]

对于专门的图片网站或是素材网站，一个页面可能会有很多图片，这个当用户打开网站时，图片会加载的十分慢，用户体验也会很差。jQuery实现图片延迟加载原理就是先加载一屏内的图片，当拉旁边的滚动条时，再依次加载下面的图片，这样就避免了用户需要等所有图片加载完，再浏览。 jQuery实现图片延迟加载方法一 <script type=”text/javascript”> <!–//–><![CDATA[//><!-- var images = new Array() [...]

在设计制作外贸网站过程中，有时候需要将某一个板块的内容不全部显示，只显示一部分，这个我们首先想到的是通过程序来截取，这个当然是可以的，不过如果想要显示全部的内容就需要跳转到一个新页面，下面我们来看看通过jQuery实现内容灵活的显示与隐藏！ 比如默认情况下我们只需要显示七条数据，当点击显示全部的时候才会全部显示出来，然后也可以灵活隐藏。 默认只显示七个品牌 ，点击显示全部的时候才会把所有的品牌都显示出来！ 显示全部以后也可以灵活返回默认状态！ 在有些外贸购物网站中也可能会用到： 默认显示6条数据，超过6条自动隐藏！ 在点击全部显示的时候才会显示所有的内容！ 实现这个效果，jquery库当然是必不可少的，jquery.js可以直接在网上下载，此外我们还用到一个js <script [...]

我们都知道当网页中所需要的jquery效果多了，很容易造成jquery不同版本的冲突问题，即有些效果实现不了，这是因为有的效果需要加载这个版本的jquery，而可能另一个效果又需要加载另一个版本的jquery框架，每个框架的都是以$對象命名的，所以便造成了冲突，那么如何解决jquery不同版本之间的冲突问题呢？下面我来说说有个快速及简单的方法能令它们共存。 <script type=”text/javascript”> var j = jQuery.noConflict(true); </script> 其实也就是把$让给第一个jquery版本用，而下面那个版本的换成了j，然后把需要加载jquery版本框架的js里面的$全部替换成j，那么在两个加载的时候，就能各自使用各自的jquery框架了。 如果您有更好的，更简单的方法，可以互相沟通学习。

1.文档预览效果，也就是跳转到了另一个页面。 <script language=”javascript” type=”text/javascript”> location.href=”Default.aspx”; </script> Default.aspx为同级目录下跳转到的文件 2.上传文本域代码 <div style=”margin-top:14px;”> [...]

购物网站中，在加入购物车时，会出现类似于这种选择商品数量的按钮，不仅可以自己手动改变框框里面的数字，而且点击减号时，数量会随着点击次数逐渐减小，最小是0，同理按加号，数量就会随之增加。随着数量的变化，商品总价也会自己随着变化。如下图 代码如下 <script> $(function(){ $(“.add”).click(function(){ var t=$(this).parent().find(‘input[class*=text_box]‘); t.val(parseInt(t.val())+1) setTotal(); }) [...]

弹出层这个效果是在外贸网站制作过程中经常会用到的一个小效果，通常的效果是弹出以后要么有一个按钮点击关闭，要么是点击弹出层这外的区域自动关闭，那么哪果要这两个效果同时实现我们该怎么做呢，下面我们就来看一看通过jquery实现有关闭按钮而且点击内容区域外的任何地方都可以自动关闭的弹出层！ 既然是jquery，首先当然得引用jqery库，这个就不多说了，其次我们还需要引用另外一个js——jquery.reveal.js，有需要测试的朋友可以直接在网上搜索下载，由于代码太多，在这里就不贴出来了。 弹出层的代码： <div id=”myModal”> test <a>×</a> </div> div id=”myModal”> [...]

在外贸网站建设中，搜索是每个网站必备的一个功能，尤其是英语购物网站更是如此，因为购物网站的信息量比较大，而大多数的搜索都要求客户能一眼找到，这就导致一个搜索就需要占据一个较大的位置，有时候客户需要在抢眼的位置显示其他更重要的信息，那么搜索又不能没有，这时通过jquery实现的响应式搜索就能完美解决这个问题，占据较小的位置，客户需要时就显示出来，客户不需要时隐藏，下面我们来看看实现方法： 首先我们需要引用jquery.js,这个可以直接在网上下载，不多说； <div id=”masthead_search”> <form id=”header-search-form” method=”get” name=”search” action=”/s/”> <input [...]

通常情况下，外贸网站中的搜索功能都是由搜索框各一个搜索按钮组成，我们做的最多的就是给搜索框或按钮一个不同的CSS样式，让其与整个网站的风格匹配。便有时候为了让网站整体风格匹配，默认情况下会将搜索框隐藏，只出现搜索按钮，在浏览者需要搜索的时候搜索框才会出现，那么这样的功能该如何实现呢，下面我们来看看实现这个效果的方法，当然Jquery是肯定会用到的： 默认情况下搜索框和搜索按钮肯定都是必不可少的： <div> <div id=”sb-search”> <form> <input placeholder=”Enter your search [...]