本文实例讲述了jQuery实现可拖拽的许愿墙效果。分享给大家供大家参考,具体如下:
运行效果图如下:
这里简单介绍下功能点:
随机显示背景图或背景色 出现的位置随机 可以通过拖拽改变位置
好了,附上代码:
!doctype html html lang=' en ' head meta charset=' UTF-8 '/title许愿墙/title link rel='样式表href=' base。量滴CSS '/style # wish { height :650 px;余量:20px位置:相对;宽度宽度:960px}。心愿{后台: URL(心愿_ BG。png)无重复0 0;color: # 000高度:166 pxpadding:10px 20px 30px 20px宽度宽度:185px}。wish-close {后台: URL(wish _ close _ BG。png)无重复0 0;display:none位置:绝对;right :5 xtop :-5px;宽度:17 px高度:17 px}/style/header dy ul id=' wish ' Li 11111/Li Li 22222/Li Li 33333/Li Li 44444/Li Li 55555/Li/ul/body/html脚本src=' http : jquery。量滴js '/script script src=' http : jquery-ui。量滴js '/script script src=' http 3360 wish。js '/script script $(function())wish();$('.愿望')。可拖动({containment:'#wish ',scroll : false });});/script注意:
jqueryui需要加载可拖动的和缩放效果,可拖动是支持拖拽,而放缩效应是点击关闭的效果。
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题: 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。