⑴ js或jQuery實習圖片以中心360度的旋轉特效
這是CSS3裡面的屬性,
以中心為圓點旋轉:transform-origin:center 0px;
旋轉角度:transform:rotate(360deg);
順時針旋轉角度;
旋轉角度可以寫在js代碼里,點擊旋轉或者載入頁面旋轉.都行
⑵ js實現頁面的指定圖片在不停的旋轉,怎麼實現呢有代碼參考嗎謝謝
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 800px;
height: 600px;
background-color: #ff0;
position: absolute;
}
.imgRotate {
width: 100px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" class="imgRotate" src="http://www..com/img/logo-yy.gif" />
<input id="input2" type="button" value="btn2"></input>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
var num = 0;
$("#input2").click(function(){
num ++;
$("#img1").rotate(90*num);
});
</script>
</html>
⑶ 怎麼讓裡面的每個字母向右旋轉90度,用js來實現。因為要兼容ie7
給指定的元素添加一個 CSS 屬性即可:
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
但僅對 IE8+ 或其他瀏覽器有效。
如果非得兼容 IE7 的話需要使用 filter 濾鏡DXImageTransform.Microsoft.Matrix。這個參數過於復雜,這里不展開寫了,題主可以自行搜索一下相關信息。
樓上說的jquery-rotate 在 IE7、8 上表現還可以,在 IE9 里反倒有坑,題主可以自行選擇是否使用。
⑷ 我想在網頁上實現一個小圖片在不停的旋轉的效果,就在那兒不停的360度轉啊轉的樣子
下面是用css旋轉圖片,用js換className。
換圖片地址後試試。
<html>
<head>
<style>
.css-turn-0{
-moz-transform:matrix(1,0,0,1,0,0);
-o-transform:matrix(1,0,0,1,0,0);
-webkit-transform:matrix(1,0,0,1,0,0);
transform:matrix(1,0,0,1,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,M21=0,M22=1,SizingMethod='autoexpand')"
}
.css-turn-270{
-moz-transform:matrix(0,-1,1,0,0,0);
-o-transform:matrix(0,-1,1,0,0,0);
-webkit-transform:matrix(0,-1,1,0,0,0);
transform:matrix(0,-1,1,0,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0,M12=1,M21=-1,M22=0,SizingMethod='autoexpand')"
}
.css-turn-180{
-moz-transform:matrix(-1,0,0,-1,0,0);
-o-transform:matrix(-1,0,0,-1,0,0);
-webkit-transform:matrix(-1,0,0,-1,0,0);
transform:matrix(-1,0,0,-1,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=0,M21=0,M22=-1,SizingMethod='autoexpand')"
}
.css-turn-90{
-moz-transform:matrix(0,1,-1,0,0,0);
-o-transform:matrix(0,1,-1,0,0,0);
-webkit-transform:matrix(0,1,-1,0,0,0);
transform:matrix(0,1,-1,0,0,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0,M12=-1,M21=1,M22=0,SizingMethod='autoexpand')"
}
</style>
</head>
<body>
<imgsrc="圖片地址">
<script>
varimg=document.getElementsByTagName('img')[0],
i=1,
css=['css-turn-0','css-turn-90','css-turn-180','css-turn-270'];
img.onclick=function(){
this.className=css[i++%4];
}
</script>
</body>
</html>
轉自zhaoapk 的回答。
⑸ javascript如何實現圖片任意角度的旋轉
可以用JAvascript改變這個圖片的css來旋轉他:
這個是css代碼:
img {
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
在JAvascript裡面可以先獲取到這張圖片 設置圖片id = "box"
var img = document.getElementById('box'); 獲取到這個圖片並用變數記住
img.style.transform = "rotate(90deg)"; 改變這個圖片的css,旋轉90度
完畢!!!
⑹ javascript如何實現圖片任意角度的旋轉
這個如果沒有對低版本瀏覽器兼容的要求的話,可以使用CSS3來實現,現在主流的瀏覽器都已支持
//
旋轉60度
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
⑺ js 怎麼實現點擊一次圖片旋轉90度,再點擊再轉90度呢
現在我們以這個蘋果的圖片作為例子
⑻ 求助JS圖片在滑鼠放上去時顯示文字特效
其實用jquery很好實現。把圖片放到一個div中,當滑鼠懸浮到這個div的時候,觸發jquery中的方法,給這個div填充內容,內容為你的文字,比如你的div的id叫「a」。你可以寫$("#a").text("這里是你的文字");當這條語句被執行,那麼id叫做a的div中的內容就變成了"這里是你的文字"。而你滑鼠移出這個div的時候,可以觸發一個方法,如同前面,重新把圖片填充進"a"中
⑼ 怎樣用js實現文字的環形旋轉
如果文字一直是正著的,
首先,要旋轉,對象的位置必須是能改變,所以position要設置
然後選擇其實就是改變它的left和top而已,而這兩個的值,是用math.sin(),和math.cos()算出來的。
如果旋轉文字本身,也就是文字是斜著的,則對其設置CSS的transform屬性。