本文实例为大家讲解了JS实现拖拽图片效果的详细代码，分享给大家供大家参考，具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别：用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式如下：#div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: absolute; cursor: pointer; -webkit-box-shadow...
主要是运用了原生js封装了一个cookie，然后使用了三个事件做拖拽，分别是onmousedown，onmousemove，onmouseup，这三个事件其中两个需要添加事件对象，也就是event，事件对象是一个不兼容的东西，所以需要处理兼容性的问题，也就是oEvent = ev || event; 通过事件对象，获取鼠标点击屏幕时的那个点，然后减去被拖拽物体距离左边的一个距离，最终就可以获取到当前点击位置距离物体的距离。 最后在onmouseup的时候做了一个return fal...
本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下： 基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。 html代码：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播</title> <style>#scrollPlay{width: 730px;height: 336px;/*overflow: hidden;*/}#pre{position: ab...
本文实例为大家讲解了javascript瀑布流代码，即js页面滚动延迟加载图片，分享给大家供大家参考，具体代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生Js页面滚动延迟加载图片</title> <style type="text/css"> * {margin:0;padding:0 } img.scrollLoading {border:1px solid #ccc;display:block;margin-top:10px; } </style> </head> <body> <div id...
瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。最近使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。 代码如下：function loadImgLazy(node) {var lazyNode = $([node-type=imglazy], node),mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,imgDataSrc, localUrl;localUrl = location.href;// 获取当...
本文特意为原生js实现图片轮播特效代码做了下总结，分享给大家供大家参考，欢迎大家学习。 运行效果图：具体代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>最简单的轮播广告</title><style>body, div, ul, li {margin: 0;padding: 0;}ul {list-style-type: none;}body {background: #000;text-align: center;font: 12px/20px Arial;}#box {position: relative;width: 492px;height: 172px;backgrou...
本文实例讲述了原生js实现数字字母混合验证码的全部代码，重点是注释很详细，便于大家理解，特分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下： <!DOCTYPE html> <html> <head><meta charset="gb2312"><title></title><style type="text/css">body, div {margin: 0;padding: 0;font-size: 18px;font-family: "微软雅黑";-webkit-user-selelct: none;}#code {position: absolute;top: 50%;left: 50%;margin-top:...
在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做（比如jquery），这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！ 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/x...
本文实例讲述了原生JS实现仿淘宝网左侧商品分类菜单效果代码。分享给大家供大家参考。具体如下： 这是一款原生JS实现的仿淘宝网左侧商品分类菜单效果代码，JavaScript技术实现，兼容各主流浏览器。自己再修改一下CSS菜单，它会变得更漂亮。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-f-taobao-pro-menu-style-codes/ 具体代码如下： <!DOCTYPE html> <head> <title>仿淘宝网左侧的商品分类菜单代码</...
自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件，譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊，我也自己动手弄了段原生JS代码，实现了简单的“瀑布流”布局效果，当然肯定不能和以上那些优秀插件相提并论，有兴趣的朋友，可以去看看，希望能带给你或多或少的收获。 1. js代码： ...
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广，下面我们用两种方法简单实现之。首先，构建页面元素。页签的可点击部分我们通常用列表来承载，包括ul和ol，我们这里让页签呈横向分布，所以需要使之向左浮动。而页签内容部分使用div承载即可。另外，我们需要对具有共性的元素统一控制样式和行为，所以就有了下面的dom结构： <div id="main"><ul id="tabbar" class="cl">...
当页面中有很多滚动条，它们相互嵌套，很不好看，这时就会模拟滚动条，并给这个滚动条好看的样式，使得页面美观。 模拟滚动条很多时候是去用jquery插件，然后写几行代码就搞定了。不过随着mvvm的快速发展，很多时候都懒得用jquery了，这就是本文的动机，本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条。 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resi...
本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下： 下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。 原生态JS版： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <script> Star = { init:function(){ var bigDiv = this.appendEle(this.addStyle(this.creatEle(), {w:900,h:600,p:absolute,t:10,l:500})); for(var i = 0; i<600/30;i++){ St...
一、起因最近支付的同事说，数字键盘有些问题；在移动设备上有时候比较难出现点（.） 和数字在一起的格局；因此，考虑到这种情况，就建议手写个模拟键盘了。花了一晚上的时间，写了个简单的键盘，基本能用。考虑到有的开发者没有使用juqery,就使用原生的js了。Github地址：https://github.com/vczero/keyboard 二、截图如下三、体验地址（需要点击input才能弹出数字键盘的哦） URL: http://vczero.github.io/num_key/index.html 四...