本文目錄一覽：
尋網頁中JS實現的圖片切換特效
我修改測試通過一個。但是有個問題。若改成鼠標懸停邊緣滾下去，也就是onMouseOver。是停不下來的，會一直滾下去，因為無論怎麼樣都是鼠標碰觸事件。所以我強烈建議用點擊事件,onclick。
js css image都是調用的。我都寫到頁面里了，你自己改下。圖片地址我沒改。本地測試的。自己換成你的圖片。
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”
html
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
title圖片展示特效/title
style
body{ margin:20px auto; width:100%; height:auto;}
#dHomePageCarousel {
height:221px;
width:670px;
position:relative;
margin:40px auto;
}
#dLocalHomesCarousel {
height:131px;
margin:0px 2px 3px 1px;
overflow:hidden;
position:relative;
}
.divCarouselInfo {
color:#3C404E;
font-size:12px;
width:639px;
height:64px;
line-height:16px;
margin-right:15px;
padding-top:10px;
position:relative;
}
.imgBorder{
border:2px solid #fff;
position:absolute;
cursor:pointer;
}
.imgBorder:hover {
border:2px solid #FFAA55;
cursor:pointer;
position:absolute;
}
.btnCarouselLT {
background:url(“../images/btn_nav_carousel.png”) no-repeat scroll left top transparent;
display:block;
height:41px;
overflow:hidden;
position:absolute;
cursor:pointer;
top:17px;
width:40px;
}
.btnCarouselRT {
background:url(“../images/btn_nav_carousel.png”) no-repeat scroll right top transparent;
display:block;
height:41px;
overflow:hidden;
position:absolute;
cursor:pointer;
top:17px;
width:40px;
}
img {
border:medium none;
}
.author{ width:700px; margin:0 auto; height:auto; text-align:center;}
/style
/head
body onLoad=”clearInterval(autoplay);”
!– 頭開始 —
!– 滾動房源廣告開始 —
div id=”dHomePageCarousel” style=”padding-left:15px”
div id=dLocalHomesCarousel
img id=”imgSmallLeft” class=”imgBorder” style=”height:50px; width:70px; left:10px; bottom:5px;” onClick=”clearInterval(autoplay);moveD(‘l’);”/
img id=”imgMiddleLeft” class=”imgBorder” style=”height:75px; width:100px; left:110px; bottom:5px;” onClick=”clearInterval(autoplay);move(‘l’);”/
img id=”imgBig” class=”imgBorder” style=”height:105px; width:140px; left:240px; bottom:5px;” onClick=”openNewPage();”/
img id=”imgMiddleRight” class=”imgBorder” style=”height:75px; width:100px; left:410px; bottom:5px;” onClick=”clearInterval(autoplay);move(‘r’);”/
img id=”imgSmallRight” class=”imgBorder” style=”width:70px; height:50px; left:540px; bottom:5px;” onClick=”clearInterval(autoplay);moveD(‘r’);”/
img id=”imgHidden” class=”imgBorder” style=”width:10px; height:10px; left:-90px; bottom:5px;”/
/div
script type=”text/javascript”
function AdItem(Photo,url) {
this.Photo = Photo;
this.url = url;
}
var ad = new Array();
ad[0] = new AdItem(‘images/1.jpg’,’#’); ad[1] = new AdItem(‘images/2.jpg’,’#’); ad[2] = new AdItem(‘images/3.jpg’,’#’); ad[3] = new AdItem(‘images/4.jpg’,’#’); ad[4] = new AdItem(‘images/5.jpg’,’#’); ad[5] = new AdItem(‘images/6.jpg’,’#’); ;
var img = new Array();
img[0] = document.getElementById(“imgSmallLeft”);
img[1] = document.getElementById(“imgMiddleLeft”);
img[2] = document.getElementById(“imgBig”);
img[3] = document.getElementById(“imgMiddleRight”);
img[4] = document.getElementById(“imgSmallRight”);
img[5] = document.getElementById(“imgHidden”);
var position = 0;
for(i=0;iimg.length;i++){
img[i].src = ad[i].Photo;
}
var cur = 2;
adname.href = ad[2].url;
/script
/div
script type=”text/javascript”
function roll(direction){
var imgLength = img.length;
var dataLength = ad.length;
var start = position;
if(‘r’ == direction){
for(var i=0; iimgLength; i++){
start = start + 1;
if(start (dataLength-1))
start = start – dataLength;
img[i].src = ad.Photo;
}
position = position + 1;
if(position (dataLength-1))
position = position – dataLength;
}
if(‘l’ == direction){
var a = true;
for(var i=0; iimgLength; i++){
if(a){
start = start – 1;
if(start 0){
start = start + dataLength;
a = false;
}
if(start (dataLength-1)){
a = false;
}
}else{
start = start + 1;
if(start (dataLength-1)){
start = start – dataLength;
a = true;
}
}
//alert(position + ” === ” + i + ” === ” + start);
img[i].src = ad.Photo;
if(start == (dataLength-1)){
start = -1;
}
}
position = position – 1;
if(position 0)
position = position + dataLength;
}
}
function right(){
i++;
var img0H = parseFloat(img[0].style.height);
var img0W = parseFloat(img[0].style.width);
var img0L = parseFloat(img[0].style.left);
var img1H = parseFloat(img[1].style.height);
var img1W = parseFloat(img[1].style.width);
var img1L = parseFloat(img[1].style.left);
var img2H = parseFloat(img[2].style.height);
var img2W = parseFloat(img[2].style.width);
var img2L = parseFloat(img[2].style.left);
var img3H = parseFloat(img[3].style.height);
var img3W = parseFloat(img[3].style.width);
var img3L = parseFloat(img[3].style.left);
var img4H = parseFloat(img[4].style.height);
var img4W = parseFloat(img[4].style.width);
var img4L = parseFloat(img[4].style.left);
var img5H = parseFloat(img[5].style.height);
var img5W = parseFloat(img[5].style.width);
var img5L = parseFloat(img[5].style.left);
//解決IE兼容性問題
if(navigator.userAgent.indexOf(“MSIE”)0 i%2==0) {
img1W = img1W + 1;
img2H = img2H + 1;
img2L = img2L + 1;
img3H = img3H + 1;
img3L = img3L + 1;
img4L = img4L + 1;
img4W = img4W + 1;
}
img[0].style.height = (img0H – 2).toString() + “px”;
img[0].style.left = (img0L – 5).toString() + “px”;
img[0].style.width = (img0W – 3).toString() + “px”;
img[1].style.height = (img1H – 1).toString() + “px”;
img[1].style.left = (img1L – 5).toString() + “px”;
img[1].style.width = (img1W – 1.5).toString() + “px”;
img[2].style.height = (img2H – 1.5).toString() + “px”;
img[2].style.left = (img2L – 6.5).toString() + “px”;
img[2].style.width = (img2W – 2).toString() + “px”;
img[3].style.height = (img3H + 1.5).toString() + “px”;
img[3].style.left = (img3L – 8.5).toString() + “px”;
img[3].style.width = (img3W + 2).toString() + “px”;
img[4].style.height = (img4H + 1).toString() + “px”;
img[4].style.left = (img4L – 6.5).toString() + “px”;
img[4].style.width = (img4W + 1.5).toString() + “px”;
img[5].style.height = (img5H + 2).toString() + “px”;
img[5].style.left = (img5L – 5).toString() + “px”;
img[5].style.width = (img5W + 3).toString() + “px”;
//alert(img[1].style.width);
if(i19){
clearInterval(hide);
reset();
roll(‘r’);
isRunning = ‘false’;
}
}
function left(){
i++;
var img0H = parseFloat(img[0].style.height);
var img0W = parseFloat(img[0].style.width);
var img0L = parseFloat(img[0].style.left);
var img1H = parseFloat(img[1].style.height);
var img1W = parseFloat(img[1].style.width);
var img1L = parseFloat(img[1].style.left);
var img2H = parseFloat(img[2].style.height);
var img2W = parseFloat(img[2].style.width);
var img2L = parseFloat(img[2].style.left);
var img3H = parseFloat(img[3].style.height);
var img3W = parseFloat(img[3].style.width);
var img3L = parseFloat(img[3].style.left);
var img4H = parseFloat(img[4].style.height);
var img4W = parseFloat(img[4].style.width);
var img4L = parseFloat(img[4].style.left);
var img5H = parseFloat(img[5].style.height);
var img5W = parseFloat(img[5].style.width);
var img5L = parseFloat(img[5].style.left);
//解決IE兼容性問題
if(navigator.userAgent.indexOf(“MSIE”)0 i%2==0) {
img0W = img0W + 1;
img1H = img1H + 1;
img1L = img1L + 1;
img2H = img2H + 1;
img2L = img2L + 1;
img3L = img3L + 1;
img3W = img3W + 1;
}
img[0].style.height = (img0H + 1).toString() + “px”;
img[0].style.left = (img0L + 5).toString() + “px”;
img[0].style.width = (img0W + 1.5).toString() + “px”;
img[1].style.height = (img1H + 1.5).toString() + “px”;
img[1].style.left = (img1L + 6.5).toString() + “px”;
img[1].style.width = (img1W + 2).toString() + “px”;
img[2].style.height = (img2H – 1.5).toString() + “px”;
img[2].style.left = (img2L + 8.5).toString() + “px”;
img[2].style.width = (img2W – 2).toString() + “px”;
img[3].style.height = (img3H – 1).toString() + “px”;
img[3].style.left = (img3L + 6.5).toString() + “px”;
img[3].style.width = (img3W – 1.5).toString() + “px”;
img[4].style.height = (img4H – 2).toString() + “px”;
img[4].style.left = (img4L + 5).toString() + “px”;
img[4].style.width = (img4W – 3).toString() + “px”;
img[5].style.height = (img5H + 2).toString() + “px”;
img[5].style.left = (img5L + 5).toString() + “px”;
img[5].style.width = (img5W + 3).toString() + “px”;
//alert(img[1].style.left);
if(i19){
clearInterval(hide);
reset();
roll(‘l’);
isRunning = ‘false’;
}
}
var isRunning;
function move(direction){
//alert(isRunning);
if(isRunning != ‘udefined’ isRunning == ‘true’)
return;
frequency = 20;
if(navigator.userAgent.indexOf(“MSIE”)0) {
frequency = 15;
}
if(isFirefox=navigator.userAgent.indexOf(“Firefox”)0){
frequency = 20;
}
i = 0;
if(direction == ‘r’){
cur = cur + 1;
img[5].style.left = “640px”;
hide = setInterval(“right()”, frequency);
isRunning = ‘true’;
}
if(direction == ‘l’){
cur = cur – 1;
img[5].style.left = “-90px”;
var pos = position – 1;
if(pos 0)
pos = pos + ad.length;
img[5].src = ad[pos].Photo;
hide = setInterval(“left()”, frequency);
isRunning = ‘true’;
}
if(cur (ad.length – 1))
cur = 0;
if(cur 0)
cur = ad.length – 1;
//alert(cur);
adname.href = ad[cur].url;
if(navigator.userAgent.indexOf(“Firefox”)0){
adname.textContent = ad[cur].name;
adtel.textContent = ad[cur].phone;
adaddr.textContent = ad[cur].address;
adprice.textContent = ad[cur].price;
adtime.textContent = ad[cur].time;
} else {
adname.innerText = ad[cur].name;
adtel.innerText = ad[cur].phone;
adaddr.innerText = ad[cur].address;
adprice.innerText = ad[cur].price;
adtime.innerText = ad[cur].time;
}
}
function moveC(direction){
if(isRunning != ‘true’){
move(direction);
clearInterval(movec);
}
}
function moveD(direction){
move(direction);
if(‘r’ == direction){
movec = setInterval(“moveC(‘r’)”,5);
} else {
movec = setInterval(“moveC(‘l’)”,5);
}
}
function reset(){
img[0].style.width = “70px”;
img[0].style.height = “50px”;
img[0].style.left = “10px”;
img[1].style.width = “100px”;
img[1].style.height = “75px”;
img[1].style.left = “110px”;
img[2].style.width = “140px”;
img[2].style.height = “105px”;
img[2].style.left = “240px”;
img[3].style.width = “100px”;
img[3].style.height = “75px”;
img[3].style.left = “410px”;
img[4].style.width = “70px”;
img[4].style.height = “50px”;
img[4].style.left = “540px”;
img[5].style.width = “10px”;
img[5].style.height = “10px”;
img[5].style.left = “-90px”;
}
autoplay = setInterval(“move(‘r’)”,2000);
function openNewPage(){
window.open(ad[cur].url);
}
/script
!– 滾動房源廣告結束 —
/body
/html
網頁特效代碼
在HTML文件中添加網頁特效代碼，一般有三種情況。
第一，只加在HTML文件頭部，即HTML文件中head……/head之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。
第二，只加在HTML文件體部。即HTML文件中body……/body之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。如在你題目中提到的就屬於這一類。
除上述情況外，多數代碼需要先在頭部（head……/head之間）在上一些屬性性質的代碼，但是特效的主代碼需要添加在體部（body……/body之間），否則，特效不能正常顯示，有時還會出現錯誤，影響整個頁面的正常顯示。
添加特效代碼的方法：
先要用HTML編輯軟件，如常見的文本編輯器“記事本”，打開需要編輯的文件，根據特效代碼的要求，在文件中找到相應位置，複製，粘貼特效代碼，保存即可。修改完畢後，即可在瀏覽器中看到相應的效果。
在添加的時候一定要注意，一定要按照特效源碼的要求添加，此外，還要保證源碼的完整性，一個標點符號都不能少，也不能多。
另外要說的是，根據我的經驗，直接從網上複製來的代碼，不一定都能直接粘貼了用，一部分必須通過一個軟件來中轉。比如，先把網上的代碼複製後，粘貼到“記事本”中，然後再複製、粘貼到相應的文件位置上。
最後，介紹你幾個經典網頁特效站。
1、網頁特效集錦：
2、javascript網頁特效：
3、萬旭網頁特效：
4、網頁特效夢工廠：
5、網頁製作大寶庫網頁特效大全：
前端開發中常用到的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 = ”; 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);
}1234567891011121314151617181920
// 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);
});12345678910111213141516171819202122
常用的一些正則表達式
//匹配字母、數字、中文字符
/^([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]/1234567891011121314151617181920
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(‘移動端’);
}123456789101112131415161718192021
之前我用過一個檢測客戶端的庫 覺得挺好用的，也推薦給大家 叫 device.js，大家可以 Googel 或 百度
GItHub倉庫地址：
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
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/285866.html
微信掃一掃 
支付寶掃一掃 