jquery放大缩小,jquery实现图片放大
jquery怎么整体放大缩小div,里面有图片文字,需要修改宽高的值，不是scale
var div = $("div");
创新互联公司长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为鄂州企业提供专业的网站制作、网站建设，鄂州网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
div.css("lfet",value);
div.css("top",value)
....同理
div.width(200) // 同样也可以用上述css方式来实现。 div.css("width",value); height跟width一样。
基于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(v0)
resizeImg(this,false);//放大图片呗
else
resizeImg(this,true);//缩小图片喽
window.event.returnValue
=
false;//去掉浏览器默认滚动事件
//e.stopPropagation();
return
false;
})
}else{
$(this).bind("DOMMouseScroll",function(event){
if(event.detail0)
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 ui放大缩小
!doctype html
html
head
titlejquery-ui/title
meta html-equiv="content-type" content="text/html,charset=utf-8"/meta
/head
link rel="stylesheet" href="
link rel="stylesheet" type="text/css" href="css/nav.css"
script
$(function(){
$("#menu").menu(); !---菜单样式--
$("#menu" ).draggable(); !---可拖动--
$("#menu").resizable(); !--放大/缩小--
$("#tabs").tabs();
$("#accordion").accordion();
$( "#sortable" ).sortable(); !--排序--
$( "#sortable" ).disableSelection();
});
/script
style
body{
width:90%;
background:url(image/bg0.jpg);
margin:0 auto;
}
.ui-menu {
width:100px;
text-align:center;
margin:0 auto;
}
.ui-tabs{
border:1px solid green;
}
#accordion{
width:100%;
height:200px;
}
.content{
height:1000px;
width:100%;
border:5px solid #87CEFA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius:15px;
}
.cdown{
margin:0 auto;
width:100%;
}
.ctop{
margin:0 auto;
width:100%;
height:500px;
}
#tabs-1{
background:url(image/p-bg1.jpg) no-repeat;
}
#tabs-2{
background:url(image/p-bg2.jpg) no-repeat;
}
#tabs-3{
background:url(image/p-bg3.jpg) no-repeat;
}
#tabs ul li{
background:#76EEC6;
}
.c{
height:250px;
}
#sortable image{
width:155px;
margin-left:10px;
}
/style
body
nav
ul
lia href="#" 首页/a/li
lia href="#" 第一/a/li
lia href="#" 第二/a/li
lia href="#" 第三/a/li
lia href="#" 第四/a/li
lia href="#" 关于我们/a/li
/ul
/nav
div class="content"
div class="ctop"
div id="accordion"
h3图片可重新排序/h3
div class="c" id="sortable"image src="image/pic1.jpg"/image src="image/pic2.jpg"/image src="image/pic3.jpg"/image src="image/pic4.jpg"/image src="image/pic5.jpg"//div
h3Second/h3
div class="c"Second Second Second Second Second Second Second Second Second Second Second/div
h3Third/h3
div class="c"Third Third Third Third Third Third Third Third Third Third Third Third Third/div
/div
/div
div class="cdown"
div id="tabs"
ul
lia href="#tabs-1" class="one"First/a/li
lia href="#tabs-2" Second/a/li
lia href="#tabs-3" Third/a/li
/ul
div id="tabs-1" class="c"First First First First First First First First First First First First First/div
div id="tabs-2" class="c"Second Second Second Second Second Second Second Second Second Second Second/div
div id="tabs-3" class="c"Third Third Third Third Third Third Third Third Third Third Third Third Third/div
/div
/div
/div
ul id="menu" class="ui-widget-content"
li class="ui-state-disabled" style="font-size:10px;text-align:center"菜单(可拖动)/li
lia href="#"abcd/a
ul
lia href="#"aaa/a/li
lia href="#"bbb/a/li
lia href="#"ccc/a/li
lia href="#"ddd/a/li
/ul
/li
lia href="#"efg/a
ul
lia href="#"eee/a/li
lia href="#"fff/a/li
lia href="#"ggg/a/li
/ul
/li
/ul
/div
/body
/html
本文标题：jquery放大缩小,jquery实现图片放大
本文URL：http://pwwzsj.com/article/dsddiig.html
