原生js实现照片墙效果_javascript技巧

来源:脚本之家  责任编辑:小易  

原生态JS是指遵循2113ECMAscript标准的javascript,不同于微软的jscript也不依5261赖于任何框架,依托4102于浏览器1653标准引擎的脚本语言。jquery是在原生态的js上集成的框架资源,使用jquery并不代表代码就不是你写的,区别在于使用jquery只是使用了它的语法,更利于兼容以及实现,jquery已经将常规的js兼容问题解决,所以使用起来出现不兼容的情况会更少,更利于开发。但同时,要使用jquery等框架也需要去学习相关的语法,拥有js基础的同学学习jquery时会发现很轻松,在使用时也会发现很方便。扩展资料JS基本特点:JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。1、是一种解释性脚本语言(代码不进行预编译)。2、主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。3、可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。4、跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。参考资料:百度百科-javascript,指未经过封装的JS代码,而jquery就是一种框架例如根据ID获取页面上HTML元素对象document.getElementById("id")就是原生JS,而$("#id")就是jquery框架本回答被提问者和网友采纳,  原生2113态js是指遵循ECMAscript标准的javascript,不同于微软的jscript也不依5261赖于任何框架,依4102托于浏览器标准引擎的脚1653本语言,jquery是在原生态的js上集成的框架资源,使用jquery并不代表代码就不是你写的,区别在于使用jquery只是使用了它的语法,更利于兼容以及实现,jquery已经将常规的js兼容问题解决,所以使用起来出现不兼容的情况会更少,更利于开发,但同时,要使用jquery等框架也需要去学习相关的语法,拥有js基础的同学学习jquery时会发现很轻松,在使用时也会发现很方便,现在还用原生的还是蛮浪费时间的www.zgxue.com防采集请勿采集本网。

