① 怎麼樣通過jQuery實現滾動滑鼠放大縮小圖片
很簡單啊，先把圖片用css縮小，再用js滑過的時候放大就好啦，圖省事我就把js直接寫在圖片上了，你可以自己抽出來：
<img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'; this.height='300';" onMouseOut="this.width='50'; this.height='50'">
或者更簡單的，直接用css控制，連js都不用寫了：
<style>
#Img1{ width:50px; height:50px;}
#Img1:hover{ width:300px; height:300px;}
</style>
<img src="1.png" width="50" height="50" id="Img1">
② 在jquery中怎樣使圖片變大變小
<html>
<body>
<inputtype="button"value="變大"onclick="test(20)"/>
<inputtype="button"value="變小"onclick="test(-20)"/>
<imgsrc="aa.jpg"id="img"style="width:100px"/>
</body>
</html>
<script>
varw=100;
functiontest(n)
{
varimg=document.getElementById("img");
w=w+n;
img.style.width=w+"px";
}
</script>
代碼如上所示，這是一個最簡單的控制圖片大小的示例
③ 基於jquery的滾動滑鼠放大縮小圖片效果
今天要出個滑鼠滾動放大縮小圖片的功能，看似很簡單，從網上一搜，出現的都是onmousewheel的例子，全部只支持IE瀏覽器，結果查出火狐有對應的DOMMouseScroll來處理這個功能，代碼如下,並加上注意的注釋項：
復制代碼
代碼如下:
$(function(){
$(".body
img").each(function(){
if($.browser.msie){
$(this).bind("mousewheel",function(e){
var
e=e||event,v=e.wheelDelta||e.detail;
if(v>0)
resizeImg(this,false);//放大圖片唄
else
resizeImg(this,true);//縮小圖片嘍
window.event.returnValue
=
false;//去掉瀏覽器默認滾動事件
//e.stopPropagation();
return
false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail<0)
resizeImg(this,false);
else
resizeImg(this,true);
event.preventDefault()//去掉瀏覽器默認滾動事件
//event.stopPropagation();
})
}
});
function
resizeImg(node,isSmall){
if(!isSmall){
$(node).height($(node).height()*1.2);
}else
{
$(node).height($(node).height()*0.8);
}
}
});
本文的demo請點擊這里：滾動滑鼠放大縮小圖片效果
④ jquery怎麼設置圖片的大小
$(document).ready(function() { $('.post img').each(function() { var maxWidth = 100; // 圖片最大寬度 var maxHeight = 100; // 圖片最大高度 var ratio = 0; // 縮放比例 var width = $(this).width(); // 圖片實際寬度 var height = $(this).height(); // 圖片實際高度 // 檢查圖片是否超寬 if(width > maxWidth){ ratio = maxWidth / width; // 計算縮放比例 $(this).css("width", maxWidth); // 設定實際顯示寬度 height = height * ratio; // 計算等比例縮放後的高度 $(this).css("height", height); // 設定等比例縮放後的高度 } // 檢查圖片是否超高 if(height > maxHeight){ ratio = maxHeight / height; // 計算縮放比例 $(this).css("height", maxHeight); // 設定實際顯示高度 width = width * ratio; // 計算等比例縮放後的高度 $(this).css("width", width * ratio); // 設定等比例縮放後的高度 } }); });
⑤ jquery 如何讓圖片自適應大小
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null)loadpic="../img/loading.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
img.src=src;
//自動縮放圖片
var autoScaling=function(){
if(scaling){
if(img.width>0 && img.height>0){
if(img.width/img.height>=width/height){
if(img.width>width){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//處理ff下會自動讀取緩存圖片
if(img.complete){
autoScaling();
return;
}
$(this).attr("src","");
var loading=$("<img alt=\"載入中...\" title=\"圖片載入中...\" src=\""+loadpic+"\" />");
t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
});
} );
}
</script>
<div id="content"><img src="img/20120518073933709.jpg"/></div>
<script type="text/javascript">
<!--
$(window).load(function(){
$('#content img').LoadImage(true, 600,500,'img/loading.gif');
});
//-->
</script>