js如何切割图片
A. 网页一张图片分割显示 利用js还是jQ
这个一般是用CSS来显示特定内容的。
譬如有张图片icon.png,里面有很多内容,便可以在CSS中这么用。
.sa {width:20px; height:20px; overflow:hidden; background:url(icon.png) no-repeat -20px -30px;}
注解:
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(icon.png)是使用图片作为背景显示,并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复,这个不是必须的,不过有会规范一些
-20px -30px是图片的定位,显示时会将图片按这个坐标来定位
上面只是针对固定大小的显示内容来定义的,如果大小不固定,在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定,也可以这样定义,让背景自适应:
.sa {width:auto; height:20px; overflow:hidden; background:url(icon.png) no-repeat right bottom;}
对于图片2(首页标签)的内容,也是这么使用的:
.a {width:100px; height:25px; overflow:hidden; background:url(2.png) no-repeat left center;}
.a:hover {background-position:right center;}
这样一来,当鼠标移到元素时,背景定位发生变化,显示的内容便由左边的变成右边的了。
不过你应该对CSS这方面还不是很了解,目前可能还没有很便捷的方式对这些CSS进行快速定义,所以也只能告诉你是这么一回事,但未必能帮得上你。
B. JavaScript 怎么切图
你这个需要给每张图片定义一个编号,点击剪头切换图片后,获回取切换后图片的编号,用答这个编号去刷新左边缩略图的排序
比如:
当前显示的大图片的编号是:20,
那么,左边缩略图显示的图片就应该是:
20+(-2),20+(-1),20+0,20+1,20+2;
结果就是显示编号为:18,19,20,21,22 这几张图片;
之所以加-2不减2,是为了可以用一个循环给算出来。
就这样就可以了。
C. js或者jQuery裁剪图片然后放大。
不知道你所说的图片是不是用户上传的
如果是的话我有写了一个内插件可以用
这个网址是测试用容的
https://jhinsama.github.io/demos/image-clip
这个网址有使用方法
https://github.com/Jhinsama/Jhinsama.github.io/tree/master/demos/image-clip
如果使用方法看不懂的可以直接私信我
顺便说一句
这个插件支持手机网页
D. js图片怎么分离问题
拆分为两个抄函数不就袭好了
function mouseOver_a()
{
document.getElementById('a').src ="imagess/global/dring1.gif"
}
function mouseOver_b()
{
document.getElementById('b').src ="imagess/global/dring2.gif"
}
a ,b中分别调用不同的函数
或mouseOver中判断一下event源是a 还是b ,现作处理
E. 如何使用JavaScript分割图片完成拼图游戏
这里有一个图片切割效果
或许你可以参考它的原理做一个拼图游戏
试试吧
F. 通过js来获取从数据库中图片集合后,js如何将他们分割
首先放一个linkbutton上去.(去掉text,这样就看不见) 然后用js调用linkbutton的click事件版(用自动权产生的_dopostback来调用) 在linkbutton的click事件中读图片,然后指定div的内容。 当然,div要runat=server了.
G. 如何在JS里将头像图片切割,代码选取框锁定为正方形Javascript(如图,现在是自由切割,希望能锁定)
快来解决吧
我最近的项目中也会用到!呵呵
H. css或js如何分割图片,使浏览器只向服务器请求下载图片一次
这个不一定的,要看你也么原因了
I. 网页一张图片分割显示 利用js还是jQ的
笨
笨
笨
笨
笨
笨
笨
J. 怎么用JavaScript 控制图片切换
这个有很多种方式,
1.选项卡:你把div换成图片就可以使用了。只是一个思路。
<style>
.on{background:#399;color:#fff;}
.boxdiv{width:300px;height:300px;border:1pxsolid#000;display:none;}
</style>
<script>
window.onload=function(){
varoBox=document.getElementById('box');
varaBtn=oBox.getElementsByTagName('input');
varaDiv=oBox.getElementsByTagName('div');
for(vari=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
for(vari=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='on';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<divid="box"class="box">
<inputclass="on"type="button"value="aaa">
<inputtype="button"value="bbb">
<inputtype="button"value="ccc">
<divstyle="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
2.修改img的src路径
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
varoImg=document.getElementById('img');
oBtn.onclick=function(){
oImg.src='../2.jpg';
};
};
</script>
</head>
<body>
<inputtype="button"value="clickme"id="btn"/>
<imgsrc="../1.jpg"id="img"/>
</body>