效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>仿浏览器滚动条</title><style type="text/css">*{margin: 0;padding: 0;}#demo{width: 300px;height: 500px;border: 1px solid red;margin:100px;position:relative;overflow:hidden;}p{padding:5px 20px 5px 5px;font-size:26px;position:relative;}#scrll{width:18px;border-radius:18px;position:absolute;top:0;right:0;background:...
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鼠标跟随效果</title><style type="text/css">*{margin: 0;padding: 0;}img{position:absolute;top:0;left:0;}</style> </head> <body><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=21984166dad229792b21c2e1277bece5" height="50" width="50" alt="" id="img"> </body> <script type="text/javascript">(fu...
效果图：（实例图片由自己添加）代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>仿淘宝放大镜特效</title><style type="text/css">*{margin: 0;padding: 0;}#demo{width:350px;height:350px;border: 1px solid #000;position:relative;margin:100px;}#smil_box{width: 350px;height: 350px;position:relative;}#mask{width:175px;height: 175px;background:rgba(255,255,0,0.4);position:absolu...
效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>可拖拽特效</title><style type="text/css">*{margin: 0;padding: 0;}.header{width:100%;height:30px;background:#036663;line-height:30px;color:#fff;text-indent:30px;}#demo{width:400px;height:300px;border:solid 5px #eee;box-shadow:0 0 5px #666;position:absolute;top:40%;left:40%;}#innerht{height:25px;background:#036663...
话不多说，请看代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>旋转木马特效</title><style type="text/css">*{margin: 0;padding: 0;list-style:none;}#demo{width:1200px;margin:100px auto 0;}#innerht{width:1200px;height:500px;position:relative;}ul li{position:absolute;top:0;left:0;z-index:1;}ul li img{width:100%;}#corrow{position:absolute;width:100%;top:50%;opacity:0;z-index:9...
整理文档，搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例，留作笔记。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /><style> .select-item {background-color: #5bc0de;displ...
前言 大家应该都有所体会，在一些数据展示的专题页里，有时候希望数字能动态从某一个数变化到另一个数，以此来吸引用户眼球，突出数据。于是有了下文。 在这里，我用了两种方式：一种是原生的JavaScript，另一种是jQuery插件。 数字线性变化的原理很简单，就是让数字增量变化，并循环动画。 原生JS版 首先获取DOM元素。为了兼容到IE6，兼容性方法如下： var domUtil = {// 获取DOM元素get: function(query) {var _this = this;if(d...
效果如下：代码如下： <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><style type = "text/css">*{ padding: 0; margin: 0; }li { list-style: none; }.box {width: 800px;height: 450px;margin: 50px auto;position: relative;overflow:hidden;}.box span {width: 40px;height: 60px; display: block;position: absolute;top: 225px;margin-top: -20px;cursor: pointer;z-index: 1;}.box #left {width: 76px;heig...
思路： （1）获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、2018年距离现在的总秒数； （2）总秒数/86400，整数部分代表天； （3）余数部分/3600，整数部分代表小时； （4）余数部分/60，整数部分代表分钟； 效果如下：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding:0;}p {font-size: 95px;text-align: center;}p span {color: red;}p...
原理：左边阴影在左边图片上从左到右移动的时候，右边大框也在右边大图片上从左到右移动（尽管在视觉、原理和代码上是相反的）；所谓放大，其实就是一张原本就很小的图对应一张原本就很大的图。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>*{margin:0;padding:0;}.small{width: 400px;height: 400px;position: relative;background: url(http://www.qdfuns.com/misc.php?mod=attach&gen...
效果如下：图 （1） 展开前图 （2） 展开后 代码如下： <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><style>*{ margin: 0; padding: 0; }.panel {width: 555px;height: auto;background-color: #333333;margin: 50px auto;}.panel-title {width: 100%;height: 68px;text-align: center;font: 600 18px/68px 微软雅黑;color: #fff;cursor: pointer;}.collapse {width: 100%;height: 0;background-color: #167EA0;...
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。 原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>轮播图</title> </head> <body><div class="container"><div class="wrap" style="left:-600px;"><i...
本文实例为大家分享了日期计算器的具体实现代码，供大家参考，具体内容如下 日期计算器html代码片段： <!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>日期计算器</title><script type="text/javascript" src="date_calc.js"></script> </head> <body> <br><br> <b>推算几天后的日期：</b> <br>和 <input size="8" id="SY" value="2016">年 <input size="4" id="SM" value="11">月 <input size="4" id="SD"...
下面给大家分享基于原生js实现的图片翻书效果，具体代码如下所示： <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS实现图片翻书效果-懒人图库</title><META http-equiv=imagetoolbar content=no><STYLE type=text/css>#center {LEFT: 50%; POSITION: absolute; TOP: 50%}#DHTMLBOOK {BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; ...
本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下 效果图： 下面贴代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>计时器</title><script>var hour,minute,second;//时 分 秒hour=minute=second=0;//初始化var millisecond=0;//毫秒var int;function Reset()//重置{window.clearInterval(int);millisecond=hour=minute=second=0;document.getElementById(timet...