◆◆

JAVA、PHP、前端、APP、网站开发 - 开发技术学习

文档归类：前端设计

js显示隐藏2017-02-08

function toggleCustomizeMenu(id) {    var ele = document.getElementById('customize_'+id);    /*try {*/      if (ele){        if (ele.style.display == 'none'){          getElementsByClassName('customize_menu', 'div');          ele.style.display = 'block';        }else{          ele.style.display = ...

我只是想看完而已»

此文被围观2140次 分类: 前端设计 标签:  ··

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",     //金币图片...

持之以恒，坚持读完»

此文被围观3207次 分类: 前端设计 标签:  ······

swipe错误bug修正2016-06-05

swipe插件真心不错但有一个问题就是当元素个数为2的时候就会报错需要将swipe.js第47行的改成if (browser.transitions && options.continuous && slides.length < 2) {...

持之以恒，坚持读完»

此文被围观2478次 分类: 前端设计 标签:  ··

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/...

抓住机会，赶紧看完»

此文被围观2768次 分类: 前端设计 标签:  ···

解决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;}} 这里要注意，这里的样...

太给力了，去围观»

此文被围观2789次 分类: 前端设计 标签:  ···

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

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

这文章不得了，一定要看完 »

此文被围观3610次 分类: 前端设计 标签:  ···

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);  ...

此文只应天上有，仰望去»

此文被围观3833次 分类: 前端设计 标签:  ····

纯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:&...

我只是想看完而已»

此文被围观4180次 分类: 前端设计 标签:  ····

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...

不要拦我，我一定要看完 »

此文被围观3993次 分类: 前端设计 标签:  ···

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('&'),...

世上尽有如此美文，快快阅读之 »

此文被围观3995次 分类: 前端设计 标签:  ···

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数组求和...

持之以恒，坚持读完»

此文被围观6588次 分类: 前端设计 标签:  ····

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...

世上尽有如此美文，快快阅读之 »

此文被围观4488次 分类: 前端设计 标签:  ·

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{} }‍‍...

不要拦我，我一定要看完 »

此文被围观3550次 分类: 前端设计 标签:  ···

js 判断ios2014-12-12

if (/iPad|iPhone|Mac/i.test(navigator.userAgent)){    // todo : ios}...

不要拦我，我一定要看完 »

此文被围观3260次 分类: 前端设计 标签:  ····

微信分享JS代码2014-12-11

‍‍‍‍微信分享功能本身有一套机制从微页面中抓取缩略图，标题和摘要信息，但是很多时候抓取的信息可能不是你所想要呈现的。很多开发人员没有注意这些，就可能使自己的页面在分享出去以后出现图片和文字的问题。‍‍另外，当我们在开发微页面游戏，或者轻应用页面的时候，我们有时候希望不同的条件下同一页面分享的内容是不一样的。比如我之前做的单页面游戏，通关后用户点击分享的内容就是其通关的时间等信息，失败了则会分享失败的信息，等等。‍‍‍‍‍‍‍‍‍‍‍‍‍‍解决这些问题其实很简单，我们可以借助微信浏览器的内置JS对象来实现。对于小虫这种代码控来说，下面就用代码和注释信息来向大家说明：‍‍‍‍‍‍‍‍首先我们定义一些变量，你可以动态的改变这些变量，分享的时候会根据这些变量的值来设置信息。‍‍var imgUrl = ""; //缩略图地址 var lineLink = ""; //分享的链接地址 var descContent = ''; //摘要信息 var shareTitle = ''; //分享的标题 var appid = 'xxxxxxxxxxxxxxxx'; //你的公众号的APPId‍‍‍‍‍‍‍‍然后我们写三个分享函数来对应三种分享方式。注意其中用到...

持之以恒，坚持读完»

此文被围观3509次 分类: 前端设计 标签:  ·····
‹23456›»

最新专题

随机文章

本月排行

    Tags 标签云

    前端技术编程开发curl get postcurl postphpphp学习服务器mysqldedecms数据库php技术centos网站开发linuxPHP开发destoonjsthinkphpwrite contextget_post_formatpsrewritebugMozillaJavaScripturlinsert intoon()prototypemysql group_concatjqueryjsp mysqlmyeclipsetemplateapachelinux+php+apachephp mysqlappendChildRequest Error step 1/2供应

    Links 友情链接

    简单看书超级字贴

    站点声明：部分内容源自互联网，为传播信息之用，如有侵权，请联系我们删除。

    © Copyright 2011-2024 www.kfju.com. All Rights Reserved.
    超级字帖 版权所有。蜀ICP备12031064号