需要添加jquery文件才可以调试 代码如下: $(function(){ //alert($('#findclose').closest('div').attr('id')); var pic_length = $('#gd li').length; var n = 0; $('#toleft').click(function(){ if (!$('#gd').is(':animated') && n) { $('#gd').animate({left:'+=120px'},500); n--; } }); $('#toright').click(function(){ if (!$('#gd').is(':animated') && pic_length > n+5) { $('#gd').animate({left:'-=120px'},500);...
实现查询等待：正在查询中，请稍后．．．代码如下: 正在查询，请稍等... .query_hint{ border:5px solid #939393; width:250px; height:50px; line-height:55px; padding:0 20px; position:absolute; left:50%; margin-left:-140px; top:50%; margin-top:-40px; font-size:15px; color:#333; font-weight:bold; text-align:center; background-color:#f9f9f9;}.query_hint img{position:relative;top:10px;left:-8px;} 正在查询，...
其中的一个效果: html代码: 代码如下: 单击图片,产生效果 插件代码: 代码如下: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 delay: 3000, //动画执行时间 url:"0",//图片路径 count: [20, 20]//马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死 } $.fn.gysMaSaiKe = function (opt) { opt = $.extend...
提示效果如图：（删除提示框一直居中显示） 代码如下: 删除记录时的提示效果 body{ font-size:13px;} .divShow{ line-height:32px; height:32px; width:280px; background-color:#eee; padding-left:10px;} .divShow span{ padding-left:50px;} .dialog{ width:360px; border:solid 5px #666; position:absolute; display:none; z-index:101;} .dialog .title{ background-color:#fbaf15; padding:10px; color:#fff; font-we...
之前在网上看到这种特效，无奈当时没有收藏网址，导致后来一度不知道这个特效是怎么实现的。今天特意在网上搜罗了一下，果然功夫不负有心人，被我找到了。 我也努力过自己尝试着写： 但只是单纯的图片放大，而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间)。 后来发现要灵活巧妙的运用overflow和position这两个属性，就能达到目的。其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是...
核心代码如下： 代码如下: $(function(){ var _BuyList=$("#buyList"); var Trundle = function () { _BuyList.prepend(_BuyList.find("li:last")).css(marginTop, -85px); _BuyList.animate({ marginTop: 0px }, 800); } var setTrundle = setInterval(Trundle, 3000); _BuyList.hover(function () { clearInterval(setTrundle); setTrundle = null; },function () { setTrundle = setInterval(Trundle, 3000); }); });
jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。 效果演示： 进度条实现源码： 代码如下:jquery实现进度条 .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;} #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;} function progressBar(){ //初始化js进度条 $("#bar").css("width...
做联动效果，若是用纯JavaScript来做，往往需要辅助页面保存需要刷新的结果集，然后渲染到原页面。考虑将需要动态刷新的内容自动拼接到前一个下拉框之后，当前一个下拉框onchange后，同级的后面的下拉框全部清除，然后重新拼接刷新的内容。用JQuery实现比较容易，代码以省市联动效果为例实现。JSP页面代码如下： 代码如下: 生源地: 全部 ${provinceInfo.provinceName} JavaScript代码如下： 代码如下: function refresh...
采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置，从而看起来会非常高大上。 滚动到顶部：代码如下:$(.scroll_top).click(function(){$(html,body).animate({scrollTop: 0px}, 800);}); 滚动到指定位置：代码如下:$(.scroll_a).click(function(){$(html,body).animate({scrollTop:$(.a).offset().top}, 800);}); 完整实例源码参考： 代...
代码如下: Array.prototype.filterRepeat = function () { var res = [], hash = {}; for (var i = 0, elem; (elem = this[i]) != null; i++) { if (!hash[elem]) { res.push(elem); hash[elem] = true; } } return res; } $(function () { var json = [ { "SysName": "数据库", "SysGuid": "1", "CourseName": "SQL", "CourseGuid": "22", "Remarks": "大sb", "firstdate": "2013-1-1", "firstresult": "合格", "secdate":...
代码如下: //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(); }); 原理很简单 a标签背景设置正常状态 div背景设置鼠标hover的背景 只要给元素加上 代码如下: class="jq_btn" 都自动有效果
效果： HTML代码： 代码如下: JS代码： 代码如下: $(function () { //外DIV var imageWrap = $(.vfx-image-wrap), //前景图 topImage = $(this).find(.before-image), //分割线 divider = $(this).find(.divider-bar), stayBounce = $(.toggle-function); imageWrap.on("mousemove", function (e) { // Gotta localize top image and divider so it only applies to this var offsets = $(this).offset(), fullWidth ...
效果： HTML： 代码如下: JS： 代码如下: $(document).ready(function(){ $("#pageflip").hover(function(){ $("#pageflip img , .msg_block").stop().animate({width: 307px, height: 319px}, 500); },function(){ $("#pageflip img").stop().animate({width: 50px, height: 52px}, 220); $(".msg_block").stop().animate({width: 50px, height: 50px}, 200); }); });
代码如下: $.fn.silde = function() { var position = function(element) { var top = element.position().top, pos = element.css ("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0, left:1080, "margin-left":"0px", }); } else { element.css({ top: scrolls, "margin-left":"20px" }); } }else ...
本屌丝最近工作要求重写网站所有代码，so...极其蛋疼的事情出现了，管我的人要求不能用网上的插件，oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能： 需求：网页遮罩层/弹出层，兼容IE6 幸好本屌丝以前聪明收集了个js的版本，so，自己改写成了jQuery插件形式的，方便以后使用。 屁话不多放，无码无真相！ 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.0 ...