建站
咨詢
售后
建站咨詢
新聞中心
html5 鼠標(biāo)放在下面的圖片時(shí)，會(huì)放大到中間就像圖片呢樣。求代碼
!DOCTYPE html
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的臨高網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
html
head
meta charset="utf-8" /
script type="text/javascript" src="jquery-1.7.2.min.js"/script
style type="text/css"
*{
margin: 0;
padding: 0;
}
.hbody{
margin-left: 25%;
}
.show{
margin-left: 160px;
width: 200px;
height: 200px;
border: 1px solid #EEEEEE;
}
.show img{
width: 200px;
height: 200px;
}
.tab{
border: 1px solid #eee;
width: 535px;
height:100px ;
}
.tab img{
border: 1px solid #eee;
width: 100px;
height: 100px;
cursor: pointer;
}
/style
/head
body
div class="hbody"
div class="show"
img /
/div
div class="tab"
img src="1.jpg" /
img src="2.jpg" /
img src="3.jpg" /
img src="4.jpg" /
img src="5.jpg" /
/div
/div
/body
script
$(function(){
var Src = $('.tab').find('img').eq(0).attr('src');
$('.show').find('img').attr('src',Src)
})
$('.tab').find('img').mouseover(function(){
var inx = $(this).index();
var Imgsrc = $('.tab').find('img').eq(inx).attr('src');
$('.show').find('img').attr('src',Imgsrc)
})
/script
/html
引一個(gè)jquery文件，圖片地址替換一下就可以了
HTML5鼠標(biāo)放上去圖片變大怎么寫
看完下面的代碼你就明白了，稍作刪改就是你要的效果
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlejQuery心型圖片墻鼠標(biāo)懸浮變大/title
style type="text/css"
*{padding:0; margin:0;}
ul,li{list-style:none;}
body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}
.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}
.heartPic ul{float:left;width:749px;}
.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
.heartPic ul li.on{z-index:99;}
.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}
.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
.heartPic .showDiv{display:block;}
/style
/head
body
div class="heartPic"
ul
li/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" /
p class="pTxt"可愛的女娃娃/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" /
p class="pTxt"呆萌的小熊/p
/div
/li
li/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" /
p class="pTxt"卡哇伊的小熊/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" /
p class="pTxt"女巫騎著掃帚/p
/div
/li
li/li
/ul
ul
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" /
p class="pTxt"女娃娃/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" /
p class="pTxt"星星可愛/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" /
p class="pTxt"呆萌女/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" /
p class="pTxt"狗狗/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" /
p class="pTxt"綠樹/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" /
p class="pTxt"粉愛粉愛的/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" /
p class="pTxt"蠟筆小新/p
/div
/li
/ul
ul
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" /
p class="pTxt"震不碎的心/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" /
p class="pTxt"很有意境/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" /
p class="pTxt"櫻木花道最愛啊/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" /
p class="pTxt"倆骷髏/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" /
p class="pTxt"萌妹子/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" /
p class="pTxt"可愛的小狗/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" /
p class="pTxt"夫婦倆白頭偕老/p
/div
/li
/ul
ul
li/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" /
p class="pTxt"刷子/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" /
p class="pTxt"偶的頭像/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" /
p class="pTxt"樹葉子/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" /
p class="pTxt"星星/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" /
p class="pTxt"淺色哦/p
/div
/li
li/li
/ul
ul
li/li
li/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" /
p class="pTxt"太陽(yáng)帥哥/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" /
p class="pTxt"大笑臉/p
/div
/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" /
p class="pTxt"企鵝/p
/div
/li
li/li
li/li
/ul
ul
li/li
li/li
li/li
li
div class="in"
img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" /
p class="pTxt"小兔子/p
/div
/li
li/li
li/li
li/li
/ul
/div
script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/script
script type="text/javascript"
$(function(){
$(".heartPic li").hover(function(){
$(this).addClass("on");
$(this).find("img").animate({"width":"200px","height":"200px"});
$(this).find("div").animate({"width":"200px","height":"200px"});
$(this).find(".pTxt").animate({"width":"200px","height":"20px"});
$(this).find("p").addClass("showDiv");
},function(){
$(this).animate({height:"100px"},100).removeClass("on");
$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
});
})
/script
div style="text-align:center;clear:both"
/div
/body
/html
html5多點(diǎn)觸屏圖片放大、縮小、移動(dòng)、旋轉(zhuǎn) 怎么實(shí)現(xiàn)？
touchmove這個(gè)方法
然后用e.touches[0],e.touches[1]... 來(lái)判斷不同的點(diǎn),自己寫點(diǎn)小算法就搞定了
我用html5 做了個(gè)手機(jī)網(wǎng)站 如何讓圖片本身100%放大
html5頁(yè)面加入這段
meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/
maximum-scale=2 表示頁(yè)面最大放大2倍，這樣你只要雙擊圖片就可以實(shí)現(xiàn)放大了，如果是要js來(lái)實(shí)現(xiàn)的話 那就得寫拖動(dòng)插件了。 原理：先改變圖片那個(gè)div的寬度為2倍然后定義那個(gè)div為絕對(duì)定位，這個(gè)div可以拖動(dòng)（需要js來(lái)監(jiān)聽處理對(duì)應(yīng)的函數(shù)）
所以簡(jiǎn)單的做還是就用瀏覽器自帶的放大功能吧
HTML5中，如何為圖片制作放大鏡效果？
制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對(duì)canvas進(jìn)行局部裁剪最后對(duì)裁剪的部分進(jìn)行放大，這樣就可以實(shí)現(xiàn)放大鏡的效果。
這里我給出一個(gè)實(shí)現(xiàn)這個(gè)想法的示例。該示例實(shí)際上就是運(yùn)用HTML5?canvas中對(duì)畫布進(jìn)行裁剪與保存畫布狀態(tài)的相關(guān)知識(shí)實(shí)現(xiàn)的。
上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？
下面我們來(lái)看下示例代碼：在這個(gè)示例中當(dāng)你點(diǎn)擊圖片時(shí)圖片就會(huì)出現(xiàn)上圖效果，再一次點(diǎn)擊時(shí)就變成原始圖片了。
!DOCTYPE html
html
head
meta charset="utf-8"
title放大鏡/title
!—HTML代碼設(shè)計(jì)：一個(gè)簡(jiǎn)單的canvas元素--
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的瀏覽器不支持canvas元素/p
/canvas
/div
script
window.onload=function() {
//獲取canvas對(duì)象以及圖片對(duì)象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//設(shè)置一個(gè)標(biāo)記，該標(biāo)記的作用是控制我們點(diǎn)擊canvas時(shí)放大鏡效果的消失和出現(xiàn)
isMagnified = false,
//init函數(shù)只要是在圖片加載時(shí)繪制出圖形
init = function() {
img.onload = function() {
//繪制原始圖片
context.drawImage(img, 0, 0);
//將圖片信息轉(zhuǎn)化為二進(jìn)制信息或者URL信息存儲(chǔ)在dataUrl中方便后面調(diào)用
dataUrl = canvas.toDataURL();
}
img.src = 'fist-pump-baby.jpg';
//設(shè)置標(biāo)記值
isMagnified = false;
},
//magnify函數(shù)的作用是繪制具有放大鏡效果的圖形
magnify = function() {
//保存當(dāng)前畫布的繪制狀態(tài)即畫布繪制原始圖片的狀態(tài)。方便我們?cè)诤竺婊謴?fù)到繪制原始圖片的狀態(tài)
context.save();
//因?yàn)榉糯箸R的圓圈和把手是通過(guò)canvas繪制的這里設(shè)置了一些繪制把手和圓圈的樣式屬性。
context.lineWidth = 10;//?線條寬度
context.shadowColor = '#000';//?陰影的顏色黑色
context.shadowBlur = 15;//?模糊級(jí)別為15
context.shadowOffsetX = 5;//?形狀與陰影的水平距離5
context.shadowOffsetY = 5;//?形狀與陰影的垂直距離5
//保存畫布當(dāng)前狀態(tài)即我們?cè)O(shè)置陰影屬性后的狀態(tài)方便后面使用
context.save();
//繪制出放大鏡把手的圖形
context.beginPath();
context.moveTo(230, 230);
context.lineCap = 'round';
context.lineWidth = 30;
context.lineTo(285, 285);
context.stroke();
//對(duì)圖片進(jìn)行裁剪，裁剪出的圖形是一個(gè)圓形。
context.beginPath();
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.clip();
//創(chuàng)建一個(gè)新的Image對(duì)象，這個(gè)Image對(duì)象的圖片資源是前面存儲(chǔ)在dataUrl中的圖片資源。所以這個(gè)Image對(duì)象和之前初始化的Image對(duì)象是完全一樣的。
var magnified = new Image();
magnified.src = dataUrl;
//對(duì)Image對(duì)象進(jìn)行放大1.5倍，并進(jìn)行繪制。注意此時(shí)的畫布狀態(tài)時(shí)裁剪為一個(gè)圓形的狀態(tài)，所以這里繪制的也僅僅是圖片中的一個(gè)圓形區(qū)域。這里為了繪制出圖片中娃娃的臉設(shè)置了繪制的圖片有一定的偏移量。
context.scale(1.5, 1.5);
context.drawImage(img, -40, -40);
//調(diào)用restore()函數(shù)將畫布狀態(tài)恢復(fù)到繪制把放大鏡把手時(shí)的狀態(tài)，即具有陰影屬性
context.restore();
//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來(lái)圖片的邊框。這樣剛剛裁剪出來(lái)的圓形圖形就會(huì)正好處于放大鏡的圓圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.stroke();
//重置畫布，將畫布恢復(fù)到繪制元素圖片的狀態(tài)，以方便繪制出放大效果后，再次點(diǎn)擊是繪制原始圖片。
context.restore()；
//設(shè)置標(biāo)記值，實(shí)現(xiàn)點(diǎn)擊后放大效果消失。
isMagnified = true;
};
//加載初始化代碼，即當(dāng)運(yùn)行頁(yè)面時(shí)會(huì)在頁(yè)面繪制出一個(gè)原始圖像
init();
//監(jiān)聽畫布的點(diǎn)擊事件，當(dāng)點(diǎn)擊頁(yè)面的圖像時(shí)會(huì)根據(jù)標(biāo)記的值來(lái)進(jìn)行判斷是否對(duì)畫布進(jìn)行方大處理
$('canvas').click(function() {
if (isMagnified) {
init();//繪制原始圖像
}
else {
magnify();//繪制放大的圖像
}
});
}
/script
script src="jquery.js"/script
/body
/html
對(duì)于這些知識(shí)在一個(gè)叫秒秒學(xué)的教程網(wǎng)站上有相關(guān)的學(xué)習(xí)資料，有興趣的可以自己去看看，希望對(duì)你有幫助。
分享標(biāo)題：html5放大圖片,css放大圖片
當(dāng)前地址：http://fisionsoft.com.cn/article/dscssgo.html
