前端渐变_前端开发中常用到的js特效有哪些

❶ web前端在jquery里怎么使用渐变颜色

H5e教育html5开发为您解答：
jquery渐变示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cycle</title>

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
table.outTable{
width: 500px;
border-top: #037DC7 1px solid;
border-collapse: collapse;
}
.outTable td{
height: 15px;
border: #037DC7 1px solid;
border-collapse: collapse;
}

table.inTable{
border: #037DC7 0px solid;
}
.inTable td.leftSideTd{
width: 15px;
height: 100px;
line-height:100px;
border-collapse: collapse;
}

</style>

<script type="text/javascript">
var first = true;

function decrescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "1.0");
$("#td"+o).animate({opacity: 0.4}, {ration: 500});
}
function crescendo(o) {
$("#td"+o).css("background-color", "#C2F7A6");
$("#td"+o).css("opacity", "0");
$("#td"+o).animate({opacity: 1}, {ration: 500});
}

function cycle(o){
var preO = o - 1;
if(o == 1) {
preO = 14;
}
//$("#td"+preO).css("background-color", "#FFFFFF");
if(!first) {
decrescendo(preO)
}
first = false;

var nextO = o + 1;
if(o == 14) {
nextO = 1;
}
//$("#td"+o).css("background-color", "#C2F7A6");
crescendo(o)

setTimeout("cycle("+nextO+")", 300);
}

</script>
</head>

<body>

<input type="button" value="begin" onclick="cycle(1);" />
<br /><br /><br />

<div style="margin: 0 auto; align:center;">

<table class="outTable" align="center">
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
<td id="td4"></td>
</tr>
<tr>
<td colspan="2" style="border: 0px;">
<table align="left" class="inTable">
<tr>
<td id="td14" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td13" class="leftSideTd"></td>
</tr>
<tr>
<td id="td12" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>

</table>
</td>
<td colspan="2" style="border: 0px;">
<table align="right" class="inTable">
<tr>
<td id="td5" class="leftSideTd" style="border-top: 0;"></td>
</tr>
<tr>
<td id="td6" class="leftSideTd"></td>
</tr>
<tr>
<td id="td7" class="leftSideTd" style="border-bottom: 0;"></td>
</tr>

</table>
</td>

</tr>
<tr>
<td id="td11"></td>
<td id="td10"></td>
<td id="td9"></td>
<td id="td8"></td>
</tr>
</table>

</div>

</body>
</html>

❷ css3.0有关圆角和渐变

css3圆角样式是这样写的：
.box{ border-radius:5px}
但是为了更加兼容，我们需要对主流浏览器加上浏览器识别符号，同时用PIE.htc文件使其兼容的ie6-ie8。
.yuan {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/*设置相对定位，触发pie.htc，这样就兼容到ie6-ie8了，.htc文件一般都是浏览器补丁，常用在兼容处理上，类似的还有iecss3.htc文件
*/

position:relative;
behavior: url(PIE.htc) ；

width:330px;
height:200px;
}

css3中的渐变效果建议不要使用，因为很多用户还是使用低版本浏览器，虽然ie6已宣布死亡，但是ie6-ie8的浏览器还是有很多市场的，我们做网站设计的公司做过调查，很多中小企业还是在使用ie6-ie8，所以这个只能暂时使用图片形式。

渐变：
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

❸ 渐变的按钮用前端文字能直接写出来吗

前端切图，文字通常情况下不用带上，可以用文本代替，样式的时候加载字体就行，如果你把文本都带上了，肯定会增加图片的KB，如果不是特殊字体的话，可以用background再加上position去写图片上的文字！

❹ CSS3中如何实现渐变效果

要得上面的线性渐变效果，我们这样去定义CSS3样式：background-image:-moz-linear-gradient(top,#8fa1ff, #3757fa); /* Firefox */background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0,#ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300',GradientType='0');/* IE*/-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。线性渐变使用from()以及to()方法指定过渡颜色点:background:-webkit-gradient(linear, left top, left bottom,from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));线性渐变多个过渡点在同一位置：background:-webkit-gradient(linear, left top, left bottom,from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));径向渐变综合效果演示：background:-moz-radial-gradient(30px30px, circle farthest-corner,#58ff00 0%, rgba(222, 255, 0, 0) 30%),-moz-radial-gradient(50px70px, circle farthest-corner,#F30 0%, rgba(255, 159, 34, 0) 60%),-moz-radial-gradient(80px10px, circle farthest-corner,#03F 0%, rgba(222, 255, 0, 0) 80%);background:-webkit-gradient(radial,105105,20,112120,50,from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),-webkit-gradient(radial,9515,15,10220,40,from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),-webkit-gradient(radial,0150,50,0140,90,from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));circle farthest-corner圆形渐变，ellipse farthest-corner椭圆渐变PS：感谢网友来到前端开发分享网学习~~ 欢迎大家扫二维码学习更多相关前端知识!!

❺ html中想要将背景颜色渐变怎么弄

html中将背景颜色渐变步骤如下：

1、先使用一个div标签。

❻ 前端开发中常用到的js特效有哪些

HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567

阻止默认行为
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法阻止默认行为
event.preventDefault();
} else{ // ie 阻止默认行为
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617

阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617

鼠标滚轮事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));

if (delta > 0) {
// 向上滚动
console.log('mousewheel top');
} else if (delta < 0) { // 向下滚动
console.log('mousewheel bottom');
}
});123456789101112

检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}

// 测试console.log(isSupportSVG());1234567

检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910

检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 测试alert(isWeiXinClient());1234567891011

jQuery 获取鼠标在图片上的坐标
$('#myImage').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);

//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567

验证码倒计时代码
<input id="send" type="button" value="发送验证码">12
// 原生js版本var times = 60, // 临时设为60秒
timer = null;

document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '发送验证码';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒后重试';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;

$('#send').on('click', function () {
var $this = $(this); // 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('发送验证码');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒后重试');
$this.attr('disabled', true);
}
}, 1000);
});2122

常用的一些正则表达式
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号
/^1[3|5|8|7]\d{9}$/

//验证URL
/^http:\/\/.+\./

//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/

js时间戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);

console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415

js限定字符数（注意：一个汉字算2个字符）
<input id="txt" type="text">//字符串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}

$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819

js判断是否移动端及浏览器内核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移动端');
}21

之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel 或网络
GItHub仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;

// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456

HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}

fullscreen(document.documentElement);12345678910111213

❼ 前端字体如何逐字渐变出现

逐字出现用setInterval方便
渐变字体你搜一下css渐变属性

❽ 除蓝橙灰三种渐变镜外，还有其他颜色的渐变镜，它们分别适合哪些场景拍摄

首先，让我们重新简述一下摄影中使用的滤光镜，滤光镜又称滤色镜，种类及其丰富，使用时置于相机镜头前端或后端。常用的滤光镜大致可以分成三类。一类是光学滤光镜，也称效果滤光镜，只对影像进行处理，改变画面的构成、几何形状或遮挡、阻碍透光量，不改变画面本身的颜色，如星光镜、柔光镜、多影镜、中灰密度镜、灰渐变镜和多重曝光遮片等。另一类是颜色滤光镜，它们能改变画面的色彩构成，如色温滤镜、彩色渐变镜等。多数颜色滤光镜是一块有色玻璃或有色玻璃夹膜，颜色滤光镜的主要作用是：任何颜色的滤光镜对与它颜色相同的色光不吸收或吸收很少；对与它颜色相近似的色光则部分吸收，部分透过；对与它颜色相补的色光或与补光相近似的色相则全部或大部分吸收

❾ css3 线性渐变和css3过渡一起用没效果了还是我语法错误，请大神回答

css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so Ucan't transition gradients for now.

但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。

css：

<style>
body{
	margin:0;
	padding:0;
}
.gavin_designdiv{
	width:200px;
	height:200px;
	margin:20pxauto;
}
.no{
	background:#ccc;
	-webkit-transition:all2slinear;
}
.no:hover{
	background:#f60;
}
.line{
	position:relative;
	background:-webkit-linear-gradient(top,#f60,#47CC38);
}
.line_gavinfix{
	position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
background:-webkit-linear-gradient(top,#47CC38,#f60);
	-webkit-transition:opacity2slinear;
}
.line:hover.line_gavinfix{
	opacity:1;
}
</style>

html：

<divclass="gavin_design">
<divclass="no"></div>
<divclass="line"><spanclass="line_gavinfix"></span></div>
</div>

预览一下，怎么样？是你需要的么^.^

❿ 在ps里面怎么做出线条的渐变，不是颜色的渐变是虚实的渐变，想这样的

如果要求不高的话，建议画一条线，然后用橡皮工具擦一擦；
如果要求高的画，画一段线，然后用框选工具选中线条前端一点，然后用涂抹工具拉，因为在方框内，所以不会拉斜了。
如果还要高一点，将喷笔调整到相对大，在画布上点一下，然后用框选工具选中间一段，复制。
......办法真的很多。

前端渐变

与前端渐变相关的内容