⑴ 請問如下圖的前端特效如何做有沒有響應的插件
你真正想要實現的效果，估計就是這些燈泡亮和滅的效果，還褲頌有就是按唯岩鈕的效指純御果吧。
你可以去bootstrap框架裡面找，也可以不用框架，手寫也能實在，不會太難。
⑵ 如何追蹤頁面前端特效是由哪個JS執行的
可以通過瀏覽器的開發人員工具，添加斷點進行跟蹤到。
⑶ 前端開發中常用到的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
驗證碼倒計時代碼
<!-- dom --><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
⑷ 網頁特效代碼
1.這個特效的代碼我復制在文本改後姿舉綴打開,效果大打折扣,為什麼?
你再仔細的看下代碼這段
ILTER: progid:dximagetransform.microsoft.gradientwipe(ration=1); BEHAVIOR: url(images/xs.htc)
這段是CSS，其中BEHAVIOR: url(images/xs.htc)表示網頁背景文件，如果你單純的復制代碼沒有對應的背景文件，效果當然大打折扣了
2.還有每次打開自做的網也上面都有個安全提示,很麻煩,怎麼關?
因為這段代碼伍磨用了JS，本腔冊斗機測試機器會有提示
這是IE高版本增加的安全限制，你可以在 工具-internet 選項-安全-自定義里來更改腳本安全級別，但不建議你這樣，這樣改了很容易中網頁木馬
⑸ 當前web前端常用必會的演算法和網頁常見特效js實現有哪些
如果做電商頁面，現在頁面大多大同小異，參考淘寶，京東，你就輪肆困知道有哪些特效是必須會的，同理，其他類雹改型的頁面也臘念是如此。
⑹ 40款經典前端特效插件---分享
1.flavr—超級漂亮的jQuery扁平彈出對話框
2.輕量級觸摸響應滑塊插件JQuery lightSlider
3.帶37種3D動畫特效的跨瀏覽器CSS3動畫框架
4.jquery整屏滾動插件Scrollify
5.jquery旋轉木馬插件SLICK
6.jquery文字動畫插件LetterFX
7.jquery文本翻轉插件Wodry.js
8.jquery通知插件toastr
9.jQuery滾動執行動畫插件FadeThis
10.jquery表單驗證插件Bootstrap Validator
11.jCountdown倒計時插件jQuery
12.iCheck不一樣的checkbok
13.Owl Carousel強大的響應式jQuery焦點圖輪播插件
14.magic-帶64種動畫效果的CSS3動畫庫
15.jQuery實時搜索插件-HideSeek
16.bootstrap modal對話框
17.一款模擬CSS3動畫的js插件-move.js
18.可替代CSS3 transition和transform的jQuery插件
19.基於bootstrap的jQuery多功能模態對話框插件
20.帶CSS3過渡效果的js模態窗口插件
21.支持移動觸摸設備的簡潔js幻燈片插件
22.jQuery輕量級響應式扁平風格tabs選項卡插件
23.jQuery輕量級響應式Tooltip插件
24.jQuery簡單且功能強大的圖片剪裁插件
25.帶CSS3動畫過渡效果的jQuery模態窗口插件
26.中國省市區地址三級聯動jQuery插件
27.移動端優先且支持jQuery和Zepto的模態對話框插件
28.jQuery簡單實用的tooltip插件
29.帶CSS3過渡動畫效果的jQuery Tabs選項卡插件
30.x0popup-純js彈出對話框插件
31.WOW.js-元素在頁面滾動時展示CSS3動畫JS插件
32.Windows8樣式的消息提示框jQuery插件
33.jQuery星級評分插件
34.fsBanner-實用的網站響應式Banner手風琴插件
35.draggabilly-功能強大的拖動拖拽元素插件
36.驗證插件vali.js
37.響應式jQuery圖片放大鏡插件magnificent.js
38.可快速生成各種陰影效果的jQuery插件
39.基於jquery的非常逼真的全屏下雪效果
40.純文本Loading載入指示器特效
⑺ 如何快速製作網頁特效
1.打開你需要的帶特效的網站,單擊菜單欄(上面)的查看-源文件.然後找到你需要的特效的代碼段（用dreamweaver軟體容易找些),復制～粘貼～改代碼（最好先了解javascript語言～否則比較麻煩）
2.先獲得你要變換圖片的稿螞控制項(用ById),然後寫個方法～在裡面寫個循環，或者用隨機數獲得圖片並且附給你要變圖片的控制項，（所有的圖片名必須有規律～比如1.jpg,2.jpg)，最後在方法里寫個計時器setTimeOut(方法名，每過多少毫秒執行一次）
3這些東西必須要有JAVAscript的基礎～否則建議先學去懶人之家，素材中國，前端中國，網頁特效，都挺不錯的，可以直接下載源碼網頁特效一般是用java編寫的，網上可以專門下載這些代碼，一般只修改一些路徑，文件路徑，圖片的路徑，就可以用了你在其他網站上找到相關特效代碼，然後添擾殲加到你設計的網頁的相關位置（具體添加在什麼位置你可以緩敬沖參考一下你所找的網站），如果你使用的是dreamweaver網頁設計軟體，添加代碼是很容易的
⑻ 這個網頁特效怎麼做
這個是用HTML的object標簽加進去的。幻燈片是用flash做的。
想要做歲基出這樣的效果，你得先有幻燈片然後用object標簽把它加到你想要的部位。舉例說是：
<table>
<tr><td><object>******</object></td></tr>
</table>
下面的是上面的孫塌網站上的幻燈片部分的HTML語句：
<object width="980" height="120" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">
<param value="25929" name="_cx"/>
<param value="3175" name="_cy"/>
<param value="" name="FlashVars"/>
<param value="/sse/Files/logo.swf" name="Movie"/>
<param value="/sse/Files/logo.swf" name="Src"/>
<param value="Window" name="WMode"/>
<param value="-1" name="Play"/>
<param value="-1" name="Loop"/>
<param value="High" name="Quality"/>
<param value="" name="SAlign"/>
<param value="-1" name="Menu"/>
<param value="" name="Base"/>
<param value="" name="AllowScriptAccess"/>
<param value="ShowAll" name="Scale"/>
<param value="0" name="DeviceFont"/>
<param value="0" name="EmbedMovie"則雀圓/>
<param value="" name="BGColor"/>
<param value="" name="SWRemote"/>
<param value="" name="MovieData"/>
<param value="1" name="SeamlessTabbing"/>
<param value="0" name="Profile"/>
<param value="" name="ProfileAddress"/>
<param value="0" name="ProfilePort"/>
<param value="all" name="AllowNetworking"/>
<param value="false" name="AllowFullScreen"/>
<embed width="980" height="120" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" src="/sse/Files/logo.swf"/>
</object>
⑼ 求前端大神這倆特效怎麼寫
參考代碼：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
.select-point{
width:20px;
height:20px;
border-radius:50px;
border:1pxsolidwhite;
position:relative;
top:39px;
left:97px;
transition:all1s;
}
.point
{
width:15px;
height:15px;
background-color:white;
border-radius:10px;
position:relative;
top:0px;
margin-left:100px;
float:left;
z-index:99;
}
.point-text{
color:white;
position:relative;
top:-5px;
margin-left:90px;
float:left;
}
.point-text-under{
color:white;
position:relative;
top:-17px;
margin-left:205px;
薯櫻float:left;
}
</style>
</head>
<body>
<divstyle="width:1000px;height:400px;margin:100pxauto;background-color:gray;text-align:center;">
<divstyle="width:1000px;height:300px;">
<divstyle="width:350px;height:100%;float:left;text-align:right;">
<spanonclick="change('last')"style="margin-top:120px;display:block;margin-right:10px;font-size:50px;color:white;cursor:pointer;">《</span>
</div>
<divstyle="width:300px;height:200px;border:1pxsolidwhite;text-align:center;display:inline-block;float:left;margin-top:50px;">
<pid="text"style="margin:auto;color:white;">2008</p>
尺手老</div>
<divstyle="width:340px;height:100%;float:left;text-align:left;">
<spanonclick="change('next')"style="margin-top:120px;display:block;margin-left:10px;font-size:50px;color:white;cursor:pointer;">》</span>
</div>
</div>
<divstyle="width:100%;height:50px;text-align:left;">
<divclass="select-point"></div>
<divclass="point-text">2007</div>
<divclass="point-text"style="margin-left:191px;">2008</div>
<divclass="point-text"style="margin-left:192px;">2010</div>
<divclass="point-text"style="margin-left:193px;">2012</div>
<br>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div>
<divclass="point"></div><br>
<hrstyle="position:relative;top:-22px;left:0px;">
陵升<divclass="point-text-under">2009</div>
<divclass="point-text-under"style="margin-left:190px;">2011</div>
<divclass="point-text-under"style="margin-left:190px;">2013</div>
<divclass="point-text-under"style="margin-left:195px;">2015</div>
</div>
</div>
<script>
varsp=document.getElementsByClassName("select-point")[0];
vartext=document.getElementById("text");
varselected=0;
varinfo=[
{id:0,left:'97px',text:'2008'},
{id:1,left:'212px',text:'2009'},
{id:2,left:'327px',text:'2010'},
{id:3,left:'442px',text:'2011'},
{id:4,left:'556px',text:'2012'},
{id:5,left:'671px',text:'2013'},
{id:6,left:'786px',text:'2014'},
{id:7,left:'902px',text:'2015'},
{id:8,left:'997px'},
];
functionchange(e){
if(e=='next')
{
selected=selected+1;
if(selected==8){
selected=0;
}
}else{
selected=selected-1;
if(selected==-1){
selected=7;
}
}
sp.style.left=info[selected].left;
text.innerText=info[selected].text;
}
</script>
</body>
</html>
效果：
一來載入得時候：
注意：
代碼僅供參考，提供思路，在不同設備上效果可能不同。