QQ 1640076782

2014年07月29日

jQuery三种常用选项卡

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

鼠标点击切换选项卡 鼠标点击才会切换,划过没有任何效果 function selectTag(showContent,selfObj){ // 操作标签 var tag = document.getElementById(“tags”).getElementsByTagName(“li”); [...]

2014年07月28日

让文字自动缩短的Jquey 插件- Ellipsis

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

这个插件允许缩短您的文字,如果它很长的话。原来的文本可以通过鼠标悬停再完一显示出来。这是一个简单但非常有用的插件 下面我们来看看使用这个插件的效果,正常的: 引入这个插件之后: 鼠标经过时候和效果: 因为是插件,引入Jquery当然是必须的,这里需要首先引入jquery库jquery.js,还需要引入这个插件的ellipsis.js 最后还需要调用才会有效果的,调用代码: <script> (function($) { $(“.first-text”).ellipsis(30); [...]

2014年07月25日

jQuery 几种常见的滚动

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

1. 带箭头左右滚动-缓动 不限制图片数 function $get(id){return document.getElementById(id)}; //不可少 var MarqueeDiv2Control=new Marquee(“MarqueeDiv2″); [...]

2014年07月19日

jQuery几种常见导航制作

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

1. 点击折叠,不可自动折叠树形导航 鼠标点击加号,上面已经展开的子目录不会自动弹回去 js树形导航菜单制作点击展开收缩二级菜单 function getObject(objectId){ if(document.getElementById && document.getElementById(objectId)){ return [...]

2014年07月2日

jQuery头部固定,不随滚动条滚动的代码

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

1.网页头部部分不随滚动条而滚动,并且不会出现跳动的情况,兼容主流浏览器 window.onscroll=function(){ if ($(document).scrollTop() > 100) { //$(“#pf_nav”).show(); $(“.pf”).addClass(‘float’); }else{ [...]

2014年06月30日

外贸网站建设过程中常用Jquery小技巧

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

1、禁止右键 有些时候,客户需要禁用右键单击功能,以加大他人另存图片的难度。使用此代码,可以在网页上禁用鼠标右键点击。 代码如下: $(document).ready(function() { //catch the right-click context menu [...]

2014年06月28日

Jquery jcarousellite.js 图片自动滚动效果

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

对于常做外贸购物网站的人来说,jcarousellite.js对我们来说并不陌生,因为在产品详细页我们会经常用到这个js来展示产品的细节图。通常情况下,如果产品的细节图过多,我们会通过鼠标左右点击来展示更多的图片,那如果要想所有的细节图都自动滚动该如何来实现呢?其实只要我们理解了jcarousellite.js的各项参数的实际含义,实现起来就相对容易了!首先我们来看看它的各项参数的作用。 参数说明: btnPrev string 上一个按钮的class名, 比如 btnPrev: “.prev” btnNext string [...]

2014年05月30日

纯CSS实现立体文字效果

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

通常情况下,要想实现立体字效果,我们最先想到的肯定是通过PS做成图片,现在我们来看看直接通过CSS实现立体文字的效果。主要是利用text-shadow特性实现效果。 html的全局设置: body{ background-color: #111; } @import url(http://fonts.googleapis.com/css?family=Dosis:500,800); .text { [...]

2014年04月28日

jQuery 实现文字弧形/扇形/圆形排列

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

在网站设计过程中,有时会将文字呈弧形/扇形/圆形排列,这个时候我们用的最多的就是PS里面文字变形工具,一串文字可能变成弧形/扇形/圆形排列等形状,也可以变成波浪形等,现在我们来看看直接通过jQuery将网页里面的文字变成不同的形状: 实现这样的效果,jQuery当然是必不可少的, <script src=”bjs/jquery.min.js”></script> <script src=”bjs/plugins.js”></script> <script src=”bjs/circletype.js”></script> <script> $(‘#demo1′).circleType({radius: [...]

2014年02月27日

Jquery中 mouseout 和 mouseleave 的区别

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

通过jQuery实现鼠标悬停效果时通常会用到mouseover和mouseout这对事件,那么当鼠标离开元素时所触发的mouseout与mouseleave的区别,表面上看这两者的意思是差不多,但实际上是有很大区别的。 mouseout() 方法 当鼠标指针从元素上移开时,发生 mouseout 事件。该事件大多数时候会与 mouseover 事件一起使用。 mouseleave() 方法 [...]

2013年12月30日

CSS实现自动适应宽度的半透明二级导航菜单

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

最近的一个网站应客户要求需要二级菜单,而且二级菜单的背景色还是半透明,我们都知道如果一个层设置为半透明,那么这个层里面的内容也会半透明,如果要想内容正常,又与二级菜单产生冲突!经过多次测试,总算找到了一个完美的解决方案! 以下是最关键的CSS样式: white-space: nowrap; /*这个样式主要是让二级菜单的宽度根据宽度自适应*

2013年12月27日

使用jQuery Flat Shadow 插件轻松实现不错的长阴影效果

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

通常情况下要实现文字的阴影效果,我们都知道需要在PS里面使用图层样式才可以实现,如果能直接在网页中实现这个效果,不仅省去了在PS中实现的麻烦,而且还可以为网站增色不少! 下面我们就来看一下通过jQuery插件来轻松实现这个长阴影效果: 首先需要在网页中引入对应的jquery,这一步是必不可少的。 <script src=”http://code.jquery.com/jquery-1.9.1.js”></script><script src=”jquery.flatshadow.js”></script> 再有就是CSS样式问题: <style> html { [...]

2013年09月28日

Jquery+CSS 制作向下滑动的动画效果导航

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

中文网站的建设过程中经常会涉及到Flash 的制作,因为网站有flash,看起来会更炫,但这同时也会造成网站的加载速度慢,造成体验效果不好,与之相对大多数的英语网站来说,最重要的就是要简洁明了,加载速度快,很少会有flash出现,但是看起来一样很舒服。不过通过Jquery没有flash,网站一样可以做出来不错的酷炫效果。实例: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> [...]

« Newer Posts