<!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><style type="text/css">body,div,h2,ul,li{margin:0;padding:0;}body{font:12px/1.5 Arail;}.box{width:860px;margin:10px auto;background:#eee;border:1px solid #b8b8b8;overflow:hidden}.title{height:30px;line-height:30px;font-size:14px;padding:0 15px 0 35px;border-bottom:1px solid #b8b8b8;background:#fafafa url(http://js.alixixi.com/img/mm/ico.gif) 5px 50% no-repeat;}.title span{float:left;}.title a{float:right;color:#06f;outline:none;}.title a:hover{color:red;}.box ul{float:left;padding:0 15px 15px 0;}.box li{float:left;width:140px;height:105px;padding:6px;background:#fff;border:1px solid #c3c3c3;display:inline;margin:15px 0 0 15px;list-style:none;}.box li img{float:left;width:140px;height:105px;}.box li.hig{padding:5px;border:2px dashed #f30;opacity:0.5;filter:alpha(opacity=50);}</style><script type="text/javascript">//获取IDvar $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};//获取tagNamevar $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};//获取classvar $$$ = function (sClass, oParent) { var aClass = [], i = 0, reClass = new RegExp("(\\s|^)" + sClass + "($|\\s)"), aElement = $$("*", oParent); for (i = 0; i < aElement.length; i++)reClass.test(aElement[i].className) && aClass.push(aElement[i]); return aClass};//获取元素位置function getPos(obj) { var iTop = obj.offsetTop; var iLeft = obj.offsetLeft; while (obj.offsetParent) { iTop += obj.offsetParent.offsetTop; iLeft += obj.offsetParent.offsetLeft; obj = obj.offsetParent; } return {top:iTop, left:iLeft} };//创建照片墙对象var PhotoWall = function () {this.initialize.apply(this, arguments)};PhotoWall.prototype = { initialize: function (obj, aData) { var oThis = this; this.oParent = $(obj); this.oUl = $$("ul", this.oParent)[0]; this.oBtn = $$("a", this.oParent)[0]; this.zIndex = 1; this.aPos = []; this.aData = aData; this.dom = document.documentElement || document.body; this.create(); this.oBtn.onclick = function () {oThis.randomOrder()} }, create: function () { var aFrag = document.createDocumentFragment(); var i = 0; for (i = 0; i < this.aData.length; i++) { var oLi = document.createElement("li"); var oImg = document.createElement("img"); oImg.src = this.aData[i]; oLi.appendChild(oImg); aFrag.appendChild(oLi) } this.oUl.appendChild(aFrag); this.aLi = $$("li", this.oParent); this.changeLayout() }, changeLayout: function () { var i = 0; this.oParent.style.height = this.oParent.offsetHeight - 2 + "px"; this.aPos.length = 0; for (i = 0; i < this.aLi.length; i++) this.aLi[i].style.cssText = ""; for (i = 0; i < this.aLi.length; i++) { this.aLi[i].index = i; this.aLi[i].style.top = getPos(this.aLi[i]).top + "px"; this.aLi[i].style.left = getPos(this.aLi[i]).left + "px"; this.aPos.push({left:getPos(this.aLi[i]).left, top:getPos(this.aLi[i]).top}) } for (i = 0; i < this.aLi.length; i++) { this.aLi[i].style.position = "absolute"; this.aLi[i].style.margin = "0"; this.drag(this.aLi[i]) } }, drag: function (obj, handle) { var oThis = this; var handle = handle || obj; handle.style.cursor = "move"; handle.onmousedown = function (event) { var event = event || window.event; var disX = event.clientX - this.offsetLeft; var disY = event.clientY - this.offsetTop; var oNear = null; handle.style.zIndex = oThis.zIndex++; document.onmousemove = function (event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = Math.max(oThis.dom.clientWidth, oThis.dom.scrollWidth) - handle.offsetWidth; var maxT = Math.max(oThis.dom.clientHeight, oThis.dom.scrollHeight) - handle.offsetHeight; iL < 0 && (iL = 0); iT < 0 && (iT = 0); iL > maxL && (iL = maxL); iT > maxT && (iT = maxT); handle.style.left = iL + "px"; handle.style.top = iT + "px"; oNear = oThis.findNearest(obj); for (var i = 0; i < oThis.aLi.length; i++) oThis.aLi[i].className = ""; oNear && (oNear.className = "hig"); return false }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; if (oNear) { handle.index = [handle.index, oNear.index]; oNear.index = handle.index[0]; handle.index = handle.index[1]; oNear.style.zIndex = oThis.zIndex++; oThis.doMove(handle, oThis.aPos[handle.index]); oThis.doMove(oNear, oThis.aPos[oNear.index]); oNear.className = ""; } else { oThis.doMove(handle, oThis.aPos[handle.index]) } handle.releaseCapture && handle.releaseCapture() }; this.setCapture && this.setCapture(); return false }; }, doMove: function (obj, iTarget, callback) { var oThis = this; clearInterval(obj.timer); obj.timer = setInterval(function () { var iCurL = getPos(obj).left; var iCurT = getPos(obj).top; var iSpeedL = (iTarget.left - iCurL) / 5; var iSpeedT = (iTarget.top - iCurT) / 5; iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL); iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT); if (iCurL == iTarget.left && iCurT == iTarget.top) { clearInterval(obj.timer); callback && callback() } else { obj.style.left = iCurL + iSpeedL + "px"; obj.style.top = iCurT + iSpeedT + "px" } }, 30) }, findNearest: function (obj) { var aDistance = []; var i = 0; for (i = 0; i < this.aLi.length; i++) aDistance[i] = this.aLi[i] == obj ? Number.MAX_VALUE : this.getDistance(obj, this.aLi[i]); var minNum = Number.MAX_VALUE; var minIndex = -1; for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minIndex = i); return this.isButt(obj, this.aLi[minIndex]) ? this.aLi[minIndex] : null }, getDistance: function(obj1, obj2) { var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2); var b = (obj1.offsetTop + obj1.offsetTop / 2) - (obj2.offsetTop + obj2.offsetTop / 2); return Math.sqrt(a * a + b * b) }, isButt: function (obj1, obj2) { var l1 = obj1.offsetLeft; var t1 = obj1.offsetTop; var r1 = l1 + obj1.offsetWidth; var b1 = t1 + obj1.offsetHeight; var l2 = obj2.offsetLeft; var t2 = obj2.offsetTop; var r2 = l2 + obj2.offsetWidth; var b2 = t2 + obj2.offsetHeight; return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1) }, randomOrder: function () { this.aPos.sort(function () {return Math.random() > 0.5 ? 1 : -1}); for (var i = 0; i < this.aLi.length; i++) { this.aLi[i].index = i; this.doMove(this.aLi[i], this.aPos[i]) } }};window.onload = function (){ var aBox = $$$("box"); var aData = []; var aExample = []; var i = 0; //生成图片数据 for (i = 0; i < 20; i++) aData[aData.length] = "http://js.alixixi.com/img/mm/" + i + ".jpg"; //循环创建多个实例 for (i = 0; i < aBox.length; i++) { var oExample = new PhotoWall(aBox[i], aData); aExample.push(oExample) } this.onresize = function () { for (var p in aExample) aExample[p].changeLayout() }; this.onresize()};</script></head><body><div class="box"> <h2 class="title"><span>一堆90后</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" class="order">随机排序</a></h2> <ul></ul></div><div class="box"> <h2 class="title"><span>一堆90后</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" class="order">随机排序</a></h2> <ul></ul></div></body></html>

对,是自己用JavaScript开发的,vue jq,它们都是js的封装

效果:

以上就是原生js实现照片墙效果的详细内容,更多关于js 照片墙的资料请关注真格学网其它相关文章! 您可能感兴趣的文章:js实现3D照片墙效果javascript制作照片墙及制作过程中出现的问题js实现超酷的照片墙展示效果图附源码下载javascript实现了照片拖拽点击置顶的照片墙代码js实现照片墙功能实例

Load事件是在页面加载完毕后触发;ready事件是在DOM模型构造完毕,加载外部文件前触发; JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装,这两事件都是在DOM树结构下载并解析完毕后触发。

1、实现头2113的方法代码。52612、编写CSS样式的方法代码。41023、html上传代码。4、JS处理方法代码。5、测试结果如下。1653注意事项:JavaScript是一种网络脚本语言,在web应用开发中得到了广泛的应用,它经常被用来为网页添加各种动态功能,为用户提供更加流畅美观的浏览效果,通常JavaScript脚本被嵌入到HTML中来实现自己的功能,1、实现头部的方法代码2113。2、编5261写css样式的方法代码4102。3、html上传代1653码。4、js处理的方法代码。5、测试效果如下。注意事项:JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。本回答被网友采纳,你给的网页用的是 <input accept="image/*" type="file">,在IOS端点击2113时会提示选择图片5261或相机,安卓端要看浏览4102器对这两1653个属性的优化,部分浏览器会直接跳转到资源管理器,优化做得好的可以直接提示选择相册或相机。这两个属性的用法可以去w3cschool上面看看。本回答被提问者采纳内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript prototype属性详解
  • 用js的for循环获取radio选中的值
  • js加载解析markdown文档过程详解
  • 获取非最后一列td值并将title设为该值的方法
  • js日期插件datehelp获取本月、三个月、今年的日期
  • js对外部文件的加载及对ifrmame的加载的实现,当加载完成后,指定指
  • javascript框架设计读书笔记之字符串的扩展和修复
  • 两种简单的跨域方法(jsonp、php)
  • xmlhttprequest的属性和方法简介
  • jquery随便控制任意div隐藏的方法
  • 怎么用html5或js调用手机的摄像头拍照上传以及调用...
  • 什么是原生JS
  • 如何利用原生的js实现基本的增删改查功能
  • jquery中nextAll()、prevAll()方法在原生js中如何...
  • 原生JS是自己手写的JS吗?
  • 如何用原生js实现jq的ready方法
  • 如何用原生js实现对输入框的监听
  • 原生JS转换成jQuery的写法
  • 用原生js怎么动态添加一个js文件
  • 如何用JS调用几十万原生API
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs实现3d照片墙效果javascript制作照片墙及制作过程中出现的问题js实现超酷的照片墙展示效果图附源码下载javascript实现了照片拖拽点击置顶的照片墙代码js实现照片墙功能实例javascript prototype属性详解用js的for循环获取radio选中的值js加载解析markdown文档过程详解获取非最后一列td值并将title设为该值的方法js日期插件datehelp获取本月、三个月、今年的日期js对外部文件的加载及对ifrmame的加载的实现,当加载完成后,指定指javascript框架设计读书笔记之字符串的扩展和修复两种简单的跨域方法(jsonp、php)xmlhttprequest的属性和方法简介jquery随便控制任意div隐藏的方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式jquery自定义插件结合baidutemplate.js实浅谈javascript 覆盖原型以及更改原型bootstrap table之通用方法( 时间控件,js微信分享apijavascript根据json生成html表格的示例代用javascript编写的第一人称射击游戏深入理解es6的迭代器与生成器纯javascript实现的分页插件实例页面加载完毕后滚动条自动滚动一定位置详解js数组reduce()方法详解及高级技巧
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved