CSS样式： 代码如下: .zeng_msgbox_layer, .zeng_msgbox_layer .gtl_ico_succ, .zeng_msgbox_layer .gtl_ico_fail, .zeng_msgbox_layer .gtl_ico_hits, .zeng_msgbox_layer .gtl_ico_clear, .zeng_msgbox_layer .gtl_end{display:inline-block;height:54px;line-height:54px;font-weight:bold;font-size:14px;color:#606060;background-image:url("gb_tip_layer.png");_background-image:url("gb_tip_layer_ie6.png");background-...
如图 今天我做的是利用JQuery模拟这个效果 源码如下 代码如下: //假设data是从数据库取到的数据 var data = {"images/1_small.jpg":["images/1_big.jpg","内衣少女","主演：文咏珊，郑丽欣"],"images/2_small.jpg":["images/2_big.jpg","爱情陷阱","主演：金正勋，蔡琳"],"images/3_small.jpg":["images/3_big.jpg","源代码","主演：贾斯丁，克里斯丁娜"]}; $(function(){ $.each(data,function(key,value){ var smallimg = $(...
步骤： 1.实现随鼠标移动的效果； 2.初始化一个元素及其坐标； 3.拖拽对象的最后坐标，与元素的坐标 进行计算和判断 来确定 要插入的目标元素； 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下： 代码如下: 测试的拖拽功能 body, div { margin: 0; paading: 0; font-size: 12px; } body { width: 960px; margin: 0 auto; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: both; width: 1p...
很有意思。小邪就跟着做了一个Demo，木有用插件，只挂了jQuery。 Demo 演示页面 一. CSS+jQuery实现随滚动条增减汽水瓶中的液体： 话说喝汽水的那个网站是用一个瓶子的图片，分为瓶口、瓶身、吸管还有瓶底。在这些图片中瓶子内部都是透明的，所以我们可以在底下一层按 x 轴平铺液体的图片，当然记得弄好吸管，吸管则是按照 y 轴平铺。其他具体的请看代码中注释。 啊，对了，那家公司的地址在这里 - http://janploch.de/ 代...
原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。 $(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。 最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。 具体代码： 代码如下: 弹...
这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是 找到目标元素，用appendTo 的方法插入到目标元素。 具体的代码如下，有兴趣者可以试下。（由于是初学，做的简单，如果有其他的方法请给下指点，我定感激不尽哈。。。） 代码如下: 测试的拖拽功能 body, div { margin: 0; paading: 0; font-size: 12px; } ul, li { margin: 0; padding: 0; list-style: none; } .clear { clear: b...
今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项： 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e||event,v=e.wheelDelta||e.detail; if(v>0) resizeImg(this,false);//放大图片呗 else res...
需求：公司某个网站，需要实现预览效果，并能像淘宝一样实现局部分大！ 思索：为了考虑开发速度，最先考虑的是想使用网络上的现成代码！但是大致搜索了一下，网上可用的代码并不多，而且部分效果并不理想！而且有些代码，估计阅读下来比自己写一个成本还要高，于是产生了自己写一个jquery的插件的想法！ 原理：最起考虑的原理是，两张，一张小图，一张大图，先获取鼠标在小图上面的坐标，然后以一个div来显示大图，并根据小...
1. Jquery HTML5 Audio Library2. Image Wall3. Grid Navigation Effects4. Background Slide Show5. Fluid Thumbnail Bar6. Sliding Background Image Menu7. Slick and Easy Jquery Image Gallery8. Light weight Modal Windows9. Sliding Boxes10. Rotating Image Slider11. HTML5 Jquery12. Fullscreen Slideshow13. Quickie Slot Machine14. Sliding Letters15. Vertical Ticker16. Scroll-Based jQuery Functions17. Credit ...
但感觉这样写很没意思。 jquery的优势就是简单的代码就能带来更好的用户体验。 所以就找几个我感觉实用的例子，拿出来介绍下。顺带把其中用到的操作和事件介绍下。 html代码： jquery代码： 代码如下: $(document).ready(function(){ $(#address).focus(function(){ var add_value=$(this).val(); if(add_value=="请输入邮箱地址"){ $(this).val(""); } }) $(#address).blur(function(){ var add_value=$(this).val(); if(add_va...
效果图:实现代码: 代码如下: Jquery 自动轮播效果 .spanhide{display: none;} #top a:hover{color: red;} 1 2 3 4 5 $(function(){ var i = 0; var f = 0; var t; var tops = $("#top a"); var tl = tops.length; var bodys = $("#tbody span"); tops.mouseover(function(){ i = $.inArray(this,tops); bodys.hide().eq(i).show(); i++; i = i>=tl?0:i; if (f == 1) { t = setTimeout(mmover,2000);...
使用方法: 1.依次引用jquery.1.7.1,jQueryRotateCompressed.2.1.js(旋转插件),jquery.path.1.0.js(我自己写的Path插件) 2.页面元素采用如下格式 代码如下: 单击我 ★ ★ ★ ★ ★ 最外层为父级包裹div，内部第一个div为需要单击元素，剩余的是Path菜单元素 3.只需一小段代码 代码如下: $(document).ready(function (){ $(#content).path({ radius: 100, //半径 radian: 90, //弧度 duration: 200//动画时间 }...
下面是jquery的实现代码： 代码如下: $(document).ready(function(){ $(pre).hover( function(){ if($(this).width()==520){ $(this).animate({width:800},400); $(this).css({border:1px solid #2B99E6}); } }, function(){ if($(this).width()==800){ $(this).animate({width:520},400); $(this).css({border:1px solid #555555}); } } );
11年9月份项目刚开始时，找到了园中的疯狂秀才。因为秀才上面的Demo没有多级菜单。也是第一次接触Easyui。好多不是明白。不过后来我们叁还是捣鼓出来了。但是发现我们的项目用不了。就放弃了！一直搁在那……还好最后找到了 今天这位朋友想要这块，就贴出来。有需要的可以看看。方法肯定不止一种。这只是我们实现的手段 呵呵 需求：菜单比如“导航菜单-基础数据-基础数据1-子菜单1” 效果： js代码如下 代码如下: /*************...
要实现该效果，首先要先了解以下几点基础知识： 窗体滚动事件：$(window).scroll(function(){...}); 获取窗体滚动距离：$(window).scrollTop(); 获取窗体高度：$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了。 1.准备界面结构代码： 代码如下: 2.给回顶部控件添加样式： 代码如下: .backToTop { background-color: Yellow; width: 30px; border-style: outset; border-width: 1px; text-...