单击时自动使用弹出信息对徽标进行动画处理
Animating the logo automatically with a pop-up info on being clicked
> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">
Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe'
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>',
type: 'inline'
},
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
<script>
</body>
</html>
如何使徽标在单击时自动向右浮动,并显示带有一些信息的弹出窗口。现在我用了一个按钮,但我想用一个标志。那么我怎样才能放入图像而不是按钮,以及单击该徽标图像时出现的弹出窗口。
要使用图像作为弹出窗口的触发器,您似乎正在使用"打开弹出窗口"id
。 您可以删除按钮并在按钮中添加图像或在按钮中放置图像(我喜欢按钮,但您必须采取措施取消样式( - 所以一个<a>
标签 - 或任何你喜欢的 + 添加"打开弹出窗口"的id
。
..按钮 id=">打开弹出窗口">...
...$('#open-popup'(.magnificPopup({...
至于点击时移动徽标...你可以用jQuery/JavaScript添加一个类,该类可以做动画。
jQuery
$('.element').on('click', function() {
$(this).addClass('active'); // $(this) refers to the element clicked in this case
});
风格
.element {
transition: .5s; // set speed (look up other options)
}
.element.active {
transform: translate(50%, 0); // random movement example
}
有许多不同的弹出式/灯箱。如果 magnificPopup 不愉快,请尝试另一个。
相关文章:
- Adobe Edge:动画完成时添加onComplete处理程序
- 使用不同的超时对数组中的每个项目进行角度动画处理
- 图表.js 2,从右到左(不是自上而下)进行动画处理
- 使用 JavaScript 对 HTML5 进度条进行动画处理
- 使用 JQuery 对 Spin SVG 元素进行动画处理
- 使用 GSAP 对模糊滤镜进行动画处理
- 使用 jQuery 对窗口进行动画处理
- 如何使用jQuery对固定元素的位置进行动画处理
- jQuery 动画处理最大宽度溢出问题
- 悬停不起作用时对不透明度更改进行动画处理
- 处理 QML 动画的屏幕分辨率更改
- 在两个值之间插值或“补间”(但不进行动画处理)
- 尝试在画布中对形状进行动画处理时,它会显示,但不移动
- 如何在不分隔跨度字母的情况下对文本进行动画处理
- 对链接的 svg 进行动画处理不起作用;内联时工作正常
- 防止对某些事件进行进一步的动画处理
- Snap.svg:在动画中使用相同的种类对多个零件进行动画处理
- 如何使用if语句jquery对数字进行动画处理
- 按随机顺序对元素进行动画处理
- 元素在使用 jQuery 对相对包装宽度进行动画处理时消失