導航:首頁 > 文字圖片 > js圖片文字旋轉木馬特效

js圖片文字旋轉木馬特效

發布時間:2022-11-28 18:52:49

⑴ 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屬性。

閱讀全文

與js圖片文字旋轉木馬特效相關的資料

熱點內容
嘻哈版衣服圖片 瀏覽:89
發電廠的圖圖片簡單 瀏覽:97
印在衣服上的標牌圖片 瀏覽:923
bob劉海發型圖片 瀏覽:439
絕美動漫圖片男生 瀏覽:204
我很累男生的圖片大全 瀏覽:291
電視牆設計圖片簡單又漂亮 瀏覽:48
軍用水杯價格及圖片 瀏覽:785
美國t台發型圖片欣賞 瀏覽:592
根據圖片如何區分NTC和PTC 瀏覽:895
如何編輯一個圖片的表格 瀏覽:245
可愛的老鼠圖片頭像 瀏覽:689
中碎發發型圖片女洋氣 瀏覽:330
著么畫可愛的動漫人物的圖片要圖顏色 瀏覽:306
word中圖片水印怎麼保護 瀏覽:705
玉米粥圖片大全 瀏覽:411
pr如何讓白色文字圖片變透明 瀏覽:489
光遇雙子豎屏高清圖片 瀏覽:390
如何把微信表情加入到圖片 瀏覽:210
貴州農村高清圖片 瀏覽:937