最近的文章列表

CSS3的30个效果例子:实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点,下面是css3的部分用法,在此总结一下,以供需要的朋友们,总共30个例子

1.长方形

#Rectangle{
width: 200px;
height: 50px;
background-color: red;
2015/3/14 Comments:
php之图片加灰色半透明效果的示例代码(imagecreatefromjpeg, imagecolortransparent)

本文实例讲述了php实现给图片加灰色半透明效果的方法。分享给大家供大家参考。具体实现方法如下:

原理:

1.首先计算出原图片的尺寸
2.创建相同尺寸的半透明图片
3.使用 imagecopy()方法,把新创建的半透明图片与原图合并

具体实现代码如下:

代码如下:
<?php 
/*php 给图片加灰色透明效果 @郑州网建*/
2015/2/14 Comments:
CSS3动起来 - 旋转90、180、270度 - 垂直、水平翻转

直接上代码,类名字就能说明意思:

.camnpr-rotate-90 {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg)
}

效果如下:

2014/11/12 Comments:
带关闭按钮的漂浮多组图片广告代码 - 兼容各大浏览器

废话不多少,直接上代码:

JS部分: 

代码如下:
function addEvent(obj, evtType, func, cap) { 
cap = cap || false;
if (obj.addEventListener) {
2014/10/26 Comments:
分享原生js仿win8等待提示圆圈进度条

一、序言

一直很中意win8等待提示圆圈进度条。win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究。通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条。
二、简单介绍

原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算!

实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数实现的。 

2014/6/13 Comments:
分析纯JavaScript实现遮罩层效果的原理

1、实现原理

本片文章的 是实现原理如下:

* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div

* 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上;

* 遮罩层有通明效果

* 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现

2、代码实现

html语言如下:

<span style="CURSOR:
2014/5/30 Comments:
纯js和css实现静态渐变色和动态渐变色

说起“渐变色”,你会想起什么?

当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变。

所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的;而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变。

这样我们先来用javascript实现一下所谓的动态渐变,考虑动态原因就不上图了,我来简单介绍下思路:

* 动态渐变 

2014/5/30 Comments:
分享JavaScript的求爱小特效 随鼠标移动的按照圆轨迹滚动的文字

这里面做了一个JavaScript的求爱小特效,效果如下:

不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了。闷骚男们,是不是可以给你的小萝莉发个这样的网页啊。给力的。
我爱你 求爱
贴上code吧:

代码如下:
2014/5/26 Comments:
分享一个Javascript函数实现网页标题(title)闪动效果
代码如下:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
</head>
<body>
<script language="JavaScript">
2014/5/16 Comments:
javascript实现图片拖动改变顺序例子(带效果图)

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动。

下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间。

代码如下:
2014/5/14 Comments: