梵海pp-优快云博客

原创 jQuery实现轮播图（二）

这里的轮播为轮播增添了一个效果，前一张图片整体碎成小块块然后上移消失，而下一张图片显示出原理为：事先创建一堆浮动的div（宽高一样，布满整个背景box，这里的box包含着图片）然后为每一个div添加背景图片，使用background-position可以为每一个div取出同一张图片的对应位置的图样作为背景，然后就可以分别控制各div的运动来达到效果这里也改变了一下轮播点击按钮的运动样式点击圆

2017-07-25 22:50:07 545

原创 jQuery实现轮播图(一)

轮播概念图这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的）轮播图的原理很简单：设置一个div(box),给其相对定位并且overflow:hidden超出box的范围隐藏，里面包含一个ul，给其绝对定位，ul里面有多个li(li里面存放着轮播的图片，给li左浮动实现左右轮播效果)。每隔一段时间让ul向左移动一个li的width距离，这样图片就一张一张

2017-07-24 13:53:50 26287 5

原创 Javascript实现别踩白块儿（钢琴块儿）小游戏

游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块在规定时间内，每走一次分数加100游戏内的每一排都是一个有四个元素的数组，当正确的踩到黑块前进后，前一个数组内所有的对象样式属性（backgroundColor）赋值给其后一个数组内的对应位置处的对象，便实现了前进的功能，很简单的思想<!DOCTYPE html><html><head lang="en"> <

2017-07-20 15:16:38 3118 1

原创 Javascript实现秒表倒计时

<html><body><span id="clock" style="font-size: 3em">00:30:00:00</span><script type="text/javascript"> var oclock=document.getElementById("clock"); var start1 = oclock.innerHTML; var finis

2017-07-20 13:44:27 3940

Web Storage分为两种：sessionStorage:将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。localStorage:将数据保存在客户端本地硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时

2017-07-19 20:16:41 1201

原创 Javascript实现贪吃蛇小游戏

HTML代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>贪吃蛇游戏</title> <link rel="stylesheet" href="css/myself-css.css"/></head><body><script src="js/myself-js.js" type

2017-07-17 23:29:59 1011 1

原创 Javascript实现找不同色块的游戏

游戏规则：在变化数量的颜色块里找出一个不同颜色的块点击这里使用了JS中的构造函数来创建元素<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>找不同色块的游戏（构造函数）</title></head><style> *{ margin: 0; paddi

2017-07-17 10:45:57 4294

原创 Javascript实现三级联动

三级联动：就是平时网页上需要选择的省市县对应位置的下拉栏模块，当选择好省位置后市的下拉栏更新为已选省的，县类似。 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>三级联动</title></head><body><select id="sheng"> <option

2017-07-14 20:23:29 22151 3

原创 Javascript实现时间表

这里用到的是Date时间类<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>日期类时间表</title> </head> <style> #box{ background:url(img/1.jpg) no-repeat;

2017-07-14 20:15:42 1876

原创 Javascript实现时间倒计时

这里使用的是Date日期类<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>日期类倒计时</title> <script type="text/javascript"> window.onload=function(){

2017-07-14 20:10:48 1676

原创 Javascript计算器

用Javascript实现一个基本的运算器使用表格布局，JS添加事件<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>计算器</title></head><style> *{ margin: 0; padding: 0; } table

2017-06-19 11:48:46 618

原创页面左右两边跟随式广告框

当我们浏览一些网页时我们会发现页面的的边上会有广告图片，当滚动滚动条的时候这些广告图片会跟随性的随页面一起运动（这里我叫它为广告框）。一些网页的广告框是固定在浏览器上的用background：fixed；便可实现。这里我用JavaScript简单的制作了一个随滚动缓冲运动的广告框。制作的原理比较简单，大家都有一个完美的js运动框架，这里的缓冲运动需要用到。这里的广告框设定的是跟随滚动条缓冲运动并运

2017-03-02 18:03:20 3955

原创仿天猫双12主页广告部分

运用了Bootstrap来布局该部分分为左右两块DIV 左DIV实现的是鼠标移动到下方的一个轮播图上的图片时整块DIV背景跟随变化。轮播图有左右按钮，当按下右按钮时轮播新的三张图并且右按钮隐藏左按钮显示。轮播图下方是一个自动向上滚动的一串 li 实现信息推送。 var index; var opic_1=$(“.run_1 li”); for(var i=0;i<opic_1.length;

2017-03-01 20:05:31 443

原创仿京东边栏导航

样式代码<style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%;

2017-03-01 17:49:01 1310

原创 CSS三栏式自适应

三栏式自适应布局html,body{margin: 0;height: 100%;}#left1{position: absolute;top: 0; left: 0; width: 200px; height: 33%; background: #F00;}#main1{

2017-03-01 17:09:11 380

梵海