素材牛VIP会员

jQueryNotes仿QQ空间添加图片标记实例

 所属分类:PHP/MySql-文件操作,常用实例教程

 浏览:3368次-  下载:285次-  评论:14次-  更新时间:2020-09-06
jQueryNotes仿QQ空间添加图片标记实例
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery-Notes是一个简单易用jQuery-Plugin,允许您添加备注任何图像(甚至是外国的)在你的网站或博客。

基础属性

  • 难易高级
  • 语言PHP
  • 数据库

详细介绍

jquery-notes有以下特点:

支持添加备注图像

丰富的API

支持标记伸缩

支持更改主题

支持图片标记添加链接

不需要数据库

HTML

首先在页面上放置一张添加标志的图片

<div class="samples-box clearfix"> 
    <img src="samples/sample_1.jpg  width="333" height="500" class="jquery-note_1-2"/> 
</div>

引入jquery和jquery-notes相关组件

<link rel="stylesheet" title="Standard" href="jquery-notes_css/style.css" 
type="text/css" media="all" /> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" title="Standard" href="jquery-notes_css/lteIE8.css" 
    type="text/css" media="all" /> 
<![endif]--> 
<script type="text/javascript" src="jquery-notes_js/jquery.js"> 
</script> 
<script type="text/javascript" src="jquery-notes_js/jquery-ui.js"> 
</script> 
<script type="text/javascript" src="jquery-notes_js/jquery-notes_1.0.8.js"> 
</script>

调用jquery-notes插件

$(function() { 
    $('.jquery-note_1-2').jQueryNotes({ 
        minWidth: '10%', 
        minHeight: 20, 
        aspectRatio: true, 
        helper: 'helper-class', 
        allowLink: false, 
        dateFormat: 'D.M.Y', 
        operator: 'jquery-notes_php/notes.php' 
    }); 
});
参数描述默认值
operator远程加载列表url-
maxNotes最大标记数量-
minWidth最小标记宽度-
minHeight最小标记高度-
allowAdd是否允许添加标记-
allowEdit是否允许编辑标记-
allowDelete是否允许删除标记-
allowHide是否允许隐藏标记-
allowLink是否允许添加链接-
loadNotes是否加载标记-

讨论这个素材(14)回答他人问题或分享使用心得会奖励牛币

mi***02  
2020年03月19日

效果还可以的呢

回复
yu***01  
2020年04月01日

牛x,好厉害的js

回复
赵***6  
2020年05月03日

可能以后用.,膜拜膜拜,,

回复
言***-  
2020年05月07日

实用又好用!这就是代码的魅力,已下载次

回复
龙***爸  
2020年05月22日

功能牛X

回复
12***mo  
2020年05月30日

楼主真棒

回复
霍***跑  
2020年06月12日

示爱效果就是棒!

回复
yz***zw  
2020年07月02日

实用又好用!这就是代码的魅力,已下载次,留着备用!

回复
诸***1  
2020年07月07日

可能以后用得上

回复
适***的  
2020年07月07日

好牛逼的说,膜拜膜拜

回复
Jo***91  
2020年07月10日

看起来很厉害的样子膜拜一下

回复
小***心  
2020年08月19日

排版上可以再优化一下。

回复
卡***丢  
2020年08月24日

挺好玩啊

回复
wx***78  
2020年12月27日

看起来很厉害的样子膜拜一下

回复
qq***02  
2021年01月02日

挺好玩的

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:285
所需牛币:100 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)