图片滚动显示
用H5實現圖片滾動顯示像跑馬燈一樣的效果。
程序詳解：
圖片滾動的開始和停止
鼠標的放上和移走事件
無限循環
每次滾動速度的快慢
效果演示（圖片自右向左滾動）
代碼演示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><style><style>*{padding: 0;margin: 0;}img{width: auto;height: 180px;}div{width: 1500px;height: 180px;margin: 100px auto;background-color: blanchedalmond;overflow: hidden;}div > ul{width: 200%;list-style: none;animation-name: move;/*速度*/animation-duration: 9s;/*無限循環*/animation-iteration-count: infinite;/*時間函數*/animation-timing-function: linear;}div > ul > li{width: auto;float: left;}div > ul >li > img{height: 100%;}/*鼠標上移，停止動畫*/div:hover > ul{/*修改鼠標樣式*/cursor: pointer;/*暫停*/animation-play-state: paused;}/*開始動畫*/@keyframes move {from{transform: translateX(0);}to{transform: translateX(-1480px);}}</style></style><body><div><ul><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/1.png" alt=""></li><li><img src="img/5.jpg" alt=""></li><li><img src="img/3.png" alt=""></li><li><img src="img/2.jpg" alt=""></li><li><img src="img/4.jpg" alt=""></li><li><img src="img/1.png" alt=""></li><li><img src="img/3.png" alt=""></li></ul></div></body> </html>總結
- 上一篇： sencha app watch php
- 下一篇： 倒三角