左侧提示 滑进滑出 平滑效果，各位童鞋如果遇到类似效果可以应用： JQUERY代码： 代码如下: //左侧浮动 $(".reading").hover( function(){ $(this).animate({left:"50"}); $(".read").animate({left:"0"},600); }); $(".read_close").click( function(){ $(".read").animate({left:"-287"},600); $(".reading").animate({left:"0"},800); }); HTML: 代码如下: 您可以订阅生意街商机话题，您会通过邮箱收到栏目最新内容。...
相对于上一篇，优化了拖拽的效果。 js代码:fun.js 代码如下: _MoveObj = null;//全部变量，用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if(_IsMove==1){ $(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop}); } }).bind("mouseup",function(){...
已经有两年多没登陆csdn账号了，中间做了些旁的事，可是现在却还是回归程序，但改做前端了，虽然很多东西都已忘得差不多了，但还是应该摆正心态，慢慢来，在前端漫游，做一只快乐双鱼。 路是一步一步走出来的，知识是一点一滴积累的，记录是笔财富，来吧，一起学着总结做笔记。 这几天在写后台文章的一些页面，为了能得到更好的交互性，需要做一些效果，js无疑使不二之选，但由于浏览器的兼容性一直差强人意，所以选用jquery框架，...
代码如下: $(document).ready(function() { $(".roll").each(function() { $(this).vTicker({ showItems : 18, //显示滚动行数 pause : 3000, //滚动间歇 speed : 500, //滚动速度 animation : "fade", mousePause : false, direction : "up", //滚动方向 }); }); }); 似乎只有通过div-ul-li标签嵌套的方式才能实现表格多行多列的滚动效果（如有改进的地方，请多多指教！） 代码如下: 序号 名称 季度完成量 昨日 完成进度...
这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：HTML结构部分：先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。 代码如下: CSS样式表部分：bigimage是用jQuery创建的一个p标签的id，用来存放大图片，设...
我个人表示非常喜欢微软新一代的产品，先不管它产品的成熟与否，但是它带来的是全新的产品。所谓全新，是指在用户体验上，苹果这些年的成功使得所有产品都在模仿它的界面，包括安卓在内，不知道大家的感觉如何，反正我是对这些圆角矩形产生了审美疲劳（苹果以及安卓的粉丝勿喷，这里仅仅是从界面上评价，事实上从整体上来说，微软还是有差距的），当年wp的推出让我眼前一亮，马上喜欢上了Metro风格的产品，直至今天wp8以及win8开始...
今天我这边网速真是太慢了，打开一个网页要等待很久，但是还是想写篇文章----tab自动切换 因为工作中经常会碰到这样的问题 所以写博客也是总结下 最重要的是能分享下 及以后碰到类似的可以参考下！ 当然这是我用Jquery来封装的 页面可以调用多次 调用方式 new tabSlider(obj,count); obj指容器最外层ID,count指有多个li 当然要引用我这个js的话 一定要按照我结构来写！下面的是我的HTML一些结构如下： 代码如下: ...
jquery特效 幻灯片效果，效果图如下： 代码如下: jquery特效 /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;} ul,ol,li{list-style:none;} input,button{margin:0;font-size:12px;vertical-align:middle;} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto;...
效果如下：代码如下： 代码如下:.taDetail{height: 50px; width:350px; text-align:left; vertical-align:top;}#divShowNum{ font-size:14px; width: 50px; height: 18px; border: none; padding: 5px; padding-bottom: 15px; display: none; position:absolute; }<script type="text/javascript" src="js/jquery-1.7.1.min.js"; ?>" ></ script><script type="text/javascript" src="js/jquery.tools.min.js"; ?>" ></ sc...
代码如下: 鼠标滑过遮罩高亮效果 *{padding:0;margin:0;} ul,li{list-style:none;} .picshow{float:left;padding:4px 0;width:760px;position:relative;} .picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000;opacity:0.9;} .picshow li img{height:160px;width:190px;} .picshow li a{display:block;} $(function() { var conAry = $("[name=h_light]"); conAry.each(function(){ var $th...
1、CSS样式： 代码如下: @CHARSET "UTF-8"; * html .showbox,* html .overlay { position: absolute; top: expression(eval(document.documentElement.scrollTop) ); } #AjaxLoading { border: 1px solid #8CBEDA; color: #37a; font-size: 12px; font-weight: bold; } #AjaxLoading div.loadingWord { width: 180px; height: 50px; line-height: 50px; border: 2px solid #D6E7F2; background: #fff; } #AjaxLoading img { margi...
代码如下: 简单拖曵原理实例 #drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;} h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;} $(function(){ /*--------------拖曳效果----------------...
代码如下: $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦型输入框验证 $(this).focus(function(){ $(this).siblings("span").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("...
代码如下: Jquery 同辈元素选中/未选中效果 function selectchange(tempid) { var alink = $("#linktable").find("span"); alink.each(function () { $(this).removeClass("templinkactive").addClass("templink"); }); $("#alink" + tempid).removeClass("templink").addClass("templinkactive"); } ...
代码如下:;(function($){$.fn.extend({"jlzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragindex = $(this);var arrzindex = new array();for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值，并按拖拽项顺序设置z-index值var zidxnum = 10000 - i - i -2;arrzindex[i] = {"getid":"drag" + ($dragindex.length - i),"zidx":zidxnum};$("#drag" + ($dragindex.length - i)).css("z-index",zidxnum...