代码如下: #frame { position: relative; width: 700px; height: 400px; overflow: hidden; z-index: 0; } #frame img { width: 700px; height: 400px; position: absolute; top: 0; left: 0; z-index: 1; } #frame img.visible { z-index: 2; } #frame a { display: block; width: 50%; height: 100%; position: absolute; top: 0; z-index: 10; color: transparent; background-image: url(transparent.gif); filter: alpha(opac...
效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下： 代码如下: Image 1 Image 2 Image 3 Image 4 Image 5 大家一看就明白，viewer包含了几张图片，ul对象里面包含了‘上一条'、‘下一条'和各个图片对应的导航。 2.接下来需要为这些html元素设置css样式，css我就不多说了，就是给viewer、图片等元素加样式，viewer同时只能显示一张图片： 代码如下: #slid...
当你想在有限的页面空间内展示多个内容片段的时候，手风琴（Accordion）效果就显得非常有用，它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架，只需很少的代码就可以实现精美的手风琴效果，帮助你的网站吸引更多用户的眼球。Elegant Accordion with jQuery and CSS3 首先推荐的这款插件是基于 jQuery 和 CSS3 实现的优雅的鼠标悬停手风琴效果。制作教程 在线演示Vertical Sliding Accor...
代码如下: 拖拽 *{margin: 0;padding: 0;} #drag{background: #ccc;height: 200px;width: 300px;text-align: center;line-height: 200px;position: absolute;left: 20px;top: 20px;} 我可以拖动哦！！ //jquery方法拖拽 /**$(function(){ var move = false; //判断是否被移动 var a = 0; var b = 0; $("#drag").mousedown(function(event){ move = true; a = event.pageX - parseInt($("#drag").css("left")); b = even...
排版是在网页设计当中的一个重要的元素，实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止，当你看到一些非同寻常的排版样式，你很好奇这些绚丽的色彩文字搭配效果是如何实现的，往往我们第一印象是使用CSS实现的，可是对于自己来说感到又有一定的难度，如今的瀑布流效果，大背景缩略图效果，我们其中只关注了图片绚丽的布局，其实还有一个细节就是文字色彩排版的实现，这个其实是主要的，有一些专门用于这些效果的...
在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以不同的速度或者不同的方向移动来形成非常有趣的 3D 运动效果。下面是一些运用视差滚动效果的优秀网页案例： 视差（Parallax）是指从不同的点看一个物体时形成的视觉差异，这个名词是源自希腊文的παρ?λλαξι? (parallaxis)，意思是"改变"。在网页设计中，视差滚动（Parallax Scrolling）是当下流行的网页设计技术，通过让多层背景以...
主要的变化点有：把‘下一条'、‘上一条'的click事件抽象到一个函数showNext中。添加setInterval，添加selector元素的hover事件。好了，我们一个个的看。 showNext函数： 代码如下: //显示函数 function showNext(flag) { //隐藏导航 $(config.selector).find(a).css(display, none); //创建遮罩 $.tranzify.createOverlay(config); //获取当前显示状态的图片 var currImg = $(. + config.visibleClass, $(config.selector)); if ...
代码如下: (function($) { $.fn.scrollWait = function(options) { var ops = $.extend({}, $.fn.scrollWait.defaults, options); var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops; /** * 显示位置 */ var win = $(window); var winheight = win.height(); var winwidth = win.width(); var dsize = opts.size; var top = opts.top; var left = opts.left; var dtop = !top && top != "" && typeof top != "undefine...
代码如下: 微博发布jq版 /*重置{*/ html{color:#000;background:#fff;} body,div,ul,li,h1,input,button,textarea{padding:0;margin:0;} img{border:0;} li{list-style:none;} /*}重置*/ h1{margin:20px auto 0;font-size:30px;width:200px;text-align:center;color:blue;} #outer{position:relative;width:400px;margin:auto;margin:20px auto 10px;} #test1{display:block;width:400px;height:70px;} .error{background:...
已经迫不及待的想要将我的最新成果分享给大家了，其实代码和之前的版本很相似。 首相是HTML页面代码： 代码如下: jQuery Dock 同样加上相应的CSS代码： 代码如下: #topMenu{ height:128px; line-height:250px; width: 630px; background-image:url(../images/dock-bg1.png); } #topMenu img{ width: 50px; height:50px; border:none; } 对应的JS代码如下： 代码如下: $(function(){ $(this).mousemov...
新的一天新的开始，今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果，之所以称之为初级版，是因为其中还有一些bug，显示效果并不稳定。由于时间的关系，这些bug还没有修复，希望高手们不吝赐教，提出更好的意见，希望可以做出更好的版本分享给大家。 这是静态的效果图，好吧，看上去还想模像样下面是HTML页面的代码： 代码如下: "http://www.w3.org/TR/html4/strict.dtd"> JQueryProject1 没有CS...
先给大家补补课，讲个简单的例子： 代码如下: <meta charset="utf-8″> jq=jQuery.noConflict(); jq=(document).ready(function(){ jq("a").mouseover(function(){ jq("a").css("color","#c00″); }); jq("a').mouseout(function(){ jq("a").css("color","#000000″); }); 鼠标放在上面看看会发生什么 jq=jQuery.noConflict(); 这是定义一个js的jquery库名； jq(document).ready(function(){ /*这是一个关于document对象的...
JQuery实现: 代码如下: "http://www.w3.org/TR/html4/loose.dtd"> New Web Project $(function(){ //可以是:$('#t1 tbody tr:even').css('background','red'); $('#t1 > tbody tr:even').css('background','red'); $('#t1 > tbody tr:odd').css('background','blue'); }); aaaaaaa bbbbbbb ccccccc ddddddd eeeeeee fffffff ggggggg hhhhhhh JS实现： 代码如下: "http://www.w3.org/TR/html4/loose.dtd"> New...
近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点，如果哪位大侠觉得我的思路和代码不正确或者需要改进的话，希望能指点一二，在下感激不尽。 我的思路是这样的： 1、在鼠标按下的时候，捕获鼠标的当前位置； 2、得到要移动对象的当前位置信息； 3、鼠标移动时，计算鼠标移动的距离，将这个距离更新到对象的位置，在我的代码中，我试用绝对定位来表示对象的位置；...
一年一度的圣诞节又到了，首先祝大家好运一串串，健康一年年，平安到永远！在这个特殊的日子里，处处洋溢着节日的气氛，空中飘落的雪花更显得浪漫！今天就教大家如何在博客中添加纷纷扬扬的下雪效果。今天，你那里下雪了吗？ 首先在页面引入 jQuery 库和 jQuery.snow.js（或者使用压缩版本 jQuery.snow.min.js）： 代码如下: 博客园的朋友可以不用引入 jQuery，因为博客园自身已经引入了。不是博客园的朋友也可以引用 Goolgle ...