QQ 1640076782

2015年07月31日

网站下拉顶部固定不动一直悬浮在最上面

Filed under: 英语网站设计 — 标签:, — lifengwu @ 3:57 下午

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

2015年05月29日

几款不错的jQuery 社交网络分享插件

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:10 上午

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

2015年03月31日

通过CSS3制作网站面包屑导航效果

Filed under: 英语网站设计 — 标签:, — lifengwu @ 7:39 上午

面包屑导航对我们来说并不陌生,能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面,在没有了解CSS3以前,一看到这个效果我们肯定认为这个要通过PS做成图片后才能实现这种效果,但是这需要做多张图片才能实现这种效果,下面我们来看看能过CSS3如何来实现这个效果: Html源码: <div id=”mbmenu”> <ul> <li><a href=””>Step1</a></li> <li><a href=””>Step2</a></li> <li><a [...]

2015年01月30日

Prototype 与 JQuery 产生冲突的解决方法

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 6:28 上午

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

2015年01月26日

两个select下拉框,如何实现一个可选时,另一个禁止选择的简单js

Filed under: 英语网站设计 — 标签:, — limeng @ 9:55 上午

同一产品两种属性,只能选择其中一种属性,不可以同时选择,例如下图 如果我选择了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的下拉框就可以下拉选择。具体实现如下图 [...]

2014年12月31日

superslide 实现选项卡内容手动、自动滚动

Filed under: 英语网站设计 — 标签:, — lifengwu @ 10:49 上午

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

jquery 实现不错的自适应导航

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 6:53 上午

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

2014年11月28日

jQuery实现图片延迟加载

Filed under: 英语网站设计 — 标签:, — limeng @ 7:14 上午

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

jQuery 控制内容部分显示与隐藏

Filed under: 英语网站设计 — 标签:, — lifengwu @ 5:57 上午

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

2014年11月24日

如何解决jquery不同版本之间的冲突问题

Filed under: 英语网站设计 — 标签:, — limeng @ 6:44 上午

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

2014年10月30日

各种js特效

Filed under: 英语网站设计 — 标签:, , — limeng @ 1:40 上午

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

2014年10月27日

jQuery购物车点击加减,数量随之变化,商品总价也随之变化

Filed under: 英语网站设计 — 标签:, — limeng @ 6:59 上午

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

2014年10月23日

jQuery特殊图片切换效果

Filed under: 猪哥,英语网站设计 — 标签:, — limeng @ 1:45 上午

jQuery图片切换有很多种方式,多数都是一张一张的轮播,切换,这里这个方法是指一组图片和文字轮播,看下图: 主要效果为,右侧图片先从中间像两侧缓慢出来,然后停顿几秒,左侧图片和文字,按钮再从右到左缓慢出来。这种效果十分适用于衣服,鞋子,包包之类的网站,一侧展示模特效果图,另一侧展示产品,产品下面附上型号标题。下面我们来看看是如何实现这种jQuery特殊图片切换效果的。 主要是有两个图片框架,当出来上面那组图片的其中一张时,其他该组图片隐藏起来,既是display: none;对应到下面那组样式为display: list-item的图片,具体的js代码如下图 var idx_timer=setInterval(‘idx_photo()’,5000); idx_timer=setInterval(‘idx_photo()’,5000); 这两个主要是控制图片轮播速度的,一个是刚刚加载进去时候的速度,一个是进入后图片的轮播速度,建议填一样的 $(proImg).parents(‘li:first’).show(idx_pro_mask); [...]

2014年09月28日

常用的几种特殊简单的CSS,js样式

Filed under: 猪哥,英语网站设计 — 标签:, — limeng @ 8:52 上午

下面是几种比较特殊的CSS,js样式 第一种:去掉a外面框的虚线(一般IE,火狐点击后会出现) 我们一般使用a的时候,IE里面默认a外面都会用虚线包围,这样比较影响美观,下面就是去掉默认的虚线css样式 a { color:#444; text-decoration:none;} a:focus { outline:0;} [...]

2014年09月26日

带关闭按钮、点击内容区域外都可关闭的弹出层

Filed under: 英语网站设计 — 标签:, — lifengwu @ 9:49 上午

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

2014年09月10日

QQ,阿里旺旺,skype,MSN等在线代码

Filed under: 英语网站设计 — 标签: — limeng @ 1:30 上午

QQ在线客服代码 <a href=”http://wpa.qq.com/msgrd?v=3&uin=111111&site=qq&menu=yes” title=”报名咨询”>报名咨询</a>中间111111的地方填写QQ号,QQ代码在网上也有很多生成器,填入QQ号,然后获取代码,直接放在网页里面,此方法不需要加好友就可发起临时聊天。 阿里旺旺代码 国内版:在旺遍天下就可以填入旺旺号生成旺旺代码 <a target=”_blank” href=”http://amos.im.alisoft.com/msg.aw?v=2&uid=onepound&site=cntaobao&s=1&charset=utf-8″ > <img [...]

2014年08月29日

jquery 实现select菜单样式美化

Filed under: 英语网站设计 — 标签: — lifengwu @ 5:54 上午

select下拉菜单效果对我们来说都很熟悉,我们都知道可以通过CSS来修改input文本框、按钮、文本域等很多表单元素的样式,但是要改变select菜单的样式却是不可以的,那如果必须要修改它的样式,怎么样办呢?下面我们就来看看通过jquery是如何实现这个效果的: 这个效果实际上是通过jquery模拟select效果,从而达到能过能css控制其样式 html代码: <form action=”” method=”post”> <div id=”divselect”> <cite>Price Low [...]

Jquery 响应式搜索框,鼠标经过/离开时,自动显示/隐藏搜索框

Filed under: 英语网站设计 — 标签:, — lifengwu @ 3:36 上午

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

2014年08月15日

jQuery简单的两种点击弹出层方法

Filed under: 英语网站设计 — 标签: — limeng @ 2:13 上午

点击弹出层主要是当点击图片或文字等时,弹出一个框架(web弹窗) 我这次主要是在一个教育培训网站中用到的,效果是点击视频时,弹出视频播放窗口,视频用的是外部链接,用的是方法二 点击弹出层方法一:此方法比较简单,也没有加载太多的js,这是优点,但是也有缺点,由于这个方法是获取div的id做出来的,如果网站需要多个弹出窗口时,就需要换id名称使之不重复,比较麻烦,一般不采用这个方法。 代码: 效果如下图 弹出窗口样式都可以随意修改 点击弹出层方法二:主要适用于点击图片,视频后弹出放大的图片和播放视频,因为这种方法主要是在图片,视频的a href中填写链接,这种方法可适用于网站出现多个弹出窗口,可循环使用。 代码如下图 需要加载几个js和一个弹出层的样式文件 [...]

2014年07月31日

Jquery 可以自动伸缩的搜索框

Filed under: 英语网站设计 — 标签:, — lifengwu @ 4:06 上午

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

Older Posts »