项目应用-布局钟表支架和页面图片在前面实现两种时钟的效果，将前面用到的知识整合于一小项目中用到的素材： 由于这张截取的素材太大，我就不放在该位置了项目页面初始布局效果： 初始布局代码： 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style>7 *{8 margin:0px ;9 padding: 0px; 10 } 11 ...
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){$("button").click(function(){$("div").animate({left:‘250px‘});}); }); </script> </head><body> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p...
html部分<ul class="tab"><li>最新</li><li class="cur">热门</li><li>新闻</li></ul><div>11</div><div class="on">22</div><div>33</div>css部分<style type="text/css">div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}.tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}.tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid r...
效果 隐藏与显示 hide() 和 show() 淡入淡出 fadeIn(speed,callback)、fadeOut(speed,callback)、 fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换、fadeTo(speed,opacity,callback) 滑动 $(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);内置遍历数组的函数 $.map(array, function() { });取到数组或者对象array中每一项进...
demo如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><meta name="description" content=""/><meta name="keywords" content=""/><style type="text/css">html{background:white;color:black}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav...
手风琴效果就是内容的折叠与打开，在这个插件中，使用了三种数据来源：1、直接写在DOM结构中；2、将数据写在配置项中；3、从Ajax()中获取数据。在这一版中，各项的切换没有添加动画效果，在下一版中会是有动画效果的。在这个插件中，CSS和JS的配置非常重要，需要特别注意。另外，加个思考，请先看完后再想这个问题：当点击其中某项时，给width直接添加animate是否合适，当快速在其上移动时，如何保证效果？效果图预览插件JS accord...
转自：http://www.muzilei.com/archives/136如何实现拖动效果？浏览DEMO首先分析下拖动效果原理：1.当鼠标在被拖动对象上按下鼠标（触发onmousedown事件，且鼠标在对象上方）2.开始移动鼠标（触发onmousemove事件）3.移动时更显对象的top和left值4.鼠标放开停止拖动(触发onmouseup事件)注意：拖动的对象必须是定位对象(即设置了position:absolute或 relative)。也就是说拖动事件=onmousedown事件+onmousemove事件整个过程就是处理这...
fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 用于淡入已隐藏的元素$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000); });jQuery fadeOut() 方法用于淡出可见元素。$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000); });fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换$("button").click...
今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox。这款图片查看插件体验很好，不仅有左右两个小箭头可以浏览上一张和下一张图片，还支持鼠标的左右键浏览上一张和下一张图片。有点类似google图片的查看器。一起看下效果图： 在线预览 源码下载 我们一起看下实现代码：html代码：<div id="wrapper"><h1>Responsive Lightbox Portfolio</h1><ul id="portfolio" class="clearfix"><li><a href="img/item01@2x.jpg" title=...
一、隐藏和显示1、jQuery hide() 和 show() 语法：$(selector).hide(speed,callback);$(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 2、jQuery toggle() 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。 显示被隐藏的元素，并隐藏已显示的元素。 语法：$(selector).toggle(spe...
使用jQuery实现倒计时效果，这个实例是在页面上显示剩余几天几小时几分几秒的效果。 在头部引用最新的jQuery.js文件： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jQuery.js" type="text/javascript"></script> </head> 前台页面： <body> <div id="remainSeconds" style="display:none">180000</div> ...
最近看到我看的教学视频有不少手风琴效果，我也试着写一下，当做练习。明天我放假，就要去找工作，不知道，我的前端之路，能不能正式开始。菜鸟起飞的机会都没有，那就尴尬了.纯属练习：效果如图：html:<ul class="wrap"><li class="checked"><span>选项1</span><div>1</div></li><li><span>选项2</span><div>2</div></li><li><span>选项3</span><div>3</div></li><li><span>选项4</span><div>4</div></li><li><span>选项5</span><...
jQuery基础效果$(document).ready(function(){}这句话的意思是页面加载完成后执行，等同于js中的window.onload，大家学了jQuery的话应该就会知道?$(document).ready(function(){//这行代码意思是页面加载后执行?????????? $("#bun1").click(function(){//#是ID的意思? .是Class的意思?? $("#bun1")选择你需要用到的元素，这句话的意思是我要给一个ID为bun1的元素加点击事件?????????? $(".h11").hide(‘fast‘)//一样$(".h11")选择...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery+CSS实现的高亮显示选中二级菜单效果丨石家庄地毯</title> <style type="text/css"> *{margin:0;padding:0} body{font-size:14px;}...
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jq放大镜</title><style type="text/css">*{margin:0;padding:0;}.container{width:1000px;margin:50px auto;}.min{width:400px;height: auto;float: left;}.top{width:400px;height: 300px;position: relative;}b{width:180px;...