用JQuery写Web前端特效 | 您所在的位置:网站首页 › 炫酷的js特效代码是什么 › 用JQuery写Web前端特效 |
以前写前端特效绝大多数用JavaScript,代码多而且调试麻烦,有第三方插件的支持,这方面的工作容易了许多,比如JQuery、ExtJS等就很好。 JQuery比较流行,用JQuery做动画真是Easy!JQuery里的EasyUI更是强悍! 比如网络上很流行的图片焦点特效,即:鼠标移到的图片呈现正常,有文字说明,失去焦点的图片变成半透明。 Jquery-图片焦点特效*{padding:0;Margin:0;list-style:none;}#divSlide {position: relative;margin:auto auto; width: 996px;height:300px;overflow:hidden;}#divSlide ul{position:absolute;top:0px;left:0px;text-align:left;cursor:pointer;}#divSlide ul li{position:relative;display:block;width:196px;float:left;}.PSP{position: absolute;left:0;width:100%;height:35%;cursor:pointer;word-break: normal;background-color:#333333;}.p1 {width:100%;height:100%;color:#FFFFFF;word-wrap:break-word;line-height:20px;} window.onload=function(){ self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) } $(function(){ $("#divSlide>ul li").mouseover(function(){ $(this).stop().fadeTo("fast",1); $(this).css("border","1px solid #d70008"); s=$(this).css("height"); s=s.substring(0,s.length - 2); s=(parseInt(s)*2/3).toString(); $(this).append(""+$(this).children().attr("alt")+" "); $(".PSP").stop().fadeTo("fast",0.5); $(this).siblings().stop().fadeTo("fast",0.3); $(this).siblings().children(".PSP").remove(); }) }) 图片拉伸效果,即鼠标移到的图片变宽,其他图片还原正常宽度。 用一行代码就可以完成。 $(this).css("width","380").css("border","5px solid #d70008").siblings().css("width","140").css("border","0"); 网络上最多的图片滚动效果,用JQuery做可以省去不少的代码而且可以变换出更多的特效来。 var zIndex=6; $(function(){ $("#PicScroll>ol li").mouseover(function(e){ zIndex=zIndex+1; $(this).attr("class","current"); $(this).siblings().attr("class",""); var num=$(this).index(); $("ul li").eq(num).css("left","500px"); $("ul li").eq(num).css("z-index",zIndex); $("ul li").eq(num).stop().animate({left:'0'},500); }) }) 链式编程是JQuery的一个亮点,其他语言也可以做到,以后的混合语言编程也可以做到这一点;其次,用JQuery写代码对于后面的维护有更好的阅读。
|
CopyRight 2018-2019 实验室设备网 版权所有 |