知识要点 1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。 2.用到的属性方法： setInterval() //每隔一定时间执行一次函数，可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置 clearTimeout() //...
原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];//定义一个数组，用来存储o的兄弟元素 //previousSibling返回位于相同节点树层级的前一个元素 var p = o.previousSibling; while(p){//先取o的前面...
实现原理 功能1.删除状态 用removeChild()方法即可 功能2.最上面的点赞 判断文字的内容是否为赞，做相应操作改变存放赞数量的容器文本内容 功能3.回复评论 创建一个新的评论添加到评论列表里 功能4.回复里的点赞 判断我是否点了赞，做相应操作 功能5.回复或者删除 判断字符串回复还是删除，做相应操作 代码用了事件代理，还有三元运算判断，减少代码量 每行代码都有详细的注释 一眼看到那么多的代码不要烦躁 其实你要把每个功能单独...
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>手风琴-支持横纵向调用-原生js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css"...
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>倒计时-多种格式调用-原生js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css" h...
话不多说，请看代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大镜-原生js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css" href="../public/...
话不多说，请看代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>无缝轮播图-原生js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css" href="../pub...
原生js焦点轮播图主要注意这几点： 1、前后按钮实现切换，同时注意辅助图 2、中间的button随着前后按钮对应切换，同时按button也能跳转到相应的index 3、间隔调用与无限轮播。 4、注意在动画时要停止按钮，或者说上一个动画完毕下一个动画才能执行 5、另外在切换图片的时候，底部的Button动画效果，是从底部开始往上升的，要用到transform:scale()和transform-origin:0 100%两个转换属性，代码如下 <!DOCTYPE html> <html><head><m...
js淘宝购物车功能描述： 1、点击“+”，单个商品数量加1，总数量加1；单个商品价格添加，总价也添加。 2.点击“-”，单个商品数量减1，总数量减1；单个商品价格减少，总价也减少。 当该商品数量为0时，点击依然为0； 3.显示出总价，总数量和其中最贵的那个商品的价格。 瞄一眼效果图：废话不多说，LU代码<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <sty...
实现原理 大图上的放大镜：小图的显示区域=大图片大小：小图片大小=大图片的offsetLeft：小图片的offsetLeft 那么以上的公式中只有大图片的offsetLeft 是未知的，所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft 代码中有详细注释 完整代码 注：复制到本地后自行替换图片查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>demo<...
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>倒计时-多种格式调用-原生js封装</title><link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/><link rel="icon" href="../public/image/favicon.png" type="images/png"/><link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css"><link rel="stylesheet" type="text/css" h...
水平方向无缝滚动 滚动支持图片，文字 原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。 HTML代码<div id="demo"><div id="demoin"><div id="demo1"><a href="">测试文字1</a><a href="">测试文字2</a><a href="">测试文字3</a><a href="">测试文字4</a><a href="">测试文字5</a><a href="">测试文字...
效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS实现投票效果</title> <link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css" type="text/css"> <script src="http://hovertree.com/texiao/js/24/vote.js" type="text/javascript"></script> </head> <body> <div><h1>原生JS实现在线问卷调查投票特效</h1> </div> <!--问卷调查内容--> <div class="vote"...
本效果使用js实现，当图片移动到200像素后回到0像素再向右移动200像素一直左右移动，不需要marquee标签。 完整的HTML代码如下，保存到HTML文档打开可以查看效果： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>JS使图片左右移动_何问起</title><meta charset="utf-8" /><base target="_blank" /><style>a{color:blue;}</style> </head> <body><p>mag:</p><input ty...
效果展示：http://demo.jb51.net/js/2016/js_hovertreecolortime/ 源码下载：http://xiazai.jb51.net/201612/yuanma/hovertreecolortime_jb51.rar 数字采用漂亮的糖果皮肤设计 效果图：代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>js多彩的数字时钟_何问起</title><base targe...