本文目录一览：
- 1、javascript让图片移动的函数
- 2、JS控制图片向左向右移动的代码
- 3、js实现图片旋转效果
- 4、js 怎么实现点击一次图片旋转90度，再点击再转90度呢
- 5、JavaScript代码实现图片循环滚动效果
- 6、js设置图片随机旋转角度
javascript让图片移动的函数
/**
* 简单自定义动画函数
* @param {objec} obj 一个元素对象
* @param {string} pos 表示移动到的目标地点
* @param {number} speed 速度大小，表示每秒移动的像素数，默认为1px/100ms
* @param {function} callback 动画执行完后调用的函数
* @return {[object]} 元素自身，方便链式写法
*/
function ani(obj, pos, speed, callback) {
/* 清除无用的定时器 */
if (obj.move) {
clearTimeout(obj.move);
}
obj.style.position = "absolute";
var speed = speed || 10,
x = parseInt(obj.style.left) || 0,
y = parseInt(obj.style.top) || 0;
/* 初始化元素的相关属性值 */
if (!obj.x) {
obj.x = x;
obj.y = y;
obj.fx = x + pos[0];
obj.fy = y + pos[1];
}
/* 如果元素到达指定位置，则跳出并执行回调函数 */
if (x === (pos[0] + obj.x) y === (pos[1] + obj.y)) {
if (typeof callback === "function") {
callback();
}
obj.x = null;
obj.y = null;
obj.fx = null;
obj.fy = null;
return obj;
}
/* 判断在水平方向上是应该往哪个方向移动 */
if (obj.x obj.fx) {
if (x obj.fx) {
obj.style.left = (x + speed) + "px";
}
} else {
if (x obj.fx) {
obj.style.left = (x - speed) + "px";
}
}
/* 判断在垂直方向上是应该往哪个方向移动 */
if (obj.y obj.fy) {
if (y obj.fy) {
obj.style.top = (y + speed) + "px";
}
} else {
if (y obj.fy) {
obj.style.top = (y - speed) + "px";
}
}
obj.move = setTimeout(function() {
ani(obj, pos, speed, callback);
}, 100);
}
window.onclick = function() {
ani($("#testAni")[0], [100, 0], 5, function() {
ani($("#testAni")[0], [-100, 0],null,function(){
alert("success")
});
})
}
可供参考
JS控制图片向左向右移动的代码
这段代码可以： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " " html xmlns=" " head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / title图片/title script language="javascript" !-- //图片滚动列表 mengjia 070927 var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移动(px) var PageWidth_1 = 116 * 3; //翻页宽度 var interval_1 = 7000; //翻页间隔 var fill_1 = 0; //整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1="right"; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)} function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);} function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth} GetObj('ISL_Cont_1').scrollLeft-=Space_1} function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)} function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth} GetObj('ISL_Cont_1').scrollLeft+=Space_1} function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return} var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace1){TempSpace=1}} if(Comp_10){if(Comp_1-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}} function picrun_ini(){ GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML; GetObj('ISL_Cont_1').scrollLeft=fill_1=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1); GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)} GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()} AutoPlay_1(); } //产品展示滚动图片结束 //-- /script style type="text/css" !-- BODY { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #fff; BORDER-RIGHT-WIDTH: 0px } .blk_18 { BORDER-RIGHT: #e3e3e3 1px solid; BORDER-TOP: #e3e3e3 1px solid; MARGIN-TOP: 8px; FONT-SIZE: 12px; BACKGROUND: #f3f3f3; OVERFLOW: hidden; BORDER-LEFT: #e3e3e3 1px solid; WIDTH: 390px; BORDER-BOTTOM: #e3e3e3 1px solid; ZOOM: 1 } .blk_18 .pcont { FLOAT: left; OVERFLOW: hidden; WIDTH: 350px } .blk_18 .ScrCont { WIDTH: 32766px; ZOOM: 1 } .blk_18 #List1_1 { FLOAT: left } .blk_18 #List2_1 { FLOAT: left } .blk_18 .LeftBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .RightBotton { BACKGROUND: url( ) no-repeat; FLOAT: left; MARGIN: 10px 1px; WIDTH: 15px; HEIGHT: 72px } .blk_18 .LeftBotton { BACKGROUND-POSITION: 0px 0px; MARGIN-LEFT: 5px } .blk_18 .RightBotton { BACKGROUND-POSITION: 0px -100px; MARGIN-LEFT: -1px } .blk_18 .LeftBotton:hover { BACKGROUND-POSITION: -20px 0px } .blk_18 .RightBotton:hover { BACKGROUND-POSITION: -20px -100px } .blk_18 .pl IMG { DISPLAY: block; MARGIN: 6px auto 1px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none } .blk_18 .pl { BORDER-RIGHT: #f3f3f3 1px solid; BORDER-TOP: #f3f3f3 1px solid; FLOAT: left; BORDER-LEFT: #f3f3f3 1px solid; WIDTH: 114px; LINE-HEIGHT: 24px; BORDER-BOTTOM: #f3f3f3 1px solid; TEXT-ALIGN: center; TEXT-DECORATION: underline } .blk_18 A.pl:hover { BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; BACKGROUND: #fff; BORDER-LEFT: #ff9900 1px solid; COLOR: #ff9900; BORDER-BOTTOM: #ff9900 1px solid } .commu_cont3 { MARGIN: 9px 7px 7px; LINE-HEIGHT: 150% } .commu_cont3 UL { WIDTH: 188px } -- /style /head body !-- picrotate_left start -- DIV class=blk_18A onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);" target=_self/A DIV class=pcont id=ISL_Cont_1 DIV class=ScrCont DIV id=List1_1!-- piclist begin --A class=pl href=" " target=_blankIMG height=72 alt=20-50元夏装抢疯 src=" " width=96美女小凡最新夏装/AA class=pl href=" " target=_blankIMG height=72 alt=韩国人气小耳环 src=" " width=96韩国人气小耳环/AA class=pl href=" " target=_blankIMG height=72 alt=3万6超值装修88平 src=" " width=963万6超值装修88平/AA class=pl href=" " target=_blankIMG height=72 alt=牛干巴敲开财富门 src=" " width=96牛干巴敲开财富门/AA class=pl href=" " target=_blankIMG height=72 alt=4K至7K高性能本本 src=" " width=964K至7K高性能本本/AA class=pl href=" " target=_blankIMG height=72 alt=7万装修102平婚房 src=" " width=967万装修102平婚房/AA class=pl href=" " target=_blankIMG height=72 alt=最新小车节油为主 src=" " width=96最新小车节油为主/AA class=pl href=" " target=_blankIMG height=72 alt="热门项目 BT烤翅" src=" " width=96热门项目 BT烤翅/AA class=pl href=" " target=_blankIMG height=72 alt=流行T恤+裤装 src=" " width=96要显瘦就这么穿！/A !-- piclist end --/DIV DIV id=List2_1/DIV/DIV/DIVA onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href="javascript:void(0);" target=_self/A/DIV SCRIPT type=text/javascript !-- picrun_ini() //-- /SCRIPT !-- picrotate_left end -- /body /html
js实现图片旋转效果
1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。
2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。
3、接下来就给图片所在的li定义宽高，如下图所示。
4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。
5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。
6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。
js 怎么实现点击一次图片旋转90度，再点击再转90度呢
现在我们以这个苹果的图片作为例子
我将演示代码写在这个页面网页链接，下面解释其用法。
页面结构如图
javascript代码如下
$(function() {
var r = 0;
$('img').click(function() {
r += 90;
$(this).css('transform', 'rotate(' + r + 'deg)');
});
});
核心思路是控制图片的这个css属性：
transform: rotate(360deg);
其中360deg就是360度，点一次旋转90度
JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
参数说明：
a.
function：要调用的JavaScript自定义函数名称。
b.
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
（1）在页面的合适位置添加一个id属性为demo的div标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;"
table
border="0"
cellspacing="0"
cellpadding="0"
tr
td
valign="top"
id="marquePic1"
!--
要循环滚动的图片
--
table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
tr
align="center"
%for(int
i=1;i8;i++){%
td
img
src="Images/%=i%.jpg"
width="118"
height="166"
border="1"
/td
%}%
/tr
/table
/td
td
id="marquePic2"
width="1"/td
/tr
/table
/div
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
script
language="javascript"
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
/script
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
js设置图片随机旋转角度
代码应该是：
imgcss[i].style.transform="rotate(" + j + ")";
首先 j是变量 双引号里面套单引号 还是字符串， 不是变量
其次 字符串拼接要写加号