jq 写入大段html代码,jq点击增加一段html

广告位明细(最多5条)
+增加

广告位

<?php  foreach($port as $key=>$value):?>

">=$value[‘value‘]?>

<?php  foreach($page as $key=>$value):?>

">=$value[‘value‘]?>

请选择广告位

发布时间

-

备注说明

上传附件

上传

$("#newyz1").bind(‘click‘,function() {

_addnum++;

var num=_addnum;

console.log(num);

if($(".one1").length>4){

layer.msg("最多5条数据");

return false;

}

var html=‘

\n‘ +

‘                

\n‘ +

‘                    

\n‘ +

‘\n‘+

‘ \n‘+

‘                        广告位\n‘ +

‘                    \n‘+

‘                        

\n‘ +

‘                            \n‘;

for (var i=0;i

html+=‘‘+ports[i][‘value‘]+‘‘;

}

html+=‘\n‘ +

‘                        

\n‘ +

‘                        

\n‘ +

‘                            \n‘;

for (var i=0;i

html+=‘‘+pages[i][‘value‘]+‘‘;

}

html+=‘\n‘ +

‘                            \n‘ +

‘                        

\n‘ +

‘                        

\n‘ +

‘                            \n‘ +

‘                                请选择广告位\n‘ +

‘                            \n‘ +

‘                        

\n‘ +

‘\n‘ +

‘                    

\n‘ +

‘                

\n‘ +

‘                

\n‘ +

‘                    发布时间\n‘ +

‘                    

\n‘ +

‘                        

\n‘ +

‘                            \n‘ +

‘                            \n‘ +

‘                            -\n‘ +

‘                        

\n‘ +

‘                    

\n‘ +

‘                    

\n‘ +

‘                        

\n‘ +

‘                            \n‘ +

‘                            \n‘ +

‘                        

\n‘ +

‘                    

\n‘ +

‘                

\n‘ +

‘                

\n‘ +

‘                    备注说明\n‘ +

‘                    

‘                    

\n‘ +

‘                        

\n‘ +

‘                

\n‘ +

//                            ‘ 

\n‘ +

//                        ‘                    上传附件\n‘ +

//                        ‘                    

\n‘ +

//                        ‘                        

\n‘ +

//                        ‘                            \n‘ +

//                        ‘                                上传\n‘ +

//                        ‘                                \n‘ +

//                        ‘                            \n‘ +

//                        ‘                        

\n‘ +

//                        ‘                    

\n‘ +

//                        ‘                

\n‘+

‘;

$(‘#xx‘).append(html);

//jq上传插件开始

$(".UploadImg").fileupload({

url: ‘http://imgapi.qq.com/upload/php/upload.php‘,

sequentialUploads: true,

formData: {"app": ‘brzy‘},

returnType: "json",

acceptFiles: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/*,image/*,.pdf,.zip,.rar,.doc,.docx",

dataType: ‘json‘,

// 上传完成后的执行逻辑

done: function (e, data) {

var n = data.jqXHR.responseText;

var an = JSON.parse(n);

// console.log(an);

layer.closeAll();

// if(typeof(_clickBut)==‘undefined‘){

//     var _clickBut=‘‘;

// }

_clickBut = $(this).attr(‘data‘);//哪个按钮被点击了

console.log($(this));

callback(an.url);

},

// 上传过程中的回调函数

progressall: function (e, data) {

layer.load(0, {shade: false});

}

});

//jq插件结束

$(".khnimus1").live(‘click‘,function(){

$(this).parents(".one1").remove();

});

});

原文:http://liang3391.blog.51cto.com/178205/1962817

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的用 HTMLjQuery 实现产品放大镜的示例代码HTML 代码: ```html <div class="product-image-container"> <img src="product-image.jpg" alt="Product Image" class="product-image"> <div class="zoom-container"> <img src="product-image.jpg" alt="Product Image" class="zoom-image"> </div> </div> ``` CSS 代码: ```css .product-image-container { position: relative; } .zoom-container { position: absolute; top: 0; left: 100%; width: 200px; height: 200px; overflow: hidden; } .zoom-image { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } ``` jQuery 代码: ```javascript $(document).ready(function() { var zoomContainer = $('.zoom-container'); var zoomImage = $('.zoom-image'); var productImage = $('.product-image'); zoomContainer.hide(); productImage.mouseenter(function() { zoomContainer.show(); }); productImage.mousemove(function(e) { var productImageOffset = productImage.offset(); var x = e.pageX - productImageOffset.left; var y = e.pageY - productImageOffset.top; var zoomImageWidth = zoomImage.width(); var zoomImageHeight = zoomImage.height(); var zoomContainerWidth = zoomContainer.width(); var zoomContainerHeight = zoomContainer.height(); var newX = (x / productImage.width()) * zoomImageWidth - zoomContainerWidth / 2; var newY = (y / productImage.height()) * zoomImageHeight - zoomContainerHeight / 2; if (newX < 0) { newX = 0; } if (newX + zoomContainerWidth > zoomImageWidth) { newX = zoomImageWidth - zoomContainerWidth; } if (newY < 0) { newY = 0; } if (newY + zoomContainerHeight > zoomImageHeight) { newY = zoomImageHeight - zoomContainerHeight; } zoomImage.css({ left: -newX, top: -newY }); }); productImage.mouseleave(function() { zoomContainer.hide(); }); }); ``` 代码解释: - 首先,HTML 代码包含了一个 `.product-image-container` 的 div 容器,包含了产品图片和放大镜容器两个 img 元素。 - CSS 代码中,使用了绝对定位来实现放大镜容器的浮动效果,同时隐藏了放大镜容器。 - jQuery 代码中,通过监听产品图片的 mouseenter、mousemove 和 mouseleave 事件来显示、移动和隐藏放大镜容器,并根据鼠标位置来计算放大镜中的图像显示位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值