摘要： 首先，如图一：当打开页面是，产品出现了淡入淡出切换轮播状态，当鼠标点击左边的小图时，就会切换出相对应的大图，当鼠标移开的时候，这个轮播就会停止自动轮播，只有人工手动才能进行切换；是一个不错的体验！如图二：当页面打开时，大广告图会五秒向左切换轮播，当鼠标点击到左右两边的上一页，下一页按钮时，大图会随着切换到下一张图片，当点击下面的小图时，才会出现小图所在的大图位置，当鼠标移开之后，大图就不会继续轮播切换了，只有当鼠标点击时候才会继续切换！这个插件效果是多变的，其中，Javascript的代码如下$(function() { $("#top-slider").bxSlider( 阅读全文

摘要： W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用语法:transition:[ || || || [,[ || || || ]]*transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transi... 阅读全文

摘要： 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 阅读全文

摘要： Jquery jcarousellite 插件的好处其中：参数说明：btnPrev string 上一个按钮的class名, 比如 btnPrev: ".prev"btnNext string 下一个按钮的class名, 比如 btnPrev: ".prev"btnGo array 自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮：[".1", ".2"]mouseWheel bool 鼠标滑是否可以轮控制上下滚动,可选：false,tr 阅读全文

摘要： 第一张图片显示：刷新的效果就是这样，当鼠标移动到模特图片上的时候，下面隐藏的名称会缓缓出现，效果如下：这个效果是非常好的哦，直接用了animate这个方法最后，Javascript代码如下：$(function(){ $(".hxright li").each(function(i){ var d=$(".hxfcon2"); $(this).hover(function(){ d.eq(i).stop(true,true).animate({height:"85px"}) },function(){ d.eq(i).stop(tru 阅读全文

摘要： 第一张图片显示：刚开始的图片显示是这个效果：1：当鼠标移动上去的时候，会出现一层广告图说明，模特图放大，如图：这个效果是非常好用的；Javascript代码如下：$(function(){ //乐峰广告放大效果 $(".hxadarea4 .area4img img").hover(function(){ $(this).parent("li").css("z-index","4"); $(this).parent().next().show(); },function(){ $(this).parent(&quo 阅读全文

摘要： 第一张图片：刚开始刷新时，图片显示的效果是这样，过了200秒之后，图片向左无间断的移动一个模特图片；当你鼠标移动上去的时候，会显示出另外一张模特说明的照片跟产品的名称跟价格，如图：在模特身上有两个一直在闪动的点，当鼠标移动上去就会出现了白色框框说明的效果这个效果是一个非常不错的效果Javascript代码如下：$(function(){ //乐峰宽屏滚动效果 function scroll(){ var _this=$("ul.hxScrollcnt li");var _ul=$("ul.hxScrollcnt");var first=_this.fir 阅读全文

摘要： 首先看图片：在这个图片中，我们可以看出，这个效果只要实现的是广告图宽屏显示的效果，当鼠标移动到圆点的时候，广告图能实现淡入淡出的效果；这个效果是我们一直要找的一种插件最后，Javascript的代码如下//首页轮播状态function tabs(se,ll,cur,prev,next,stop){var $obj=$("#"+se);//所用标签var len=$obj.length;//个数var divs="";var c=1;for(n=1;nlen?c=1:c;showDiv(c);}, 5000);if(stop){$(stop).mouseo 阅读全文

摘要： 一、PNG、GIF、JPG图片对比 在我们进行图像优化技术前，需要学习有关的图片格式的一些技术细节，每个图形格式都有自己的优势和拖弱点，知道他们会使你得到更好的视觉质量和压缩品质。网页图片优化是网页加速中非常重要的一步，对图片进行压缩，不仅能够节约带宽，并且加快网页的速度，我们常用的图片编辑软件可以在压缩图片。PNG-8的高压缩比切图时，有时选择PNG-8可以获得更高的压缩比，注意，是PNG-8，不是PNG-24，不过有些情况下还是GIF或JPG会小一些，需要根据实际情况调试以选择最佳方案。对比大小：1、图型类、照片类对于图像格式的选择，我们还需要考虑图片的使用场景或功能，概括为两类：图形类、 阅读全文

摘要： 1、使用CSS无图片技术，可以总结得到以下三个优点： 减少请求资源的大小； 减少http的请求个数； 提高可维护性。 一、CSS无图片技术，微博中有哪些实际应用呢？ 通过上面的展示，我们可以看到，无图片技术，在微博上应用是十分普遍的。 二、无图片技术的实现方式： 大概有四种方式：一是通过backgr 阅读全文