之前页面需要图片轮播的时候，都是直接在网上找一个插件，然后自己动手改一下，把图片的路径改成自己图片的路径，然后万事大吉。后来觉得这样并不能提高自己的前端水平，于是乎，自己动手写了一个图片轮播的小demo，用的是jquery，小弟前端小白一个，各位前端大神看了之后，望批评指正。 我的思路是这样的，定义两个变量，一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小，如果$index大于...
序 一个以js验证表单的简洁的注册登录页面，不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>sign-up</title><link rel="stylesheet" href="css/common_form.css"> </head> <body><header><div class="header-line"></div></header><div class="content"><img class="content-logo" src="img/form_logo.png" alt="logo"><h1 class="cont...
首先来分析一下轮播图效果的实现原理： 1、父元素作为显示窗口，大小固定超出部分隐藏，即设置overflow:hidden; 2、子元素存放图片列表用ul，ul固定定位，参照为父元素，即父元素position:relative;ul元素position:absolute; 3、一个li即一张图片的宽度为父元素的显示宽度 4、初始时，ul的left为0，这时第一张图片即第一个li显示 5、点击下一张按钮，将整个ul左移，使第二个li对齐父元素的左边框，此时ul的left为负的一个li的宽度 ...
有些时候，在一个网页的ul li中，存在左右两个部分的内容，但是右边元素内容又是不固定，左边元素相对应的不能用固定宽度，所有需要我们动态的获取右边元素宽度，来赋值给左边元素的marginRight值。 HTML结构： <ul class="itemCon"><li class="item"><div class="leftMess"><div class="leftCon"><span>头像</span><p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p></div></div><div class="rightMess"><...
本文实例为大家分享了js查询天气应用，供大家参考，具体内容如下 demo: https://zsqosos.github.io/weather/实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。 实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域，所以采用了jsonp的方式来调用数据。 实现的原理比较简单，HTML和css比较长，我就只将js代码贴出来，想看完整代...
自己用原生js写的简单焦点图，算是对原生js初步运用。html部分<div class="focusPicture"><section class="mPhoto" id="mPhoto"><img src="images/20161021/b_5809b93b66d18.jpg"/></section><!-- 主要的大图 --><section class="oPhoto"><div class="imgWrap"><section class="on"><img src="images/20161021/b_5809b93b66d18.jpg"/></section><section><img src="images/20161021/b_5809b96c4da53.jpg"/></section><section><img...
在WEB开发过程中，总会遇到一些从未接触过的需求，总是想尽一切办法去研究，最终实现效果，在实现效果的那一刻成就感爆棚，有木有？ 留言墙、弹出框等一些常见地方都有拖拽功能，方便用户体验嘛。 实现拖拽功能 ，三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight)，窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理。 之前做的比较多的留言墙效果时写过的，...
首先说明下为什么会停顿？ 效果 ：用键盘控制一个div移动 当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。 原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间 注：了解原因才能解决问题 效果展示1.简单控制，但是有停顿2.简单控制，解决停顿解决方法 方法 ：先开一个定时器，让div一直处于（往4个方向）准备移动的状态 初始4个方向的值都是false，div就保持在原地不动。 按下某个方向键，这个方向...
自己写了一个为元素添加事件的方法，并封装到对象中。 说明： id : 目标元素的ID type: 事件的类型，注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码： var bindEvent = {add:function(id,type,fn,isBubble){var dom = document.getElementById(id);if(!isBubble) isBubble=false;if(dom.addEventListenner){dom.addEventListenner(type,fn,isBubble);}else if(dom.attachEvent){Transit = function(){fn.call(dom);}...
本文实例分析了jQuery实现隔行变色的方法。分享给大家供大家参考，具体如下： 原生js： var tab = document.getElementByTagName(table)[0]; var tr = tab.getElementByTagName(tr); for(var i=0;i<tr.length;i++){if(i%2==0){tr[i].style.background="orange";}else{tr[i].style.background="#abcdef";} }jquery dom选择器： $(table tr:odd).css(background,orange); $(table tr:even).css(background,#abcdef);jquery 方法选择器...
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全...
现在很多javascript的插件都可以实现图片轮播的功能，这篇文章，主要是通过这个domo来解析javascript图片轮播的原理。 老规矩，先上代码。至于代码中的图片，随便找三张即可，最核心的还是理解其思想。html：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="stylesheet" type="text/css" href="css/scroll.css"/> </head> <body> <div id="wrapper"> <div id="box"> <img src="img/ban...
一、实现效果图 二、分析布局 主盒子里分上下两个小盒子（1和2）。 包含图片的盒子占两张图片的宽（3），处于上盒子中，当前图片在上盒子（1）中，其它图片在盒子（3）的右侧等待播放。 下边的盒子（2）包括了六个小方块及定位在主盒子上的两个箭头。 三、html部分 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>wangyi</title><link type="text/css" rel="stylesheet" href="css/guide.css"/><script...
JS实现轮播图实现结果图：需求： 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停 4 左右两侧可点击轮播图片 一、布局部分 html部分 <div class="w main clearfix"><!--主内容部分开始--> <div class="slider"><!--轮播图部分开始--><ul class="imgs" id="slider_imgs"><li><img src="images/slider01.jpg" id="slider1" alt=""/></li><li><img src="images/slide...
这是我用原生js写的放大镜效果，与各种各样的框架技术相比，我喜欢使用原生的js，在这里，想和大家一起谈谈原生和框架技术的理解与个人喜好。 <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style> *{ margin:0px; padding:0px; border:none; list-style:none; } #box{ margin:80px auto; width: 352px; } #box p { width: 350px; height: 35...