项目应用-布局钟表支架和页面图片在前面实现两种时钟的效果,将前面用到的知识整合于一小项目中用到的素材: 由于这张截取的素材太大,我就不放在该位置了项目页面初始布局效果: 初始布局代码: 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 ...
需求是传过来一个图片,根据外层div的大小自动进行缩放效果。function ShowSecondImg(v) {var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例var imgW, imgH;var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40;var centerH = $(window).height() - $("#detailedInfor").height()-148;$("#imgBoxs").find("#second").remove();var img = $(‘<img/>‘, { src: v.First...
说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval。 setTimeout的常用的使用方法为 setTimeout(callback, delay),setInterval常用的使用方法为setInterval(callback, delay) 两者的区别setTimeout(function repeat(){/* Some Long block of code... */setTimeout(repeat, 10) }, 10) setInterval(function(){/* Some Long block of code... */ }, 10)这两个函数看起来功能似乎是相同的,但实际上...
应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。 实现的基本思想: (1)编写init方法对两个列表框进行初始化; (2)为body添加onload事件调用init方法; (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添加onclick事件。 javascript代码如下: 1 <script type="text/javascript" language="javascript">...
animate()通过样式把一个状态改变成另外一个状态如:$(selector).animate(styles,speed,easing,callback);styles的参数可以有很多如:backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeigh...
定位元素,进行 mousedown ,mousemove,mouseup 鼠标操作,鼠标移动必然先触发mousedown,有 mousedown 也必然会触发mouseup,故而元素拖拽必须对这三个鼠标事件进行监听。原理:通过mousedown事件,获取目标对象,通过mousemove 改变元素的位置从而移动元素,通过mouseup来释放监听事件。创建元素,并给每个元素绑定mousedown事件 var divs;// 给 html 标签添加点击事件,用于点击页面,添加一个新元素document.documentElement.ad...
原文:JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑。在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验。前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的...
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了。在这里记录下实现这个乐队的宣传网站的具体过程,加深理解。好,从现在开始来实现这个JavaScript网站实战。一、网页的结构由三个部分组成:头部、导航、内容效果图是这样的(勉强看,有点不美观。哈哈):二、网站的的结构这是我的项目目录。images——放置所有的...
网页播放视频需要加载播放器,但是通过刷图也能实现视频播放的效果JS中用到Z-index属性,记录一篇讲解Z-index属性的博客的地址:http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html方法1:JS的代码 <script type="text/javascript"> var imageNr = 0; var finished = new Array(); function createImageLayer() { var img = new Image(); img.style.position = "absolute"; ...
放大镜效果主要涉及3个鼠标事件:1.onmouseover,鼠标移入浮动小方块和显示放大的区域显示;2.onmousemove,鼠标移动,小方块和放大区域一起移动;3.onmouseout,鼠标移除小方块和放大区域消失。其实放大镜效果最主要的是小方块与放大区域的比例及位置: <div id="small_box"><div class="small_Pic"><div id="float_box"></div><img src="1.png" /></div></div><div id="big_box"><div class="big_Pic"><img src="1.png" /></di...
function settime(obj) {if(second == 0){obj.removeAttribute("disabled"); obj.value="获取验证码"; second = 300; return;}else{obj.setAttribute("disabled", true); obj.value="重新发送(" + second + ")"; second--; } timeId = window.setTimeout(function(){settime(obj)},1000); }; obj参数传入this即可。原文:https://www.cnblogs.com/qiaoyutao/p/10155579.html
源码:<style type="text/css"> #up_zzjs{border:1px solid #ccc;width:170px;height:182px;line-height:20px;overflow:hidden;} #up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;} /*系统支持ie8就选line-height:16px;,但不支持opera 否则选line-height:20px;*/ #up_zzjs #up_li a{font-size:12px; line-height:16px;}</style><div id="up_zzjs"> <ul id="marqueebox" style="border:1...
瀑布流js实现 1// 页面尺寸改变时实时触发 2 window.onresize = function() {3//重新定义瀑布流 4 waterFall();5};6 7//初始化 8 window.onload = function(){9 console.log("开始瀑布流") 10//实现瀑布流11 waterFall(); 1213} 1415function waterFall(){ 16//1.求出列数17var box = $(".item"); 18var boxWidth = box.outerWidth(); //当前图片的宽度 不用width是因为width会使图片紧挨着左右没有间隙,而oute...
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的。先看实际效果要实现这样的效果某年某月某日星期几几时几分几秒先看代码效果<script type="text/javascript"> window.onload=function(){ showDate(); countdown(); } function showDate(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth()+1;//月...
<!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=utf-8" /> <title>无标题文档</title> </head> <script src="jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ interid...