PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

文档归类:前端设计

html页面js撒金币实例2016-10-03

移动端html撒金币,js撒金币<!doctype html> <html> <head> <meta charset="utf-8"> <title>摇一摇撒金币</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" /> <style> body{margin:0;padding:0;} input{position:absolute;z-index:1000} canvas{position:absolute;top:0;left:0;} </style> <script> function Coin(opts){ //默认参数 this.defaults={ coinSrc:"http://gw.alicdn.com/tps/i3/TB1QJ5DGpXXXXaBXXXXuv2kGFXX-39-39.png_40x40Q50s150.jpg",     //金币图片...
此文被围观883 分类: 前端设计 标签:  ······

swipe错误bug修正2016-06-05

swipe插件真心不错但有一个问题就是当元素个数为2的时候就会报错需要将swipe.js第47行的改成if (browser.transitions && options.continuous && slides.length < 2) {...
此文被围观854 分类: 前端设计 标签:  ··

css保持图片自适就与图片比例2016-03-02

页面即要保持响应式的结构又要保持图片的某全比例不变,解决方法:html代码:<div class="img-responsive">    <img src="http://d13yacurqjgara.cloudfront.net/users/14765/screenshots/1392915/mrbc-badge-....png"    /></div>css代码:.img-responsive {    max-width: 100%;    height: 0;    padding-bottom: 60%;    background-color:#ff0000;    overflow: hidden;}.img-responsive img {    width: 100%;}http://jsfiddle.net/luin/3g5AZ/...
此文被围观961 分类: 前端设计 标签:  ···

解决CSS3 Media Queries兼容问题制作响应式页面2016-01-10

文章来源:http://www.bjishu.com/using-ie-css3htc-make-compatible-response-page ‍‍在“实现网站自适应的切实方法–实战总结”中我介绍了使用js和css实现响应式布局的具体实现方法,本文我详细介绍一下如何让低版本ie支持css3屏幕判断,并实现自适应布局的方法。‍‍‍‍1、解决兼容性问题  (1)页面最顶部必须定义:<!DOCTYPE html>(2)点击:下载 respond.js 文件(3)引入<script src="respond.js"></script>;respond.js必须在样式表之后引用(4)页面必须在服务器环境中运行,直接打开用不了2、使用css3判断窗口大小设置不同样式: 举个例子:/*宽度小于500px时;背景为红色*/@media screen and (max-width:500px){body{background:red;}} /*宽度在500px-800px之间时候;背景为蓝色*/@media screen and (min-width: 500px) and (max-width: 800px){body{background:blue;}} /*宽度大于800px时;背景为绿色*/@media screen and (min-width:800px){body{background:green;}} 这里要注意,这里的样...
此文被围观1154 分类: 前端设计 标签:  ···

Unslider — 一个超小的 jQuery轮播(slider)插件2015-05-18

跨浏览器Unslider已经在所有最新的浏览器上测试过了,并且对那些老旧的浏览器也能很出色的降级处理。支持键盘导航如果需要,可以加入键盘方向键导航。试一试左右方向键吧!自动调整高度并不是每个幻灯片都很规范,Unslider能够自动调整高度。Yep,他还支持响应式布局如今哪个网站还不支持响应式布局就已经非常OUT了。Unslider帮你轻松搞定!项目址有详细的操作说明:unslider: http://www.bootcss.com/p/unslider/ ...
此文被围观2048 分类: 前端设计 标签:  ···

js倒计时2015-01-25

JS 倒计时实现代码    JS实现倒计时(时、分,秒)   var interval = 1000;  function ShowCountDown(year,month,day,divname)  {  var now = new Date();  var endDate = new Date(year, month-1, day);  var leftTime=endDate.getTime()-now.getTime();  var leftsecond = parseInt(leftTime/1000);  //var day1=parseInt(leftsecond/(24*60*60*6));  var day1=Math.floor(leftsecond/(60*60*24));  var hour=Math.floor((leftsecond-day1*24*60*60)/3600);  var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);  ...
此文被围观2098 分类: 前端设计 标签:  ····

纯CSS3实现发光动画按钮特效2015-01-24

‍‍这是一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排按钮就显得五彩缤纷,非常绚丽。之前我们也介绍过不少样式很独特的CSS3按钮,比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等,都非常不错,也有HTML5动画按钮,大家可以自己看看。‍‍在线地址:http://www.html5tricks.com/demo/pure-css3-shine-button/index.html 效果图:背景图:<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>纯CSS3实现发光按钮特效DEMO演示</title>     <style> body {   background: #333333 url(css/classy_fabric.png);   margin: 0; } #c {   position: absolute;   top: 50%;   left: 50%;   margin-left:&...

CSS修改HTML5 input placeholder颜色2015-01-23

css改placeholder颜色方法:toscho:有三种实现方式:伪元素(pseudo-elements)、伪类( pseudo-classes)和Notihing。 WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素::-webkit-input-placeholderMozilla Firefox 4-18使用伪类:-moz-placeholderMozilla Firefox 19+ 使用伪元素::-moz-placeholderIE10使用伪类:-ms-input-placeholderIE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。CSS选择器 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定。::-webkit-input-placeholder { /* WebKit browsers */     color:    #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */     color:    #99...
此文被围观2460 分类: 前端设计 标签:  ···

js parse_url函数功能2015-01-13

<script>function parseURL(url) {    var a =  document.createElement('a');    a.href = url;    return {        source: url,        protocol: a.protocol.replace(':',''),        host: a.hostname,        port: a.port,        query: a.search,        params: (function(){            var ret = {},                seg = a.search.replace(/^\?/,'').split('&'),...
此文被围观2312 分类: 前端设计 标签:  ···

jquery数组求和,map求和,js数组求合2014-12-18

多选框数据求和的问题,总觉得for循环求和麻烦,搜了一下,觉得这个方法还不错,只是这里面的eval不知道好不好。。。。。。。。var arr = [1, 2, 3, 4, 5, 6];var value = eval(arr.join("+"));$(".chk:checked").map(function(){    return this.value;}).get().join('+');js数组求和...
此文被围观3438 分类: 前端设计 标签:  ····

js 判断IOS版本号2014-12-18

‍‍先来观察 iOS 的 User-Agent 串:iPhone 4.3.2 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5iPone 5.1 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5iPone 5.1.1 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5我们可以从 User-Agent 里发现一些规律:都含有“iPhone”关键词;含有用下划线分隔的系统版本号。嗯,我们可以用这两个规律来分辨出 iOS4 以上的系统。function gt_ios4() {    // 判断是否 iPhone 或者 iPod  &n...
此文被围观2627 分类: 前端设计 标签:  ·

css判断ipone4/4s,iphone 52014-12-12

‍‍@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容/4s */ .class{} } @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */ .class{} }‍‍...
此文被围观1968 分类: 前端设计 标签:  ···

js 判断ios2014-12-12

if (/iPad|iPhone|Mac/i.test(navigator.userAgent)){    // todo : ios}...
此文被围观1638 分类: 前端设计 标签:  ····

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.