① css3 實現PPT螺旋飛入效果
矩形1或2是被設置了特效的組件的名字。
你選中一個組件,右鍵單擊,選「自定義動畫」,右邊會出現一個窗口,在「添加效果」里選你喜歡的動畫效果,下面的窗口就會出現你剛設置的動畫效果的名字。
不知道是不是你說的意思
② 求助:怎麼樣用jQuery製作出一個圖片飛入購物車的動畫
給你個示例吧,應該能幫助到你
這是html
<inputid="Button1"type="button"value="button"/>
<tablestyle="width:100%;">
<tr>
<td>
<divstyle="width:100px;height:100px;border:1pxsolid#f08080"id="shop">購物車</div>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<tdstyle="height:500px"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<divstyle="width:50px;height:50px;background-color:#f08080"id="proct">
商品
</div>
</td>
</tr>
</table>
這個是jQuery代碼:
$(function(){
$("#Button1").click(function(){
varshopOffset=$("#shop").offset();
varcloneDiv=$("#proct").clone();
varproOffset=$("#proct").offset();
cloneDiv.css({"position":"absolute","top":proOffset.top,"left":proOffset.left});
$("#proct").parent().append(cloneDiv);
cloneDiv.animate({
left:shopOffset.left,
top:shopOffset.top
},"slow");
});
});
③ jquery 彈出框,如下圖 ,加入購物車效果
<!DOCTYPEhtml>
<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title></title>
<scripttype="text/javascript"src="jquery.min.js"></script>
<styletype="text/css">
.des{
width:400px;
margin:0auto;
}
.add2carttip{
width:220px;
height:90px;
padding:0;
border:1pxsolidrgba(69,66,66,0.91);
background-color:#393939;
margin:0auto;
border-radius:12px12px;
position:fixed;
display:none;
}
.add2carttip>div{
vertical-align:middle;
color:#D0D0D0;
text-align:center;
font-size:1.2em;
font-weight:bold;
margin:0;
}
.c-title{
height:39px;
line-height:39px;
border-bottom:1px#D0D0D0solid;
}
.c-content{
height:49px;
line-height:49px;
border-top:1px#D0D0D0solid;
}
.c-add,.c-sub{
display:inline-block;
vertical-align:middle;
width:20px;
font-size:1.5em;
font-weight:bold;
cursor:pointer;
}
.c-sub{
vertical-align:-5px;
font-size:1.8em;
}
.c-count{
width:30px;
height:30px;
border-radius:15px;
border:none;
text-align:center;
font-size:inherit;
}
.c-action{
display:inline-block;
cursor:pointer;
}
.c-add:hover,.c-sub:hover,.c-action:hover{
color:#FAFAFA;
}
</style>
<scripttype="text/javascript">
$(function(){
var$tip=$('.add2carttip');
var$add=$('.c-add');
var$sub=$('.c-sub');
var$count=$('.c-count');
var$action=$('.c-action');
var$win=$(window);
functionsetTipPosition(){
$tip.animate({
left:(($win.width()-$tip.width())/2)+'px',
top:($win.height()*1/3)+'px'
},500);
}
setTipPosition();
$win.on('resize',setTipPosition);
$tip.on('selectstart',function(e){e.preventDefault();returnfalse;});
$add.on('click',function(){
$count.val(parseInt($count.val())+1);
});
$sub.on('click',function(){
$count.val(parseInt(($count.val())-1)||1);
});
$action.on('click',function(){
alert('add'+$count.val()+'tocart.');
});
$('.toggleTip').on('click',function(){
$tip.fadeToggle(500);
});
});
</script>
</head>
<body>
<divclass="des">
不支持IE9以下的IE瀏覽器
<ahref="javascript:void();"class="toggleTip">顯示或隱藏</a>
</div>
<divclass="add2carttip">
<divclass="c-title">
商品詳情
</div>
<divclass="c-content">
<spanclass="c-add">+</span>
<inputtype="text"class="c-count"value="1"/>
<spanclass="c-sub">-</span>
<spanclass="c-action">
加入購物車
</span>
</div>
</div>
</body>
</html>
代碼 。。。
④ 怎麼用css實現購物車的飛入效果
css倒是不知道,不過jQuery中有一個animate(動畫效果)裡面會有這樣的功能
⑤ jquery曲線飛入購物車效果遇到一點小問題
提供一個思路,僅供參考:
假設你用的是animate,再假設你是通過改變"運動塊"的left值和top值來實現專運動的。
那麼,既然屬是曲線,就會有公式。假如一個拋物線的公式:x2=-2py(x>0)
那麼,你就可以寫一個循環,定義一個變數來表達left和top值,直到到達指定位置,循環結束。示例代碼:
while($top<900){
$left=-sqrt(-2p*$top);
$('.div').animate({left:$left,top:$top},100);
}
這是根據上面假設的拋物線公式確定的。不知道你是否能看懂。
⑥ 求html購物車代碼,,效果如圖顯示
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>修改訂單</title>
<styletype="text/css">
body{
font-size:13px;
line-height:25px;
}
table{
border-top:1pxsolid#333;
border-left:1pxsolid#333;
width:400px;
}
td{
border-right:1pxsolid#333;
border-bottom:1pxsolid#333;
text-align:center;
}
.title{
font-weight:bold;
background-color:#cccccc;
}
inputtext{
width:100px;
}
</style>
<scripttype="text/javascript">
functionaddRow(){
//行的長度
varrowlength=document.getElementById("order").rows.length;
//得到整個表格對象
varorder=document.getElementById("order").insertRow(rowlength-1);
order.id=rowlength-1;
//插入列
varcel1=order.insertCell(0).innerHTML="游戲光碟";
varcel2=order.insertCell(1).innerHTML="34";
varcel3=order.insertCell(2).innerHTML="¥58.40";
varcel4=order.insertCell(3).innerHTML="<inputtype="button"value="刪除"onclick="delRow('"+(rowlength-1)+"')"/>"+"<inputtype="button"value="修改"onclick="editRow('"+(rowlength-1)+"')"/>"
}
functiondelRow(qwe){
=document.getElementById(qwe).rowIndex;
document.getElementById("order").deleteRow(ewq);
}
functioneditRow(rowID){
varrow=document.getElementById(rowID);
varcel=row.cells;
vartext=cel[1].innerHTML;
cel[1].innerHTML="<inputtype='text'value='"+text+"'style='width:40px;'>"
cel[3].lastChild.value="確定";
cel[3].lastChild.setAttribute("onclick","update('"+rowID+"')");
}
functionupdate(qwe){
varrow=document.getElementById(qwe);
varcel=row.cells;
vartext=cel[1].lastChild.value;
cel[1].innerHTML=text;
cel[3].lastChild.value="修改";
cel[3].lastChild.setAttribute("onclick","editRow('"+qwe+"')");
}
/*
functionadd(){
vara=document.getElementById("order").rows.length;
varb=document.getElementById("order").insertRow(a-1);
varone1=b.insertCell(0).innerHTML="123";
}
*/
</script>
</head>
<body>
<tableborder="0"cellspacing="0"cellpadding="0"id="order">
<trclass="title">
<td>商品名稱</td>
<td>數量</td>
<td>價格</td>
<td>操作</td>
</tr>
<trid="1">
<td>防滑真皮休閑鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><inputname="rowdel"type="button"value="刪除"onclick='delRow("1")'/>
<inputid="edit1"type="button"value="修改"onclick='editRow("1")'/></td>
</tr>
<tr>
<tdcolspan="4"style="height:30px;">
<inputname="addOrder"type="button"value="增加訂單"onclick="addRow()"/></td>
</tr>
</table>
</body>
</html>
這個是我原來上學的時候練習的代碼,練習的是基礎的jsDOM操作,不過建議以後用Jquery 比較方便 有什麼不懂得可以問我
⑦ CSS布局購物車,應該如何寫呀
絕對定位,想怎麼布局就怎麼布局!
⑧ Jquery商品拋物線飛入購物車代碼
這個建議你去找現成js。。給你提供一個地址。。
http://www.zhangxinxu.com/wordpress/?p=3855
裡面有現成的方法。。
張鑫專旭同學的博客屬裡面有這樣的方法。。你可以去找的。
zhangxinxu.com/study/201312/js-parabola-shopping.html
就是這個地址啦。跟你這個一樣的效果
⑨ 怎麼用css javascript做出一個從左側飛入
不知道你要做什麼,無聊寫個js吧
<html>
<body>
<divid="container"style="width:800px;background-color:#8C7D65;height:100%;margin:0auto;">
<divid="fly-item"style="width:20px;height:20px;border-radius:10px;background-color:black;position:absolute;margin-top:30%;">
</div>
</body>
<script>
varobj=document.querySelector("#fly-item");
varfly_distance=0;
varjourney=780;
varinterval=setInterval(function(){
fly_distance+=1;
obj.style.marginLeft=(fly_distance+"px");
if(fly_distance>=journey){
clearInterval(interval);
alert("到終點了");
}
},10);
</script>
</html>
⑩ 文字一行一行從底部飛入 html5 css3 求大神。。。
<marquee behavior="scroll" direction="up">
<div>輸入文字行1</div>
<div>輸入文字行2</div>
<div>輸入文字行3</div>
</marquee>
手打望採納